DIY可视化UniApp表格组件

表格组件在移动端的用处非常广泛，特别是在那些需要展示结构化数据、进行比较分析或提供详细信息的场景中。
数据展示与整理：表格是展示结构化数据的理想方式，特别是在需要展示多列和多行数据时。通过表格，用户可以轻松浏览和理解数据，快速找到所需信息。
信息对比与分析：当需要对不同数据项进行比较时，表格的列式布局使得这种对比变得简单直观。用户可以通过观察同一列中的不同数据，快速发现差异和趋势。
详细信息查看：在某些应用中，表格不仅用于展示数据，还可以作为入口点，引导用户进一步查看或操作相关数据。例如，通过点击表格中的某一行，用户可能能够查看该行的详细信息或执行相关操作。
提高用户体验：通过优化表格组件的设计，如使用合适的字体大小、颜色对比和交互方式，可以提高用户在移动端浏览和操作表格的体验。
适应不同屏幕尺寸：现代移动应用通常需要考虑不同屏幕尺寸和分辨率的适配问题。表格组件通常具有响应式设计，能够根据不同设备的屏幕尺寸自动调整布局，确保在不同设备上都能提供良好的用户体验。

DIY可视化支持UniApp模拟表格组件可视化，在线动态API数据源，支持水平滚动锁定列、表格固定高度锁定表头、列颜色自定义等。

设计完成即生成源码

