当前位置: 首页 > news >正文

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

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

相关文章:

uniapp-自定义表格,右边操作栏固定

uniapp-自定义表格&#xff0c;右边操作栏固定 在网上找了一些&#xff0c;没找到特别合适的&#xff0c;收集了一下其他人的思路&#xff0c;基本都是让左边可以滚动&#xff0c;右边定位&#xff0c;自己也尝试写了一下&#xff0c;有点样式上的小bug&#xff0c;还在尝试修…...

基于Electron27+React18+ArcoDesign客户端后台管理EXE

基于electron27.xreact18搭建电脑端exe后台管理系统模板 electron-react-admin 基于electron27整合vite.jsreact18搭建桌面端后台管理程序解决方案。 前几天有分享electron27react18创建跨平台应用实践&#xff0c;大家感兴趣可以去看看。 https://blog.csdn.net/yanxinyun1990…...

QT5交叉编译保姆级教程(arm64、mips64)

什么是交叉编译&#xff1f; 简单说&#xff0c;就是在当前系统平台上&#xff0c;开发编译运行于其它平台的程序。 比如本文硬件环境是x86平台&#xff0c;但是编译出来的程序是在arm64架构、mips64等架构上运行 本文使用的操作系统&#xff1a;统信UOS家庭版22.0 一、安装…...

python计算图片的RGB值,可以作为颜色的判断条件

python计算图片的RGB值&#xff0c;可以作为颜色的判断条件 import colorsys import PIL.Image as Imagedef get_dominant_color(image):max_score 0.0001dominant_color Nonefor count,(r,g,b) in image.getcolors(image.size[0]*image.size[1]):# 转为HSV标准saturation c…...

oracle 日期

日期加减 Oracle中日期进行加减可以使用多种方式&#xff0c;以下介绍三种 一种是针对天的操作&#xff0c;适用于对日&#xff0c;时&#xff0c;分&#xff0c;秒的操作&#xff0c; 一种是对月的操作&#xff0c;适用于月&#xff0c;年的操作&#xff0c; 一种是使用INTER…...

JVM堆内存解析

一、JVM堆内存介绍 Java大多数对象都是存放在堆中&#xff0c;堆内存是完全自动化管理&#xff0c;根据垃圾回收机制不同&#xff0c;Java堆有不同的结构&#xff0c;下面是我们一台生产环境服务器JVM堆内存空间分配情况&#xff0c;JVM只设置了-Xms2048M -Xmx2048M。 1、JVM堆…...

C#Onnx模型信息查看工具

