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

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

相关文章

vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法

vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法

一般在开发时&#xff0c;设置了 date/time/datetime 等类型的 input 属性 placeholder 提示文本时&#xff0c; 发现实际展示中却并不生效&#xff0c;如图&#xff1a; 处理后效果如图&#xff1a; 处理逻辑 判断表单项未设置值时&#xff0c;则设置其伪类样式&#xff0c;文…
阅读更多...
2024-04-08 NO.6 Quest3 自定义交互事件

2024-04-08 NO.6 Quest3 自定义交互事件

文章目录 1 交互事件——更改 Cube 颜色2 交互事件——创建 Cube2.1 非代码方式2.2 代码方式 ​ 在开始操作前&#xff0c;我们导入上次操作的场景&#xff0c;相关介绍在 《2024-04-08 NO.5 Quest3 手势追踪进行 UI 交互-CSDN博客》 文章中。 1 交互事件——更改 Cube 颜色 …
阅读更多...
知识管理系统|基于Springboot和vue的知识管理系统设计与实现(源码+数据库+文档)

知识管理系统|基于Springboot和vue的知识管理系统设计与实现(源码+数据库+文档)

知识管理 目录 基于Springboot和vue的知识管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台&#xff1a; 5.2.2 文章信息 5.3.1 论坛交流 2、后台 用户管理 5.1.2 文章分类 5.2.1 资料分类 四、数据库设计 五、核心代码 六、论文参考 七、最…
阅读更多...
OpenHarmony实战：Combo解决方案之W800芯片移植案例

OpenHarmony实战：Combo解决方案之W800芯片移植案例

本方案基于OpenHarmony LiteOS-M内核&#xff0c;使用联盛德W800芯片的润和软件海王星系列Neptune100开发板&#xff0c;进行开发移植。 移植架构采用Board与SoC分离方案&#xff0c;支持通过Kconfig图形化配置编译选项&#xff0c;增加玄铁ck804ef架构移植&#xff0c;实现了…
阅读更多...
老子云、AMRT3D、眸瑞科技

老子云、AMRT3D、眸瑞科技

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

