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,一经查实,立即删除!

相关文章

[论文笔记]E5

引言 今天又带来一篇文本匹配/文本嵌入的笔记:Text Embeddings by Weakly-Supervised Contrastive Pre-training。中文题目是 基于弱监督对比预训练计算文本嵌入。 本篇工作提出了E5模型(EmbEddings from bidirEctional Encoder rEpresentations)。该模型以带弱监督信号的对…

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中央仓库->地址…

【Docker】一些可以直接用的Docker环境

这里罗列一些打包的镜像&#xff0c;方便直接使用。 cu11.6ubuntu18.04 docker push kevinchina/deeplearning:cu11.6ubuntu18.04 FROM nvidia/cuda:11.6.2-cudnn8-devel-ubuntu18.04 RUN apt-get update && apt-get install -y wget git vim curl RUN wget http://…

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

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

Qt:删除QWidget中的所有布局和组件

技术要点&#xff1a; 1、调用QWidget::layout()可获取组件的布局&#xff1b; 2、QLayout::count() 可获取布局内的子项数量&#xff0c;包括子布局和子组件&#xff1b; 3、QLayout::itemAt(int index) 可根据索引获取相应的子项&#xff1b; 4、QLayout::removeWidget(Q…

手机通讯类、ip查询、智能核验、生活常用API接口推荐

手机通讯类 手机号码归属地&#xff1a;提供三大运营商的手机号码归属地查询。 空号检测&#xff1a;通过手机号码查询其在网活跃度&#xff0c;返回包括空号、停机等状态。 手机在网状态&#xff1a;支持传入三大运营商的号码&#xff0c;查询手机号在网状态&#xff0c;返…

linux mysql 创建数据库并配置用户远程管理

要在Linux上创建MySQL数据库并配置用户以实现远程管理&#xff0c;您可以执行以下步骤&#xff1a; 1. 登录到MySQL服务器&#xff1a; 在您的Linux终端中&#xff0c;使用以下命令登录到MySQL服务器。您需要提供MySQL服务器的用户名和密码。 mysql -u root -p 输入密码后&a…

几种软件开发方法对比

几种软件开发方法对比 1 综述 软件开发方法是一种使用早已定义好的技术集及符号表示习惯来组织软件生产的过程。 本文对净室方法、结构化方法、面向对象方法、原型法、逆向工程等方法进行梳理&#xff0c;并对各种开发方法特点、优点进行对比。 2 净室方法 2.1 特点 净…

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 列…

Product owner的职责

Product owner就是产品的负责人。Product owner的职责就是使Scrum团队创造增量能够实现产品价值最大化。那么Product owner该如何做呢&#xff1f;作为Scrum团队的一员&#xff0c;他&#xff08;她&#xff09;要为团队提供清晰的产品信息&#xff0c;如产品的愿景、目标。当然…

执行source命令显示 command not found

1&#xff09;修改完成/etc/profile&#xff0c;使其生效 source /etc/profile -提示找不到命令 试试&#xff1a;A&#xff09;locate source /etc/profile 试试&#xff1a;B&#xff09;usr/bin/source /etc/profile 也就是source命令无法识别而已&#xff0c;至…

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&#…

linux 出现Access-Your-Private-Data.desktop README.txt

参考:https://blog.csdn.net/h66295112/article/details/81085643 参考:https://askubuntu.com/questions/71708/how-do-i-open-access-your-private-data-desktop 原因应该是通过terminal修改了ubuntu密码&#xff0c;然后重启 THIS DIRECTORY HAS BEEN UNMOUNTED TO PROTECT…

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

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

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

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