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.mzph.cn/news/126127.shtml

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

相关文章

Zookeeper 集群搭建

Zookeeper Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目 Zookeeper 工作机制 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架 一旦这些数据的状态发生变化&#xff0c;Zookeeper就将负责通知…

微信小程序 跳转客服页面

前言 小程序 用户反馈 没有页面设计 可以直接跳转小程序指定客服页面 <button class"contactBtn"open-type"contact" contact"handleContact" session-from"sessionFrom">

【Tomcat】如何在idea上部署一个maven项目?

目录 1.创建项目 2.引入依赖 3.创建目录 4.编写代码 5.打包程序 6.部署项目 7.验证程序 什么是Tomcat和Servlet? 以idea2019为例&#xff1a; 1.创建项目 1.1 首先创建maven项目 1.2 项目名称 2.引入依赖 2.1 网址输入mvnrepository.com进入maven中央仓库->地址…

MyBatis实验(四)——关联查询

前言 多表关联查询是软件开发中最常见的应用场景&#xff0c;多表查询需要将数据实体之间的一对多、多对多、一对一的关系的转换为复杂的数据对象。mybaits提供的association和collection元素&#xff0c;通过映射文件构造复杂实体对象&#xff0c;在构造实体过程中&#xff0…

asp.net旅游交流管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net 旅游交流管理信息系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c# 语言开发 asp.net旅游交流网站1 应用技…

学术生活|如何有效参与学术会议

参与学术会议是研究生展示自己、提高学术能力、拓展人脉关系的重要途径。拟参会者可以从研究参加人员名单&#xff0c;找共同点&#xff0c;平等地与大佬展开交流。进行有用的学术社交需要真诚、多积累个人学术作品和发表&#xff0c;并不要仅仅加微信。这些经验将帮助学者更好…

阿里云的OSS云存储的基本使用

阿里云官网&#xff1a;阿里云-计算&#xff0c;为了无法计算的价值 通过阿里云官网&#xff0c;登录进入用户的界面&#xff0c;在搜索框中输入OSS&#xff0c;然后进入阿里云的对象存储OSS的控制台。&#xff08;未开通的开通即可&#xff09; 创建 Bucket 点击【Bucket 列…

4.数据库的基本操作

1.创建数据库 系统安装完成后会有部分默认数据库存在: 注意&#xff1a;mysql的语句每一个输入完后要有分号才能写下一个 这初始的四个库不要删除 其中:mysql数据库中存储用户访问权限。 创建自己的数据库命令如下: create database database_name&#xff08;数据库名字&am…

Stable Diffusion系列(二):ControlNet基础控件介绍

文章目录 线稿提取类Canny&#xff1a;边缘检测SoftEdge&#xff1a;软边缘检测Lineart&#xff1a;精细线稿提取Scribble/Sketch&#xff1a;涂鸦提取MLSD&#xff1a;建筑领域的线条提取 3D提取类Normal map&#xff1a;法线贴图Depth&#xff1a;深度计算Segmentation&#…

Nginx 部署多个安全域名,多个服务【工作记录】

以下是本人通过Docker 部署的Nginx挂载出来的文件目录 先看下 nginx.conf 配置文件内容&#xff1a;如下 ps&#xff1a;当前文件就是安装后的初始内容&#xff0c;无修改。主要关注最后一行 include /etc/nginx/conf.d/*.conf;表示引入其他目录下的.conf配置文件&#xff1b;…

在线数据库关系图设计工具,选Itbuilder

一旦数据库超出了人类可消化的大小&#xff0c;使用关系图工具来辅助其设计就变得至关重要。创建数据库听起来像是一个复杂的过程&#xff0c;但使用现代数据库图表工具&#xff0c;情况并非如此。 itbuilder在线数据库设计工具使用户可以创建和导入数据库关系图以查看数据库对…

【Java笔试强训】Day8(WY20 两种排序方法、HJ108 求最小公倍数)

WY20 两种排序方法 链接&#xff1a;两种排序方法 题目&#xff1a; 考拉有n个字符串字符串&#xff0c;任意两个字符串长度都是不同的。考拉最近学习到有两种字符串的排序方法&#xff1a; 1.根据字符串的字典序排序。例如&#xff1a; “car” < “carriage” < “c…

如何与极星Polestar建立 EDI连接?

Polestar是一家总部位于瑞典的电动汽车制造商&#xff0c;是沃尔沃汽车集团&#xff08;Volvo Car Group&#xff09;的子公司。Polestar专注于开发和制造高性能电动汽车&#xff0c;并在可持续性、创新和技术方面进行了重点投资。他们的目标是推动电动汽车市场的发展&#xff…

网络协议--TCP的超时与重传

21.1 引言 TCP提供可靠的运输层。它使用的方法之一就是确认从另一端收到的数据。但数据和确认都有可能会丢失。TCP通过在发送时设置一个定时器来解决这种问题。如果当定时器溢出时还没有收到确认&#xff0c;它就重传该数据。对任何实现而言&#xff0c;关键之处就在于超时和重…

Matplotlib教程(非常详细)(第一部分)

Matplotlib是一款免费开源的Python数据可视化工具。 Matplotlib 是 Python 中最受欢迎的数据可视化软件包之一&#xff0c;支持跨平台运行&#xff0c;它是 Python 常用的 2D 绘图库&#xff0c;同时它也提供了一部分 3D 绘图接口。Matplotlib 通常与 NumPy、Pandas 一起使用&…

【C++的OpenCV】第十五课-OpenCV的绘图工具(rectangle、circle、line、polylines、putText)常用方法简介

&#x1f389;&#x1f389;&#x1f389; 欢迎各位来到小白 p i a o 的学习空间&#xff01; \color{red}{欢迎各位来到小白piao的学习空间&#xff01;} 欢迎各位来到小白piao的学习空间&#xff01;&#x1f389;&#x1f389;&#x1f389; &#x1f496; C\Python所有的入…

你知道什么是 Ping 吗?

欢迎到我的博客浏览 胤凯 (oyto.github.io) 这次我们来看一下什么是 Ping 操作&#xff0c;以及它有什么用处&#xff0c;并且我们来动手实现一个简易版的 Ping 工具。 Ping 是什么&#xff1f; ​ ping 是一个计算机网络工具&#xff0c;通常用于测试网络连接的可达性和测…

中文编程软件怎么下载,中文编程语言

中文编程软件怎么下载&#xff0c;中文编程语言 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&#xff0c;想如图这个实例就是用这个工具…

【MySQL】视图

文章目录 一. 基本使用二. 视图规则和限制结束语 视图是一个虚拟表&#xff0c;其内容由查询定义&#xff0c;同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。 视图的数据变化会影响到基表&#xff0c;基表的数据变化也会影响到视图 一. 基本使用 创建视图 …

Linux系统jdkTomcatMySQL安装以及J2EE后端接口部署

目录 一、jdk&Tomcat安装 1.1 上传安装包到服务器 1.2 解压对应工具包 1.3 配置环境变量并测试jdk安装 1.4 启动tomcat 1.5 防火墙设置 1.5.1 开启/关闭防火墙以及防火墙状态查看 1.5.2 开放防火墙端口 二、MySQL安装 2.1 卸载mariadb 2.2 在线下载MySQL安装包(…