Java | Leetcode Java题解之第18题四数之和

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> fourSum(int[] nums, int target) {List<List<Integer>> quadruplets new ArrayList<List<Integer>>();if (nums null || nums.length < 4) {return…
阅读更多...
spring cloud gateway openfeign 联合使用产生死锁问题

spring cloud gateway openfeign 联合使用产生死锁问题

spring cloud gateway openfeign 联合使用产生死锁问题&#xff0c;应用启动的时候阻塞卡住。 spring.cloud 版本如下 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><vers…
阅读更多...
【Leetcode每日一题】 递归 - 二叉树剪枝（难度⭐⭐）（50）

【Leetcode每日一题】 递归 - 二叉树剪枝（难度⭐⭐）（50）

1. 题目解析 题目链接&#xff1a;814. 二叉树剪枝 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 想象一下&#xff0c;你有一堆层层叠叠的积木&#xff0c;你想从底部开始&#xff0c;把那些标记为0的积木拿走。如…
阅读更多...
在线免费图像处理

在线免费图像处理

功能 尺寸修改(自定义和内置常用的照片尺寸)图像压缩(比较好的情况最高可以压缩 10 倍, 如果是无损压缩可以压缩 5 倍左右,参数范围 50~70 左右)图像方向修改图像格式修改修改后的效果支持实时反馈, 并且支持点击图像预览,同时保留历史修改图片(在预览中可以查看)支持修改撤回…
阅读更多...
怎么防止文件被拷贝，复制别人拷贝电脑文件

怎么防止文件被拷贝，复制别人拷贝电脑文件

怎么防止文件被拷贝&#xff0c;复制别人拷贝电,脑文件 防止文件被拷贝通常是为了保护敏感数据、知识产权或商业秘密不被未经授权的人员获取或传播。以下列出了一系列技术手段和策略&#xff0c;可以帮助您有效地防止文件被拷贝。 1. 终端管理软件&#xff1a; 如安企神、域智…
阅读更多...
鸿蒙ArkUI声明式学习：【UI资源管理】

鸿蒙ArkUI声明式学习：【UI资源管理】

OpenHarmony 应用的资源分类和资源的访问以及应用开发使用的像素单位以及各单位之间相互转换的方法。 资源分类 移动端应用开发常用到的资源比如图片&#xff0c;音视频&#xff0c;字符串等都有固定的存放目录&#xff0c;OpenHarmony 把这些应用的资源文件统一放在 resourc…
阅读更多...
什么是人工智能？人工智能、机器学习、深度学习三者之间有什么关系吗？

什么是人工智能？人工智能、机器学习、深度学习三者之间有什么关系吗？

深度学习是机器学习的一个分支。深度学习是机器学习的一部分&#xff0c;与机器学习的其他分支学科&#xff0c;以及统计学、人工智能等学科都有着紧密的联系。深度学习、机器学习、人工智能、统计学之间的关系如图1-4所示。 图1-4　深度学习、机器学习、人工智能、统计学之间的…
阅读更多...
如何利用Flutter将应用成功上架至iOS平台：详细指南

如何利用Flutter将应用成功上架至iOS平台：详细指南

引言 &#x1f680; Flutter作为一种跨平台的移动应用程序开发框架&#xff0c;为开发者提供了便利&#xff0c;使他们能够通过单一的代码库构建出高性能、高保真度的应用程序&#xff0c;同时支持Android和iOS两个平台。然而&#xff0c;完成Flutter应用程序的开发只是第一步…
阅读更多...
【鸿蒙开发】系统组件Column

【鸿蒙开发】系统组件Column

Column组件 Column沿垂直方向布局的容器。 接口&#xff1a; Column(value?: {space?: string | number}) 参数&#xff1a; 参数名 参数类型 必填 参数描述 space string | number 否 纵向布局元素垂直方向间距。 从API version 9开始&#xff0c;space为负数或者…
阅读更多...
【网络】什么是RPC

【网络】什么是RPC

RPC 是Remote Procedure Call的缩写&#xff0c;译为远程过程调用。是一个计算机通信协议。 1、为什么需要远程调用 在如何给女朋友解释什么是分布式这一篇文章中介绍过&#xff0c;为了提升饭店的服务能力&#xff0c;饭店从一开始只有一个负责所有事情的厨师发展成有厨师、切…
阅读更多...
FPN网络

FPN网络

FPN&#xff08;Feature Pyramid Network&#xff09;是一种用于目标检测和语义分割等计算机视觉任务的网络结构。它旨在解决不同尺度下的特征信息不足的问题&#xff0c;提高模型对小目标和远距离目标的检测能力。在目标检测任务中&#xff0c;由于目标的尺度和形状各异&#…
阅读更多...
Qt QML的插件(Qt Quick 2 Extension Plugin)方法

Qt QML的插件(Qt Quick 2 Extension Plugin)方法

Qt Quick的插件方法 序言环境前置注意概念——Qt Quick插件的相关知识插件里的qml文件模块名的相关知识模块名本身注意事项模块名版本注意事项 以示例来说明创建插件qmltypes的生成qmltypes的可能性失效 插件的编码注意1、插件模块版本控制2、pro里的注意 调用插件插件信息输入…
阅读更多...
DevOps已死？2024年的DevOps将如何发展

DevOps已死？2024年的DevOps将如何发展

随着我们进入2024年&#xff0c;DevOps也发生了变化。新兴的技术、变化的需求和发展的方法正在重新定义有效实施DevOps实践。 IDC预测显示&#xff0c;未来五年&#xff0c;支持DevOps实践的产品市场继续保持健康且快速增长&#xff0c;2022年-2027年的复合年增长率&#xff0…
阅读更多...
tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图

tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图

文章目录 前言一、实现步骤1. 获取所需特征点的索引2. 使用opencv.js 计算俯仰角、水平角和翻滚角cv.solvePnP介绍cv.solvePnP原理运行代码查看效果 3.绘制姿态示意直线添加canvas元素计算姿态直线坐标并绘制 总结 前言 在计算机视觉领域&#xff0c;估算脸部姿态是一项具有挑…
阅读更多...
element-ui drawer 组件源码分享

element-ui drawer 组件源码分享

今日简单分享 drawer 组件的源码实现&#xff0c;从以下五个方面来分享&#xff1a; 1、drawer 组件页面结构 2、drawer 组件属性 3、drawer 组件 slot 4、drawer 组件方法 5、drawer 组件事件 一、drawer 组件页面结构 二、drawer 组件属性 2.1 append-to-body 属性&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023