<template><view class="container container21094"><view class="flex diygw-col-24"><view class="flex diygw-col-24 flex-direction-column"><scroll-view class="" :scroll-left="leftUtable1" @scroll="scrollUtable1" enable-flex="true" scroll-x="true"><view class="flex utable1_table_tr"><view class="flex utable1_th_0"><text> 姓名 </text></view><view class="flex utable1_th_1"><text> 薪资 </text></view><view class="flex utable1_th_2"><text> 职位 </text></view><view class="flex utable1_th_3"><text> 编号 </text></view><view class="flex utable1_th_4"><text> 姓名 </text></view><view class="flex utable1_th_5"><text> 姓名 </text></view></view></scroll-view><scroll-view class="flex-sub" scroll-x="true" enable-flex="true" :scroll-left="leftUtable1" @scroll="scrollUtable1"><view class="flex utable1_table_tr" v-for="(item, index) in data.data"><view class="flex flex-direction-column utable1_td_0"><view class="diygw-col-24">{{ item.title }}</view></view><view class="flex flex-direction-column utable1_td_1"><view class="diygw-col-24">{{ item.remark }}</view></view><view class="flex flex-direction-column utable1_td_2"><image :src="item.img" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image></view><view class="flex flex-direction-column utable1_td_3">{{ item.id }}</view><view class="flex flex-direction-column utable1_td_4">{{ item.title }}</view><view class="flex flex-direction-column utable1_td_5">{{ item.title }}</view></view></scroll-view></view></view><view class="flex diygw-col-24"><view class="flex diygw-col-24 flex-direction-column"><scroll-view class="" :scroll-left="leftUtable" @scroll="scrollUtable" enable-flex="true" scroll-x="true"><view class="flex utable_table_tr"><view class="flex utable_th_0"><text> 姓名 </text></view><view class="flex utable_th_1"><text> 薪资 </text></view><view class="flex utable_th_2"><text> 职位 </text></view><view class="flex utable_th_3"><text> 职位 </text></view><view class="flex utable_th_4"><text> 薪资 </text></view><view class="flex utable_th_5"><text> 薪资 </text></view><view class="flex utable_th_6"><text> 薪资 </text></view><view class="flex utable_th_7"><text> 薪资 </text></view></view></scroll-view><scroll-view class="flex-sub" scroll-x="true" enable-flex="true" :scroll-left="leftUtable" @scroll="scrollUtable"><view class="flex utable_table_tr" v-for="(item, index) in data.data"><view class="flex flex-direction-column utable_td_0"><view class="diygw-col-24 text-clz"> 内容1:{{ item.title }} </view></view><view class="flex flex-direction-column utable_td_1">{{ item.remark }}</view><view class="flex flex-direction-column utable_td_2"><image :src="item.img" class="image-size diygw-image diygw-col-0" mode="widthFix"></image></view><view class="flex flex-direction-column utable_td_3">{{ item.job }}</view><view class="flex flex-direction-column utable_td_4">{{ item.salary }}</view><view class="flex flex-direction-column utable_td_5">{{ item.salary }}</view><view class="flex flex-direction-column utable_td_6">{{ item.salary }}</view><view class="flex flex-direction-column utable_td_7">{{ item.salary }}</view></view></scroll-view></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},data: {code: 0,msg: '',data: [{title: '',remark: '',id: 0,attr: {title: ''},img: ''}]},leftUtable1: 0,sortUtable1Type: 'desc',sortUtable1Field: '',sortUtable1: '',leftUtable: 0,sortUtableType: 'desc',sortUtableField: '',sortUtable: ''};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {await this.dataApi();},// 新增接口 API请求方法async dataApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = 'https://php.diygw.com/article.php';let http_data = {data: 1};let http_header = {'Content-Type': 'application/json'};let data = await this.$http.post(http_url, http_data, http_header, 'json');this.data = data;},scrollUtable1(evt) {this.leftUtable1 = evt.detail.scrollLeft;},sortClickUtable1(field) {if (this.sortUtable1Field == field) {this.sortUtable1Type = this.sortUtable1Type == 'desc' ? 'asc' : 'desc';} else {this.sortUtable1Type = 'asc';}this.sortUtable1Field = field;this.sortUtable1 = field + ' ' + this.sortUtable1Type;},scrollUtable(evt) {this.leftUtable = evt.detail.scrollLeft;},sortClickUtable(field) {if (this.sortUtableField == field) {this.sortUtableType = this.sortUtableType == 'desc' ? 'asc' : 'desc';} else {this.sortUtableType = 'asc';}this.sortUtableField = field;this.sortUtable = field + ' ' + this.sortUtableType;}}};
</script><style lang="scss" scoped>.utable1_th_0 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;position: sticky;z-index: 1;left: 0rpx;align-items: center;word-break: break-all;}.utable1_td_0 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;position: sticky;z-index: 1;left: 0rpx;align-items: center;word-break: break-all;}.utable1_th_1 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_td_1 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_th_2 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_td_2 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_th_3 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_td_3 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_th_4 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_td_4 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_th_5 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_td_5 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f10e0e;color: #ffffff;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable1_table_tr {width: 1200rpx;}.image1-size {height: 80rpx !important;width: 80rpx !important;}.utable_th_0 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #7b80ff;text-align: center;justify-content: center;flex-shrink: 0;position: sticky;z-index: 1;left: 0rpx;align-items: center;word-break: break-all;}.utable_td_0 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #7b80ff;text-align: center;justify-content: center;flex-shrink: 0;position: sticky;z-index: 1;left: 0rpx;align-items: center;word-break: break-all;}.utable_th_1 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;position: sticky;z-index: 2;left: 200rpx;align-items: center;word-break: break-all;}.utable_td_1 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;position: sticky;z-index: 2;left: 200rpx;align-items: center;word-break: break-all;}.utable_th_2 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_td_2 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_th_3 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_td_3 {padding: 6rpx;min-height: 60rpx;width: 200rpx;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_th_4 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_td_4 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_th_5 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_td_5 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_th_6 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_td_6 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_th_7 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_td_7 {padding: 6rpx;min-height: 60rpx;width: 200rpx;background: #f12424;color: #f3ebeb;text-align: center;justify-content: center;flex-shrink: 0;align-items: center;word-break: break-all;}.utable_table_tr {width: 1600rpx;}.text-clz {font-weight: bold;text-decoration: underline;font-style: italic;}.image-size {height: 60rpx !important;width: 60rpx !important;}.container21094 {padding-left: 0px;padding-right: 0px;}.container21094 {}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/801696.shtml

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

相关文章

java数据结构与算法刷题-----LeetCode238. 除自身以外数组的乘积

java数据结构与算法刷题-----LeetCode238. 除自身以外数组的乘积

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 动态规划&#xff1a;左右乘积列表2. 滚动数组对动态规划过程…
阅读更多...
老子云、AMRT3D、眸瑞科技

