uniapp-自定义表格，右边操作栏固定-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp-自定义表格，右边操作栏固定。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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;
	}