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

效果图:
uniapp-自定义表格,右边操作栏固定_第1张图片

你可能感兴趣的:(uniapp,uni-app)