老子云、AMRT3D、眸瑞科技

老子云概述 老子云3D可视化快速开发平台&#xff0c;集云压缩、云烘焙、云存储云展示于一体&#xff0c;使3D模型资源自动输出至移动端PC端、Web端&#xff0c;能在多设备、全平台进行展示和交互&#xff0c;是全球领先、自主可控的自动化3D云引擎。 平台架构 平台特性 1、基…
阅读更多...
Open CASCADE学习|统计形状拓扑数量

Open CASCADE学习|统计形状拓扑数量

边界表示法&#xff08;Boundary Representation&#xff0c;简称B-Rep&#xff09;是几何造型中最成熟、无二义的表示法。它主要用于描述物体的几何信息和拓扑信息。在边界表示法中&#xff0c;一个实体&#xff08;Solid&#xff09;由一组封闭的面&#xff08;Face&#xff…
阅读更多...
easyExcel - 按模板导出

easyExcel - 按模板导出

目录 前言一、情景介绍二、文档介绍2.1 读取模板2.2 填充模板 三、代码示例3.1 案例一&#xff1a;工资表3.2 案例二&#xff1a;报价单 四、我所遇到的问题 前言 Java-easyExcel入门教程&#xff1a;https://blog.csdn.net/xhmico/article/details/134714025 之前有介绍过如…
阅读更多...
VSCode配置AI自动补全插件Tabnine

VSCode配置AI自动补全插件Tabnine

面向软件开发人员的 AI 助手 使用 AI 代码完成更快地编写代码 什么是Tabnine Tabnine 是一款 AI 代码助手&#xff0c;可让您成为更好的开发人员。Tabnine 将通过所有最流行的编码语言和 IDE 的实时代码完成、聊天和代码生成来提高您的开发速度。 无论您将其称为 IntelliSens…
阅读更多...
Java基础知识总结（45）

Java基础知识总结（45）

&#xff08;3&#xff09;类和对象 类是面向对象的重要内容&#xff0c;可以把类当做一种自定义类型&#xff0c;可以使用类来定义变量&#xff0c;这种类型的变量统称为引用类型变量。 &#xff08;4&#xff09;定义类 类是对一批对象的抽象&#xff0c;可以…
阅读更多...
一文读懂CSS中的阴影：box-shadow，text-shadow，drop-shadow的区别与使用方式

一文读懂CSS中的阴影：box-shadow，text-shadow，drop-shadow的区别与使用方式

一、区别 box-shadow 应用于元素&#xff0c;为元素本身添加阴影效果。 text-shadow 应用于文本&#xff0c;为文本内容添加阴影效果。 drop-shadow 是filter属性的一部分&#xff0c;通常用于图像&#xff0c;为其添加阴影效果。 二、box-shadow box-shadow属性用于为元素&…
阅读更多...
无线局域网安全协议-WEP,WPA,WAPI,

无线局域网安全协议-WEP,WPA,WAPI,

目录 一、WEP&#xff08;有线等效保密&#xff09; 二、WPA&#xff08;Wi-Fi网络安全接入&#xff09; ​编辑 三、WAPI&#xff08;无线局域网鉴别和保密基础结构&#xff09; WLAN&#xff08;Wireless Local Area Network&#xff09;指应用无线通信技术将计算机设备互…
阅读更多...
C语言程序的编译与链接

C语言程序的编译与链接

目录 1.翻译环境和运行环境2.翻译环境2.1 预处理&#xff08;预编译&#xff09;2.2 编译2.3 汇编2.4 链接 3.运行环境 1.翻译环境和运行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 翻译环境&#xff1a;在这个环境中源代码被转换为可执⾏的机器指令&am…
阅读更多...
计算机网络(一)--网络发展和协议

计算机网络(一)--网络发展和协议

网络发展和协议 计算机网络背景从独立模式到网络互联模式计算机网络发展七个阶段1. 批处理2. 分时系统3. 计算机之间的通信4. 计算机网络的产生5. 互联网的普及6. 以互联网技术为中心的时代7. 单纯建立连接 到 安全建立连接 协议例子:人与人之间的对话计算机中的协议 协议分层O…
阅读更多...
Linux CentOS基础操作

