DIY可视化UniApp表格组件

已于 2024-04-08 12:07:07 修改
阅读量559 收藏 4
点赞数 1
文章标签： java 前端 数据库
于 2024-04-08 12:05:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luck332/article/details/137503008
版权

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

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>

diygwcom
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 表格的介绍和使用
11-17
uniapp 表格
uni-app封装表格组件
weixin_44326167的博客
12-25 1586
【代码】uni-app封装表格组件。
基于Vue uni-app的自定义列表表格信息展示组件
最新发布
chenchuang0128的博客
05-28 1250
随着软件技术的不断发展，前端开发面临着越来越多的挑战。特别是在业务场景复杂多变的情况下，如何提高开发效率和降低维护成本成为了关键。本文旨在探讨组件化开发在前端应用中的重要性，并以Vue uni-app自定义列表表格为例，介绍如何实施组件化开发，从而优化开发过程，提升产品质量。一、引言随着前端应用规模的不断扩大，开发复杂度也在逐渐提高。传统的整体式开发方式往往导致代码耦合度高，任何小的改动都可能引起整体逻辑的变动，这无疑增加了开发和维护的难度。因此，组件化开发成为了一种有效的解决方案。
【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】
热门推荐
seeeeeeeeeee的博客
03-02 1万+
由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。H5，小程序兼容表格。移动端表格功能。多端兼容表格功能
uniapp 表格（vue3版本）
qq_52373373的博客
07-24 1109
这是一个vue3版本的表格，支持表格列固定（左、右），插槽，排序等。后续也会继续完善。
uniapp 自制表格的基本知识
码农研究僧的博客
03-15 4058
推荐阅读： uni-table 组件资料 java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）
uniapp表格
weixin_61662162的博客
07-24 946
在Vue.js中，使用表格来展示数据是一项常见的任务。本文将为大家解析和注释一个Vue.js可滚动表格组件的代码，帮助读者更好地理解和使用该组件。
uni-app自制表格及其分页
田螺姑娘的博客
10-06 1万+
uni-app自制表格及其分页 展示效果： 1.引入插件 t-table表格【点击跳转】 uni-pagination分页器【点击跳转】 2.实例源码 <view style="font-size: 12rpx;margin-top: 25rpx; width: 800rpx; height:auto"> <t-table> <t-tr fontSize="16"> <t-th>序号</t-th> <t-th
数据可视化图表组件库2.rp
10-08
axure 可视化 大屏 组件库
Axure手机移动端数据可视化组件模板库.zip
07-05
新版本的内容体系由组件列表、交互示例、界面模板、设备模型、小程序&公众号模板、相关分享等几大部分组成，虽然整体结构与V2版基本还是相同的，但是内容丰富程度有了明显的提升，细节处理也更加用心和投入。...
uni-app table表格
10-26
uni-app 表格示例 no-bad-table
Axure大屏可视化模板组件
08-11
rplib格式的Axure大屏可视化模板组件，包含科技感动画，表格记录滚动，折线动画等内容，千万不要错过
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
综上所述，开发一个uni-app微信小程序的日历组件涉及到前端开发、组件化编程、事件处理、样式定制、性能优化等多个方面的知识。通过这个组件，开发者可以提供一个直观、易用的日期选择界面，提升用户在使用微信小...
Axure9 数据可视化 图表组件库.zip
04-22
在这个“Axure9 数据可视化 图表组件库.zip”压缩包中，包含的是一个专门为数据可视化设计的图表组件库，用于帮助用户在Axure9中创建各种类型的图表，以便于展示和解释数据。 数据可视化是将复杂的数据集转化为易于...
uni-app表单组件
add-oil的博客
07-21 2216
【代码】uni-app表单组件。
uniapp：mosowe-table高级表格组件
mosowe
04-15 3216
演示地址 下载地址为偷懒而开发：uni-table uni-pagination mosowe-form mosowe-dropdown参考的nameConfig配置，其中col，hide，visible配置无效
使用Uniapp设计简单可编辑表格实现增删查改
TCMandCKX的博客
10-08 8109
uniapp + elementui实现一个可以展示数据列表，：顶部搜索框：新增按钮被点击会新增一行空白可编辑行-点击保存将新增数据提交到后台：选中数据行，可进入编辑状态，点击保存将数据提交到后台：点击删除直接删除表格参照使用elementui-table，在此基础上增加可编辑状态。
封装uniapp-uni-table组件，获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
lanbaiyans的博客
05-23 6022
封装uniapp-uni-table组件，点击行事件，传入表头，传入数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码
uni-app 非常易用的表格控件，用来排版展示很好用
加菲猫的VFP
11-10 655
用法非常简单,页面添加一行css/* 引入表格样式表 */ @import "../../lib/helang-table.scss";页面完整代码<template> <view class="content"> <view class="itme-box"> <view class="title">默认</vie...
怎么给vue可视化大屏加组件
07-08
给Vue可视化大屏加组件的方法如下： 1. 创建组件：首先，在Vue项目中创建一个新的组件，可以使用Vue的单文件组件（.vue）格式或者普通的JavaScript文件。 2. 注册组件：将创建的组件注册到Vue应用中，可以在父组件的`components`选项中全局注册，或者在需要使用组件的地方局部注册。 3. 使用组件：在需要使用组件的地方，通过组件标签的形式引入并使用该组件。可以在模板中直接使用标签名来引入，也可以在JavaScript代码中通过`import`语句引入。 4. 传递数据：如果需要向组件传递数据，可以通过props属性进行传递。在父组件中通过绑定属性的方式将数据传递给子组件，子组件可以通过props选项接收并使用这些数据。 5. 监听事件：如果需要在组件内部触发某些事件，并将事件传递给父组件进行处理，可以使用自定义事件机制。在子组件中通过`$emit`方法触发事件，并通过父组件的事件处理函数进行响应。 6. 样式与布局：根据需要设置组件的样式和布局。可以使用Vue提供的内置样式绑定和计算属性等功能，也可以结合其他CSS框架进行样式设计。 通过以上步骤，你就可以给Vue可视化大屏加入自定义组件，并根据需要进行数据传递、事件监听和样式布局等操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值