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