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…
阅读更多...
一文读懂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…
阅读更多...
每日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…
阅读更多...
【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;正是一款旗舰级的学习工具…
阅读更多...
GD32F470_GY-68 BMP180 新款 BOSCH温度 代替BMP085 气压传感器模块

GD32F470_GY-68 BMP180 新款 BOSCH温度 代替BMP085 气压传感器模块

2.23 BMP180气压传感器 1BMP180是一款高精度、小体积、低能耗的压力传感器&#xff0c;可以轻松应用在移动设备中.在测量海拔高度时&#xff0c;传统的做法是通过测量某一高度的大气压力&#xff0c;再经过换算才能得到高度数据。BMP180不仅可以实时的测量大气压力&#xff0c…
阅读更多...
基于velero和minio实现k8s数据的备份

基于velero和minio实现k8s数据的备份

1.30部署minio rootk8s-harbor:/etc/kubeasz/clusters/k8s-cluster1# docker run \ -d --restartalways -p 9000:9000 -p 9090:9090 –name minio -v /data/minio/data:/data -e “MINIO_ROOT_USERadmin” -e “MINIO_ROOT_PASSWORD12345678” quay.io/minio/minio server…
阅读更多...
智慧安防系统EasyCVR视频汇聚平台接入大华设备无法语音对讲的原因排查与解决

智慧安防系统EasyCVR视频汇聚平台接入大华设备无法语音对讲的原因排查与解决

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流&#xff0c;视频画面1、4、9、16个可选&#xff0c;支持自定义视频轮播。EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标…
阅读更多...
不同的子序列-java

不同的子序列-java

题目描述(力扣题库115): 给你两个字符串 s 和 t &#xff0c;统计并返回在 s 的 子序列 中 t 出现的个数&#xff0c;结果需要对 109 7 取模。 示例 1&#xff1a; 输入&#xff1a;s "rabbbit", t "rabbit"输出&#xff1a;3 解释&#xff1a; 如下所示…
阅读更多...
小型企业网络安全指南

小型企业网络安全指南

许多小型企业刚刚起步&#xff0c;没有大公司所拥有的相同资源来保护其数据。他们不仅可能没有资金来支持多样化的安全计划&#xff0c;而且也可能没有人力或时间。 网络犯罪分子知道小型企业缺乏这些资源&#xff0c;并利用这些资源来谋取利益。遭受网络攻击后&#xff0c;小…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023