DIY可视化UniApp表格组件

news2024/11/29 0:49:54

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

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.coloradmin.cn/o/1576712.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024新版PHP在线客服系统多商户AI智能在线客服系统源码机器人自动回复即时通讯聊天系统源码PC+H5

搭建环境&#xff1a; 服务器 CPU 2核心 ↑ 运存 2G ↑ 宽带 5M ↑ 服务器操作系统 Linux Centos7.6-7.9 ↑ 运行环境&#xff1a; 宝塔面板 Nginx1.18- 1.22 PHP 7.1-7.3 MYSQL 5.6 -5.7 朵米客服系统是一款全功能的客户服务解决方案&#xff0c;提供多渠道支持…

深度学习理论基础(七)Transformer编码器和解码器

学习目录&#xff1a; 深度学习理论基础&#xff08;一&#xff09;Python及Torch基础篇 深度学习理论基础&#xff08;二&#xff09;深度神经网络DNN 深度学习理论基础&#xff08;三&#xff09;封装数据集及手写数字识别 深度学习理论基础&#xff08;四&#xff09;Parse…

能不能换DB吗?--抽象工厂模式

1.1 就不能不换DB吗&#xff1f; 都是换数据库惹的祸。 "我们团队前段时间用.net的C#来开发好一个项目&#xff0c;是给一家企业做的电子商务网站&#xff0c;是用SQL Server作为数据库的&#xff0c;应该说上线后除了开始有些小问题&#xff0c;基本都还可以。而后&#…

婴儿洗衣机买几公斤的合适?四大黑马婴儿洗衣机强势来袭

选择适合婴儿使用的洗衣机&#xff0c;是每个家长都关心的问题。在选择的时候&#xff0c;我们需要考虑一些因素&#xff0c;比如安全性、易操作性和洗涤效果等。同时&#xff0c;也要根据婴儿的年龄和需求来选择合适的洗衣机。婴儿洗衣机的出现&#xff0c;为宝妈们带来了极大…

2023年下半年中级软件设计师上午真题及答案解析

01 02 03 04 05 06 07 08 09 10 篇幅有限&#xff0c;私我获取免费完整 pdf文件

如何魔改 diffusers 中的 pipelines

如何魔改 diffusers 中的 pipelines 整个 Stable Diffusion 及其 pipeline 长得就很适合 hack 的样子。不管是通过简单地调整采样过程中的一些参数&#xff0c;还是直接魔改 pipeline 内部甚至 UNet 内部的 Attention&#xff0c;都可以实现很多有趣的功能或采样生图结果。 本…

JVM 全景图

今天我重新复习了一下 jvm 的一些知识点。我以前觉得 jvm 的知识点很多很碎&#xff0c;而且记起来很困难&#xff0c;但是今天我重新复习了一下&#xff0c;对这些知识点进行了简单的梳理之后&#xff0c;产生了不一样的看法。虽然 jvm 的知识点很碎&#xff0c;但是如果你真的…

创建型模式--1.单例模式【巴基速递】

1. 巴基的订单 在海贼世界中&#xff0c;巴基速递是巴基依靠手下强大的越狱犯兵力&#xff0c;组建的集团海贼派遣公司&#xff0c;它的主要业务是向世界有需要的地方输送雇佣兵&#xff08;其实是不干好事儿&#xff09;。 自从从特拉法尔加罗和路飞同盟击败了堂吉诃德家族 &…

系统监测工具-tcpdump的使用

一个简单的tcpdump抓包过程。主要抓包观察三次握手&#xff0c;四次挥手的数据包 有两个程序&#xff1a;客户端和服务器两个程序 服务器端的ip地址使用的是回环地址127.0.0.1 端口号使用的是6000 tcpdump -i 指定用哪个网卡等&#xff0c;dstip地址端口指定抓取目的地址…

ctfshow web入门 文件包含 web151--web161