效果 Netron效果 项目 代码 using Microsoft.ML.OnnxRuntime; using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms;namespace Onnx_Demo {public partial class frmMain : Form{public frmMain(){InitializeComponent();}string…...

RK3588 ubuntu系统安装opencv

废话不多说直接上步骤&#xff1a; 先切换至root用户 sudo su 输入密码先更新一下本地软件 apt update apt upgrade 安装相关环境 apt install build-essential cmake git pkg-config libgtk-3-dev \ libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libxvidcore-…...

常用的vue UI组件库

背景&#xff1a;Vue.js 是一个渐进式 javascript 框架&#xff0c;用于构建 UIS&#xff08;用户界面&#xff09;和 SPA&#xff08;单页应用程序&#xff09;。UI 组件库的出现提高了我们的开发效率&#xff0c;增强了应用的整体外观、感觉、交互性和可访问性&#xff0c;下…...

防范欺诈GPT

去年&#xff0c;ChatGPT的发布让全世界都感到惊讶和震惊。 突然间出现了一个平台&#xff0c;它比之前的任何其他技术都更深入地了解互联网。人工智能可以被训练成像阿姆一样说唱&#xff0c;以世界著名诗人的风格写作&#xff0c;并精确地翻译内容&#xff0c;以至于它似乎能…...

【Java】多线程案例(单例模式,阻塞队列,定时器,线程池)

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 实现安全版本的单例模式饿汉模式类和对象的概念类对象类的静态成员与实例成员 懒汉模式如何保证…...

STM32:使用蓝牙模块

一、蓝牙概要 蓝牙是一种常见的无线通信协议&#xff0c;通常用于短距离通信。蓝牙分为经典蓝牙和低功耗蓝牙(BLE)。经典蓝牙通常用于需要持续传输数据的设备&#xff0c;比如蓝牙耳机等。低功耗蓝牙通常用于只需要间歇性传输数据的设备&#xff0c;比如运动手环。 蓝牙…...

Blazor 虚拟滚动/瀑布流加载Table数据

page "/virtualScrolling" using BlazorApp.Data<h3>Table 虚拟滚动行</h3> <h4>Table 组件显示大数据时通常采用分页加载数据&#xff0c;还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据</h4><p>快速滚动时显示行占位&am…...

数字化浪潮下,AI数字人融入多元化应用场景

随着AI数字人技术的发展&#xff0c;各个行业都在不断挖掘数字人更多的潜力&#xff0c;VR全景中的AI数字人功能逐渐成为了一种新颖的用户交互方式。AI数字人将企业的文化、品牌价值、商业服务等充分结合为一体&#xff0c;为企业提供了全新的机会&#xff0c;从客户互动到营销…...

JVM虚拟机:JVM的垃圾回收清除算法(GC)有哪些

垃圾回收清除算法 引用计数法 标记清除 拷贝算法 标记压缩 引用计数法 有一个引用指向对象,那么引用计数就加1,少一个引用指向,那么引用计数就减1,这种方法了解一下就好,JVM机会不会使用这种方法,因为它在每次对象赋值的时候都要维护引用计数器,且计数器本身也有一定的…...

我应该删除低质量页面以提高Google排名吗?

为什么考虑删除低质量页面&#xff1f; 上个月&#xff0c;根据Google的搜索团队John Mueller和Gary Illyes在 “Search Off the Record”播客中的讨论&#xff0c;质量是影响搜索的几乎每一个方面的关键因素。 虽然高质量的内容不能保证高排名&#xff0c;但它可以影响Googl…...

【实战Flask API项目指南】之六 数据库集成 SQLAlchemy

实战Flask API项目指南之 数据库集成 本系列文章将带你深入探索实战Flask API项目指南&#xff0c;通过跟随小菜的学习之旅&#xff0c;你将逐步掌握 Flask 在实际项目中的应用。让我们一起踏上这个精彩的学习之旅吧&#xff01; 前言 在上一篇文章中&#xff0c;我们实现了…...

MFC网络通信-Udp服务端

目录 1、UI的布局 2、代码的实现&#xff1a; &#xff08;1&#xff09;、自定义的子类CServerSocket &#xff08;2&#xff09;、重写OnReceive事件 &#xff08;3&#xff09;、在CUdpServerDlg类中处理 &#xff08;4&#xff09;、在OnInitDialog函数中 &#xff0…...

最简单且有效的msvcp140.dll丢失的解决方法,有效的解决msvcp140.dll丢失

在我们使用电脑的过程中&#xff0c;有时会遇到一些令人困扰的问题&#xff0c;如msvcp140.dll文件丢失。对于许多不熟悉这方面技术的小伙伴来说&#xff0c;遇到msvcp140.dll丢失的问题可能会觉得棘手。其实这是一个很常见的问题&#xff0c;并且解决起来并不复杂。接下来将给…...

HBase理论与实践-基操与实践

基操 启动&#xff1a; ./bin/start-hbase.sh 连接 ./bin/hbase shell help命令 输入 help 然后 <RETURN> 可以看到一列shell命令。这里的帮助很详细&#xff0c;要注意的是表名&#xff0c;行和列需要加引号。 建表&#xff0c;查看表&#xff0c;插入数据&#…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

ubuntu22.04有线网络无法连接,图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...