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.rhkb.cn/news/176617.html

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

相关文章

剑指offer(C++)-JZ5:替换空格(算法-其他)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 题目描述&#xff1a; 请实现一个函数&#xff0c;将一个字符串s中的每个空格替换成“%20”。 例如&#xff0c;当字符串为We A…

嵌入式应用选择正确的系统设计方法:第三部分

产品质量低下的原因有很多&#xff0c;例如&#xff0c;产品制造粗糙&#xff0c;组件设计不当&#xff0c;架构不佳以及对产品的要求了解不多。点击领取嵌入式物联网学习路线 必须设计质量。 您不能测试出足够的错误来交付高质量的产品。的质量保证&#xff08;QA&#xff09…

【送书福利-第二十三期】《从零基础到精通Flutter开发》

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号&#xff1a;程序员洲洲。 &#x1f388; 本文专栏&#xff1a;本文…

有什么可以自动保存微信收到的图片和视频的方法么

8-1 在一些有外勤工作的公司里&#xff0c;经常会需要在外面工作的同事把工作情况的图片发到指定微信或者指定的微信群里&#xff0c;以记录工作进展等&#xff0c;或者打卡等&#xff0c;对于外勤人员来说&#xff0c;也就发个图片的事&#xff0c;但是对于在公司里收图片的人…

4.数据库的基本操作

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

【Proteus仿真】【51单片机】贪吃蛇游戏

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用8*8LED点阵、按键模块等。 主要功能&#xff1a; 系统运行后&#xff0c;可操作4个按键控制小蛇方向。 二、软件设计 /* 作者&#xff1a;嗨小易…

web3 在React dapp中全局管理web3当前登录用户/智能合约等信息

上文 Web3 React项目Dapp获取智能合约对象我们在自己的前端dapp项目中链接获取到了 自己的智能合约 我们继续 我们还是先启动ganache环境 终端输入 ganache -d然后发布一下我们的智能合约 打开我们的合约项目 终端输入 truffle migrate --reset这样 我们的智能合约就部署到区…

PyTorch深度学习实战(24)——从零开始实现Mask R-CNN实例分割

PyTorch深度学习实战&#xff08;24&#xff09;——从零开始实现Mask R-CNN实例分割 0. 前言1. Mask R-CNN1.1 网络架构1.2 RoI Align1.3 Mask 检测头 2. 使用 Mask R-CNN 实现实例分割2.1 数据集分析2.2 模型构建策略2.3 模型构建与训练 3. 多类别实例分割小结系列链接 0. 前…

AI赋能,轻松出爆文!AI新闻创作新时代,你准备好了吗?

众所周知&#xff0c;传统新闻报道需要大量的人工参与&#xff0c;不仅耗时耗力&#xff0c;还对媒体工作者的文字功底和知识积累有很高的要求。但随着人工智能技术的发展&#xff0c;大模型在新闻写作领域展现出强大的潜力。通过AI写作技术&#xff0c;在很大程度上实现了新闻…

01-开发第一个Vue程序,了解Vue构造函数的配置项data,template,插值语法,el

Vue的快速入门 下载并安装vue.js Vue是一个基于JavaScript实现的框架, 要使用它就需要从Vue官网下载 vue.js文件 第一步&#xff1a;打开Vue2官网&#xff0c;点击下图所示的起步 第二步&#xff1a;继续点击下图所示的安装 第三步&#xff1a;在安装页面向下滚动&#xff0…

Netty通信框架

Netty框架的底层是NIO&#xff0c;NIO&#xff1a;non-blocking io 非阻塞IO 一个线程可以处理多个通道&#xff0c;减少线程创建数量&#xff1b; 读写非阻塞&#xff0c;节约资源&#xff1a;没有可读&#xff0f;可写数据时&#xff0c;不会发生阻塞导致线程资源的浪费 一…

pytorch打印模型结构和参数

两种方式 当我们使用pytorch进行模型训练或测试时&#xff0c;有时候希望能知道模型每一层分别是什么&#xff0c;具有怎样的参数。此时我们可以将模型打印出来&#xff0c;输出每一层的名字、类型、参数等。 常用的命令行打印模型结构的方法有两种&#xff1a; 一是直接prin…

cpolar+JuiceSSH实现手机端远程连接Linux服务器

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …

06、Caused by: java.nio.charset.MalformedInputException: Input length = 1

目录 问题&#xff1a;原因&#xff1a;解决方法&#xff1a; 问题&#xff1a; Caused by: java.nio.charset.MalformedInputException: Input length 1 原因&#xff1a; 应该是中文有哪些文字导致的。 yml 编码格式出错 解决方法&#xff1a; 直接这里把GBK改成 utf-8…

底层驱动day8作业

代码&#xff1a; //驱动程序 #include<linux/init.h> #include<linux/module.h> #include<linux/of.h> #include<linux/of_gpio.h> #include<linux/gpio.h> #include<linux/timer.h>struct device_node *dnode; //unsigned int gpiono; …

职场好物:乐歌M9S升降办公电脑台,告别久坐办公,升职加薪就选它

办公是现代生活不可避免的组成部分&#xff0c;科技的快速发展&#xff0c;给了我们更多新的生活方式&#xff0c;促使我们更加关注自己的身体状况&#xff0c;我们挨过了饭都吃不饱的年代&#xff0c;随着办公人群的不断扩张&#xff0c;不知道你有没有发现身边人或多或少都有…

CHAT——新手必看的文章

今天小编用CHAT写一篇文章&#xff1a;Ipad新手注意事项&#xff0c;一定要看。 标题&#xff1a;iPad新手必读&#xff1a;一篇你绝对不能错过的关于iPad使用的注意事项 当你买了一台全新的iPad&#xff0c;无论是为了工作还是娱乐&#xff0c;这款强大而引人入胜的设备都提供…

这三种方法轻松实现Excel文档名翻译

在电脑使用中&#xff0c;我们常常需要批量修改文件名并翻译。这时候&#xff0c;我们可以使用“固乔文件管家”软件来轻松实现这一需求。下面就介绍三种方法&#xff0c;帮助你轻松实现Excel文档名翻译。 方法一&#xff1a;使用“固乔文件管家”软件批量修改文件名 1.安装并打…

KaiwuDB 获山东省工信厅“信息化应用创新优秀解决方案”奖

10月23日&#xff0c;山东省工信厅正式公示《2023年山东省信息化应用创新典型应用案例及优秀解决方案名单》&#xff0c;面向全省、全国重点推荐山东省技术水平先进、应用示范效果突出、产业带动性强的信息化解决方案及应用实践&#xff0c;对于进一步激发山东省信息技术产业创…

SpringBoot -- 请求数据多态映射(jackson)

有些情况下&#xff0c;服务端提供了一个抽象类及其多个实现类&#xff0c;当前端传递 json 数据到后端时&#xff0c;我们希望映射得到的对象数据是根据某个特征区分开的具体的实现类对象。 文章目录 实现方式示例抽象类对象若干实现类测试接口及前端传递请求体接参结果 JsonT…