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

效果图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/157398.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PXI-6608 185745H-02 PXI-6527 185633D-01

PXI-6608 185745H-02 PXI-6527 185633D-01 人工智能技术并不新鲜&#xff0c;但运行它的数据和计算却很新鲜 对于那些对人工智能技术历史感兴趣的人来说&#xff0c;一些今天正在使用的技术从20世纪50年代和60年代就已经存在了。 但是&#xff0c;如果人工智能已经存在了这么…

06 # 手写 map 方法

map 的使用 map 自带循环功能&#xff0c;对数据中的元素进行加工&#xff0c;得到一个加工后的新数据 ele&#xff1a;表示数组中的每一个元素index&#xff1a;表示数据中元素的索引array&#xff1a;表示数组 <script>var arr [1, 3, 5, 7, 9];var result arr.ma…

芯象导播软件使用NDI协议输入输出

芯象导播软件使用NDI协议输入输出 在之前的文章中&#xff0c;我们介绍了NDI传输协议在OBS中的使用【详见】&#xff0c;今天我们说说在“芯象导播”软件中如何使用NDI。 OBS软件最大的特色就是“开源、免费”&#xff0c;虽然插件众多功能强大&#xff0c;但毕竟不是商用软件…

小程序的使用率不高应该怎么提高?

小程序用完即走的特点对于用户来说很爽&#xff0c;但对于商家来说&#xff0c;如果用户走了就不回来了&#xff0c;即小程序不能被用户反复使用&#xff0c;那就关系到小程序的留存能力&#xff0c;那么&#xff0c;如何才能有效地提高小程序的留存率&#xff1f; 1、利用模块…

STM32F407的系统定时器

文章目录 系统定时器SysTick滴答定时器寄存器STK_CTRL 控制寄存器STK_LOAD 重载寄存器STK_VAL 当前值寄存器STK_CALRB 校准值寄存器 初始化 Systick 定时器SysTick_InitSysTick_CLKSourceConfig delay_us寄存器delay_us库函数delay_xms短时delay_ms长时SysTick_Config 系统定时…

什么是文件安全

文件安全就是通过实施严格的访问控制措施和完美的权限卫生来保护您的业务关键信息不被窥探&#xff0c;除了启用和监控安全访问控制外&#xff0c;整理数据存储在保护文件方面也起着重要作用。通过清除旧的、过时的和其他垃圾文件来定期优化文件存储&#xff0c;以专注于关键业…

激光雷达的特性总结

激光能识别的上下高度范围是多少? 激光雷达是一种典型的束波型传感器,扫描的射线呈束波状,打到物体上是一个光斑,并且距离越远,光斑越大。激光光斑的大小和激光雷达的制造工艺相关,一般来说在10m处光斑的大小可以达到7cm半径的圆。此外还要考虑到同一个光斑打到不同物体…

太阳能电池提效远超33%!美国橡树岭科学家发布量子计算机新研究

​&#xff08;图片来源&#xff1a;网络&#xff09; 美国橡树岭国家实验室&#xff08;ORNL&#xff09;宣布&#xff0c;通过使用Quantinuum H1-1量子计算机&#xff0c;发现了在当前量子系统上提升太阳能电池效率的最佳算法。 该项目由美国能源部基础能源科学办公室资助。…

【ChatGPT从瀑布模式到水母模式】如何赋能软件研发全流程?

【文末送书】今天推荐一本强大工具书《ChatGPT 驱动软件开发&#xff1a;AI 在软件研发全流程中的革新与实践》&#xff0c;本文将从其亮点与结构出发&#xff0c;详细阐发其对于运维、项目经理、程序员等的重要性与益处。 文章目录 导语内容作者简介专家推荐读者对象直播预告文…

AR眼镜定制开发-智能眼镜的主板硬件、软件

AR眼镜定制开发是一项复杂而又重要的工作&#xff0c;它需要准备相关的硬件设备和软件。这些设备包括多个传感器、显示装置和处理器等。传感器用于捕捉用户的动作和环境信息&#xff0c;如摄像头、陀螺仪、加速度计等;显示装置则用于将虚拟信息呈现给用户;处理器用于处理和协调…

Numpy数值计算Numpy初体验在线闯关_头歌实践教学平台

Numpy数值计算初体验 第1关 Numpy创建数组第2关 Numpy数组的基本运算第3关 Numpy数组的切片与索引第4关 Numpy数组的堆叠第5关 Numpy的拆分 第1关 Numpy创建数组 任务描述 本关的小目标是&#xff0c;使用 Numpy 创建一个多维数组。 测试说明 本关的测试过程如下: 平台运行ste…

微信小程序导入js使用时候报错

我是引入weapp库时候&#xff0c;导入js会报错。 需要在小程序开发工具里面配置 就可以了。