当前位置：首页 > news >正文

uniapp-自定义表格，右边操作栏固定

news 2025/7/5 20:50:18

uniapp-自定义表格，右边操作栏固定

在网上找了一些，没找到特别合适的，收集了一下其他人的思路，基本都是让左边可以滚动，右边定位，自己也尝试写了一下，有点样式上的小bug，还在尝试修复中。
dataList的值赋一下即可。

			<view class = "content-copy"><scroll-view class = "work_list_in" scroll-x="true"><view class = "lis-top" style="border-top: 1rpx solid #DDD;"><view class = "lis-top-li">代码</view><view class = "lis-top-li">位置</view><view class = "lis-top-li">结算</view><view class = "lis-top-li">长度</view><view class = "lis-top-li">宽度</view><view class = "lis-top-li">数量</view><view class = "lis-top-li">部件</view><view class = "lis-top-li">修理</view></view><view class = "lis-top" v-for="(item, index) in dataList" :style="index%2 == 0?'background-color:#FFF':'background-color:#F8FAFC'"><view class = "lis-top-li border-style" >{{item.damage}}</view><view class = "lis-top-li border-style" >{{item.location}}</view><view class = "lis-top-li border-style" >{{item.ptyRspons}}</view><view class = "lis-top-li border-style" >{{item.length}}</view><view class = "lis-top-li border-style" >{{item.width}}</view><view class = "lis-top-li border-style" >{{item.repeats}}</view><view class = "lis-top-li border-style" >{{item.component}}</view><view class = "lis-top-li ">{{item.repaircode}}</view></view></scroll-view><view class = "lis-right"><view class = "lis-right-top" style="border-top: 1rpx solid #DDD;"><view class = "lis-top-li">操作</view></view><view class = "lis-right-top" v-for="(item, index) in dataList" :style="index%2 == 0?'background-color:#FFF':'background-color:#F8FAFC'"><view class = "lis-top-li border-style-right" @click.stop = "editList(item,index)">编辑</view><view class = "lis-top-li " style="color:red" @click.stop = "delList(item,index)">删除</view></view></view></view>

.content-copy{display:flex;align-items: center;justify-content: center;}.work_list_in{width:75%;background-color:#F3FAFF;}.lis-right{width:25%;}.lis-right-top{height:90rpx;width:100%;background-color:#F3FAFF;border-bottom: 1rpx solid #DDD;display:flex;align-items: center;justify-content: center;}.lis-top{height:90rpx; width:1000rpx;background-color:#F3FAFF;display:flex;align-items: center;justify-content: center;border-bottom: 1rpx solid #DDD;}.lis-top-li{width:150rpx;height:100%;display:flex;align-items: center;justify-content: center;font-weight:700;font-size:30rpx;}.border-style{/* color:#495E84; */border-right: 1rpx solid #DDD;}.border-style-right{color:#495E84;border-left: 1rpx solid #DDD;}