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.mfbz.cn/a/113546.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

多线程锁的升级原理是什么

在 Java 中&#xff0c;锁共有 4 种状态&#xff0c;级别从低到高依次为&#xff1a;无状态锁&#xff0c;偏向锁&#xff0c;轻量级锁和重量级锁状态&#xff0c;这几个状态会随着竞争情况逐渐升级。锁可以升级但不能降级。 多线程锁锁升级过程 如下图所示 多线程锁的升级过程…

在NISQ小型计算机上执行大型并行量子计算的可能性

简介 Steve White提出了密度矩阵重整化群&#xff08;DMRG&#xff09;的基本思想&#xff0c;即纠缠是一种有价值的资源&#xff0c;可以用来精确或近似地描述大量子系统。后来&#xff0c;这一思想被理解为优化矩阵积状态&#xff08;MPS&#xff09;的算法&#xff0c;支持…

Android开发笔记(三)—Activity篇

活动组件Activity 启动和结束生命周期启动模式信息传递Intent显式Intent隐式Intent 向下一个Activity发送数据向上一个Activity返回数据 附加信息利用资源文件配置字符串利用元数据传递配置信息给应用页面注册快捷方式 启动和结束 &#xff08;1&#xff09;从当前页面跳到新页…

[idea]关于idea开发乱码的配置

在JAVA开发中&#xff0c;一般统一设置为UTF-8的编码&#xff0c;包括但不限于开发工具、日志架构、虚拟机、文件编码等。常见配置如下&#xff1a; 1、IDEA工具 在idea64.exe.vmoptions、idea.exe.vmoptions中添加&#xff1a; -Dfile.encodingUTF-8 2、JAVA 运行在window…

python科研绘图:条形图

条形图&#xff08;bar chart&#xff09;是一种以条形或柱状排列数据的图形表示形式&#xff0c;可以显示各项目之间的比较。它通常用于展示不同类别的数据&#xff0c;例如在分类问题中的不同类别、不同产品或不同年份的销售数据等。 条形图中的每个条形代表一个类别或一个数…

区块链与教育:颠覆传统,引领未来

区块链与教育&#xff1a;颠覆传统&#xff0c;引领未来 摘要&#xff1a;本文将探讨区块链技术在教育领域的应用及其潜在影响。通过介绍区块链技术的基本原理、教育领域的现状&#xff0c;以及区块链技术在教育中的实际应用案例&#xff0c;我们将展望一个去中心化、安全可信…

软件测试面试高频30道面试题

如果哪个测试经理在看我的文章&#xff0c;希望对面试者要微笑&#xff0c;不然面试结束&#xff0c;出门之后就一万个草泥马奔腾而过&#xff0c;其实面试者并不是希望你给他们什么&#xff0c;而是一种尊重&#xff0c;平等的谈话&#xff0c;不要高高在上感觉自己超牛逼一样…

【星海出品】VUE(一)

Windows安装nvm控制器 Windows里找都PowerShell。右击点击管理员运行。 1.安装choco Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(https://chocolatey.org/install.ps1))2.安装NVM choco install nvm 3.查看可…

【HeidiSql_01】python在heidisql当中创建新表的注意事项

python在heidisql当中创建新表的注意事项 假设你已经在python当中弄好了所有的结果&#xff0c;并且保存在df_all这个dataframe当中&#xff0c;然后要将其导入数据库当中并创建一张新的表进行保存。 # 构建数据库连接,将merged_df写回数据库 from sqlalchemy import create_e…

中海达守护电力人员作业安全

近日&#xff0c;中海达为电网某换流站作业人员提供的160余套北斗高精度定位产品顺利完成交付。通过使用北斗高精度定位技术&#xff0c;帮助换流站实现了人员&#xff08;车辆&#xff09;位置实时定位、电子围栏实时预警、远程作业指导等应用效果&#xff0c;用高科技保障电网…

【Linux学习笔记】进程概念(上)

1. 冯诺依曼体系结构2. 操作系统的作用3. 进程 1. 冯诺依曼体系结构 如图&#xff0c;这是一个冯诺依曼体系结构简图 其中这里的存储器指的是内存&#xff01; 用通俗的话来解释这个图&#xff0c;就是数据从输入设备进入&#xff0c;然后进入到存储器&#xff0c;CPU从存储器…

echarts 画散点图, x周,y周在指定位置标志一下

文章目录 echarts 画散点图&#xff0c; x周&#xff0c;y周在指定位置标志一下示例一例子二示例三 echarts 画散点图&#xff0c; x周&#xff0c;y周在指定位置标志一下 示例一 let scatterData {data: [[[-0.2, -0.6],[0.4, 0.3],[0.1, 0.4],[0.3, 0.5],[0.09, 0.1],[0.7,…

没有PDF密码,如何解密文件?

PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。想要解密&#xff0c;我们需要输入正确的密码&#xff0c;但是有时候我们可能会出现忘记密码的情况&#xff0c;或者网上下载P…

2023年最新版潮乎盲盒源码含搭建教程

后台开发语言&#xff1a;后端 Laravel 框架开发 前端开发框架&#xff1a;uniappvue 环境配置: php7.4 mysql5.6 nginx1.22 redis&#xff08;建议宝塔面板或 lnmp&#xff09; 源码获取请自行百度&#xff1a;一生相随博客 一生相随博客致力于分享全网优质资源&#x…

kotlin中集合操作符

集合操作符 1.总数操作符 any —— 判断集合中 是否有满足条件 的元素&#xff1b; all —— 判断集合中的元素 是否都满足条件&#xff1b; none —— 判断集合中是否 都不满足条件&#xff0c;是则返回true&#xff1b; count —— 查询集合中 满足条件 的 元素个数&#x…

机器学习-基本知识

 任务类型 ◼ 有监督学习(Supervised Learning) 每个训练样本x有人为标注的目标t&#xff0c;学习的目标是发现x到t的映射&#xff0c;如分类、回归。 ◼ 无监督学习(Unsupervised Learning) 学习样本没有人为标注&#xff0c;学习的目的是发现数据x本身的分布规律&#xf…

Hadoop PseudoDistributed Mode 伪分布式

Hadoop PseudoDistributed Mode 伪分布式加粗样式 hadoop101hadoop102hadoop103192.168.171.101192.168.171.102192.168.171.103namenodesecondary namenoderecource managerdatanodedatanodedatanodenodemanagernodemanagernodemanagerjob historyjob logjob logjob log 1. …

论文 辅助笔记:t2vec train.py

1 train 1.1 加载training和validation数据 def train(args):logging.basicConfig(filenameos.path.join(args.data, "training.log"), levellogging.INFO)设置了日志的基本配置。将日志信息保存到名为 "training.log" 的文件中日志的级别被设置为 INFO&…

Run, Don‘t Walk: Chasing Higher FLOPS for Faster Neural Networks(CVPR2023)

文章目录 AbstractIntroduction过去工作存在的不足我们的工作主要贡献&#xff08;待参考&#xff09; Related workCNNViT, MLP, and variants Design of PConv and FasterNetPreliminaryPartial convolution as a basic operatorPConv followed by PWConvFasterNet as a gene…

整理笔记——0欧电阻、电感、磁珠

设计电路时&#xff0c;经常用到0欧电阻、电感、磁珠&#xff0c;这三个基础电子原件万用表量都是“短路”&#xff0c;这三者之间有什么区别&#xff1f;什么情况下用什么原件&#xff1f; 一、0欧电阻 0欧电阻&#xff0c;并不是指元件的电阻值为0&#xff0c;而是电阻值很小…
最新文章