web151 打算用bp改文件形式(可能没操作好)我重新试了一下抓不到 文件上传不成功 改网页前端 鼠标右键&#xff08;检查&#xff09;&#xff0c;把png改为php访问&#xff0c;执行命令 我上传的马是<?php eval($_POST[a]);?> 查看 web152 上传马 把Content-Type改为…

基于大模型的态势认知智能体

源自&#xff1a;指挥控制与仿真 作者&#xff1a;孙怡峰, 廖树范, 吴疆 李福林 “人工智能技术与咨询” 发布 摘要 针对战场态势信息众多、变化趋势认知困难的问题,提出基于大模型的态势认知智能体框架和智能态势认知推演方法。从认知概念出发,结合智能体的抽象性、具…

基于单片机收音机调幅系统设计仿真源码

**单片机设计介绍&#xff0c;基于单片机收音机调幅系统设计仿真源码 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机收音机调幅系统设计的仿真源码&#xff0c;主要实现了通过单片机控制调幅收音机的核心功能。以下是…

如何关闭WordPress的自动更新功能

Wordpress为什么自动更新 WordPress自动更新是为了提供更好的安全性和稳定性。 安全性&#xff1a;WordPress是一个广泛使用的内容管理系统&#xff0c;因此成为恶意攻击的目标。WordPress的自动更新功能确保你的网站及时获得最新的安全补丁和修复程序&#xff0c;以保护你的网…

ctfshow web入门 命令运行 web39---web52

ctfshow web入门 命令执行 昨天看了一下我的博客真的很恼火&#xff0c;不好看&#xff0c;还是用md来写吧 web39 查看源代码 看到include了&#xff0c;还是包含(其实不是) 源代码意思是当c不含flag的时候把c当php文件运行 php伪协议绕过php文件执行 data://text/plain 绕…

算法汇总啊

一些常用算法汇总 算法思想-----数据结构动态规划(DP)0.题目特点1.【重点】经典例题(简单一维dp&#xff09;1.斐波那契数列2.矩形覆盖3.跳台阶4.变态跳台阶 2.我的日常练习汇总(DP)1.蓝桥真题-----路径 算法思想-----数据结构 数据结构的存储方式 : 顺序存储(数组) , 链式存储…

ubuntu安装nginx以及开启文件服务器

1. 下载源码 下载页面&#xff1a;https://nginx.org/en/download.html 下载地址&#xff1a;https://nginx.org/download/nginx-1.24.0.tar.gz curl -O https://nginx.org/download/nginx-1.24.0.tar.gz2. 依赖配置 sudo apt install gcc make libpcre3-dev zlib1g-dev ope…

轨迹规划 | 图解最优控制LQR算法(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 最优控制理论2 线性二次型问题3 LQR的价值迭代推导4 基于差速模型的LQR控制5 仿真实现5.1 ROS C实现5.2 Python实现5.3 Matlab实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全…

护眼台灯什么品牌好?揭秘护眼台灯十大排名

台灯作为我们日常生活中使用率较高的照明工具&#xff0c;光源的品质也是很重要的&#xff01;如果长时间使用一款质量不好的台灯&#xff0c;可能会影响我们的眼睛健康&#xff0c;特别是孩子的眼睛&#xff0c;还没有发育完全&#xff0c;影响更大。 要知道市面上很多劣质台…

IT廉连看——SpringBoot——SpringBoot快速入门

IT廉连看——SpringBoot——SpringBoot快速入门 1、idea创建工程 &#xff08;1&#xff09;普通Maven工程创建 工程名spring-boot-test 2、添加依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/PO…

理解 Golang 变量在内存分配中的规则

为什么有些变量在堆中分配、有些却在栈中分配&#xff1f; 我们先看来栈和堆的特点&#xff1a; 简单总结就是&#xff1a; 栈&#xff1a;函数局部变量&#xff0c;小数据 堆&#xff1a;大的局部变量&#xff0c;函数内部产生逃逸的变量&#xff0c;动态分配的数据&#x…