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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot-02-依赖管理和自动配置

二、Spring Boot的两大重要机制 1. 依赖管理机制 开发什么场景&#xff0c;导入什么场景启动器&#xff0c;场景启动器自动把这个场景的所有核心依赖全部导入进来。maven依赖传递原则&#xff1a;A依赖B&#xff0c;B依赖C&#xff0c;则A就拥有B和C。每个boot项目都有一个父…

防火墙配置IPSec VPN【IPSecVPN概念及详细讲解】

防火墙配置IPSecVPN-点到点 配置目标 总公司内网与分公司内网互通 拓扑 配置ISP路由器 <Huawei>u t m <Huawei>sys [Huawei]sys ISP [ISP]interface g0/0/0 [ISP-GigabitEthernet0/0/0]ip address 100.1.1.102 24 [ISP-GigabitEthernet0/0/0]q [ISP]interface g…

【cocos creator】【编辑器插件】cocos creator文件复制时,解决cocos creator uuid冲突

&#xff01;&#xff01;&#xff01;修改前先备份 1、将文件夹放在packages文件夹下 2、打开项目&#xff0c;选择要刷新uuid的文件夹 3、菜单栏点击 扩展->refresh-uuid 4、等控制台提示&#xff1a;资源uuid刷新完成&#xff0c;重启项目&#xff08;&#xff01;&#…

VSCODE自动更新无法连接远程服务器报错“waiting for server log...“的解决方法

问题描述 一觉醒来打开vscode发现连接远程服务器显示无法连接&#xff0c;终端一直报错“waiting for server log…"&#xff0c;经查是因为vscode自动更新到了1.86&#xff0c;对于远程服务器的linux版本要求较高。这里记录下解决方法。 解决方法 1. 下载vscode便携版…

网络安全之命令注入

漏洞原理&#xff1a; 应用系统设计需要给用户提供指定的远程命令操作的接口&#xff0c;比如&#xff1a;路由器&#xff0c;防火墙&#xff0c;入侵检测等设备的web管理界面。一般会给用户提供一个ping操作的web界面 用户从web界面输入目标IP&#xff0c;提交后台会对改IP地…

Web 前端性能优化之五:构建优化

4、构建优化 资源的合并与压缩所涉及的优化点包括两方面&#xff1a;一方面是减少HTTP的请求数量&#xff0c;另一方面是减少HTTP请求资源的大小。 1、HTML 压缩 1、什么是 HTML 压缩 百度首页部分 HTML 源代码 谷歌首页部分 HTML 源代码 虽然这些格式化的字符能带来很好的代…

LiDAR点云转3D Tiles

到 2026年&#xff0c;一个国家项目旨在绘制整个法国领土的三维地图。 美国国家地理和林业信息研究所 (IGN) 是这个名为“Lidar HD”的“项目”的幕后黑手&#xff0c;其目标是获得该地区非常精确的 3D 描述。 NSDT工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生…

内外网数据交换发展进程:安全与便捷并行

随着信息化的不断推进&#xff0c;医院、党政以及企业的内外网数据交换正成为日益关注的焦点。在保障数据安全的前提下&#xff0c;需要寻求一种既安全可靠又操作便捷的数据传输方式。本文将探讨内外网数据交换发展进程&#xff0c;分析各种传输方式的优缺点&#xff0c;以及它…

爬虫入狱笔记——xx政府网站公开政策数据

最近在学习爬虫&#xff0c;做个笔记吧 今天爬xx政府网站-政策法规栏目的数据 咱们首先需要找到数据从哪里来&#xff0c;鼠标右键->检查&#xff08;或者快捷键一般为F12&#xff09;检查元素&#xff0c;搜索关键词 eg.【违法案例】 回车&#xff0c; 如果没有的话&am…

【随笔】Git 高级篇 -- 整理提交记录(下)rebase(十六)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

【Vue】我的第一个组件

文章目录 项目简介 项目简介 项目根目录中的index.html是项目的入口文件 加载index.html&#xff0c;vite解析。指向的src下的ts文件或者js文件 最后通过vue3的createApp函数创建一个应用&#xff0c;并挂载到指定div下 App.vue结构说明 特别注意:script脚本内&#xff0…

51单片机入门_江协科技_17~18_OB记录的笔记

17. 定时器 17.1. 定时器介绍&#xff1a;51单片机的定时器属于单片机的内部资源&#xff0c;其电路的连接和运转均在单片机内部完成&#xff0c;无需占用CPU外围IO接口&#xff1b; 定时器作用&#xff1a; &#xff08;1&#xff09;用于计时系统&#xff0c;可实现软件计时&…

Golang 开发实战day08 - Multiple Return values

Golang 教程08 - Multiple Return values 1. Multiple return values 1.1 如何理解多个返回值&#xff1f; Go语言中的多返回值&#xff0c;就像你听了一首歌曲yellow&#xff0c;可以从歌曲里反馈出忧郁和害羞&#xff01;Goland的多个返回值就类似于如此&#xff0c;设定一…

C++版本GDAL3.5无法找到proj.db文件

问题&#xff1a;C版本的GDAL无法找到proj.db文件 自己编译过的gdal3.5版本在自己电脑上使用坐标转换没有问题&#xff0c;而将库文件和头文件迁移到别的笔记本上转换坐标出实现问题&#xff1a; ERROR 1: PROJ: proj_create_from_database: Cannot find proj.db ERROR 1: PRO…

C语言第四十一弹---猜数字游戏

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 猜数字游戏 1、随机数生成 1.1、rand 1.2、srand 1.3、time 1.4、设置随机数的范围 2、猜数字游戏的分析和设计 2.1、猜数字游戏功能说明 2.2、猜数字游戏…

新人硬件工程师往哪个方向更有前途?

如果是比较沉默寡言&#xff0c;不擅长交际的&#xff0c;那么可以走技术路线。我这里有一套自动化入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习自动化&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我…

让chatGPT控制物理设备

作为自动控制行业的工程师&#xff0c;我们也许最关心的是如何使chatGPT 控制物理设备。我发现许多人仍然停留在传统程序设计的思维阶段&#xff0c;比如让大模型编写一段PLC 代码&#xff0c;或者是生成一些信息模型。 其实大模型具备判断与思考的能力&#xff0c;AI …

数字乡村:科技引领新时代农村发展

随着信息技术的迅猛发展和数字化浪潮的推进&#xff0c;数字乡村作为新时代农村发展的重要战略&#xff0c;正日益成为引领农村现代化的强大引擎。数字乡村不仅代表着农村信息化建设的新高度&#xff0c;更是农村经济社会发展的重要支撑。通过数字技术的深入应用&#xff0c;农…

【C#】读取指定XML节点

&#x1f4f0;XML文件 <?xml version"1.0" encoding"utf-8"?> <configuration><userSettings><Internal.Settings type"Desktop"><setting name"StatsDisplayCount" serializeAs"String">…

【每周精选资讯 | 第 4 期】2024-04-01 ~ 2024-04-08

文章目录 前言阿里巴巴&#xff1a;推出Qwen1.5-32B 模型文心一言&#xff1a;定制自己的 AI 声音动画线条图自动填色SWE-agent&#xff1a;AI程序员OpenAI&#xff1a;收集高质量训练数据Stability AI 发布 Stable Audio 2.0OpenAI&#xff1a;开放GPT3.5&#xff0c;无需注册…