Linux CentOS基础操作

Linux CentOS基础操作 1. 查看Linux服务器当前主机名等 hostname 2. 查看当前系统日期和时间 date -d -y 3. 显示网络接口信息&#xff0c;获取当前网卡状态&#xff0c;启动、停止网卡&#xff0c;网卡等闪烁显示30秒&#xff0c;配置网卡(网卡名称&#xff1a;eth1)的IP地址…
阅读更多...
Redis主从同步机制

Redis主从同步机制

Redis主从同步机制是一种分布式数据库架构设计&#xff0c;用于确保主数据库&#xff08;Master&#xff09;和从数据库&#xff08;Slave&#xff09;之间的数据一致性&#xff0c;从而实现数据冗余、负载均衡、故障转移等功能。以下是Redis主从同步机制的关键要点&#xff1a…
阅读更多...
每日OJ题_两个数组dp⑤_力扣10. 正则表达式匹配

每日OJ题_两个数组dp⑤_力扣10. 正则表达式匹配

目录 力扣10. 正则表达式匹配 解析代码 力扣10. 正则表达式匹配 10. 正则表达式匹配 难度 困难 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符* 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c…
阅读更多...
springboot 整合 mybatis（配置版）

springboot 整合 mybatis（配置版）

代码及配置整合 创建实体类，与数据库对应 创建 mapper、service 和 controller @AutowiredUserService userService;@ResponseBody@GetMapping("/user")public com.vazquez.bootstudy.model.User getById(@RequestParam("id") Long id) {return userServ…
阅读更多...
XC7A35T-2FGG484 嵌入式FPGA现场可编程门阵列 Xilinx

XC7A35T-2FGG484 嵌入式FPGA现场可编程门阵列 Xilinx

XC7A35T-2FGG484 是一款由Xilinx&#xff08;赛灵思&#xff09;制造的FPGA&#xff08;现场可编程门阵列&#xff09;芯片 以下是XC7A35T-2FGG484 的主要参数&#xff1a; 1. 系列&#xff1a;Artix-7 2. 逻辑单元数量&#xff1a;33280个 3. 工艺技术&#xff1a;28nm 4. …
阅读更多...
设计模式之中介者模式讲解

设计模式之中介者模式讲解

概念&#xff1a;也称为调停者模式。用一个中介者对象封装一系列对象的交互&#xff0c;中介者使各对象不需要显示地相互作用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之间的交互。 抽象中介者&#xff1a;定义中介者的操作。具体中介者&#xff1a;实现…
阅读更多...
【HTML】简单制作一个动态变色光束花

【HTML】简单制作一个动态变色光束花

目录 前言 开始 HTML部分 效果图 ​编辑​编辑​编辑​编辑总结 前言 无需多言&#xff0c;本文将详细介绍一段代码&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建一个文本文档&#xff0c;其中HTML的文件名改为[index.html]&a…
阅读更多...
目标检测YOLO实战应用案例100讲-基于卷积神经网络的多尺度特征融合目标检测

目标检测YOLO实战应用案例100讲-基于卷积神经网络的多尺度特征融合目标检测

目录 前言 存在的挑战 2 相关技术基础 2.1 卷积神经网络 2.2 损失函数
阅读更多...
【CTF】rip--堆栈的简单认识

【CTF】rip--堆栈的简单认识

前言 最近在学二进制&#xff0c;准备拿BUUCTF的pwn试试手&#xff0c;还在摸索的阶段&#xff0c;有什么思路出错的地方还请指出。 解题思路 下载文件到kali&#xff0c;查看文件为 64-bit的ELF&#xff08;ELF为Linux下的可执行文件&#xff0c;相当于Windows的exe&#xff0…
阅读更多...
python-flask后端知识点

python-flask后端知识点

anki 简单介绍&#xff1a; 在当今信息爆炸的时代&#xff0c;学习已经不再仅仅是获取知识&#xff0c;更是一项关于有效性和持续性的挑战。幸运的是&#xff0c;我们有幸生活在一个科技日新月异的时代&#xff0c;而ANKI&#xff08;Anki&#xff09;正是一款旗舰级的学习工具…
阅读更多...
最新文章

Copyright @ 2022~2023