【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

您所在的位置：网站首页 › vue移动端表格组件 › 【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

2023-04-15 15:28| 来源: 网络整理| 查看: 265

前言：

由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。所以我就直接手写了一个简单的表格展示组件，配上一些我需要的功能。可以先用着了。重点是我是原生的标签写的，不是引入一大堆的插件之类的，uniapp可以直接用。想修改源码也简单。我都注释好了

效果图

小程序页面兼容，可以看到点击按钮之后会拿到对应行的数据在这里插入图片描述 H5页面的，也是一样兼容的可能，也能拿到数据移动端，手机预览效果，展示了数据和点击生效，滚动到底部可以触发方法，可以在这里写加载第二页表格的方法

功能：

1，数据展示：只需要往组件内传入表头和列表数据就能展示，列表数据和elementul的表格一样。表头要自己配置 2，固定表头：上滚动的时候表头会定位在上面不动 3，固定列：表头内配置属性，可以让这一列固定左边不动。目前只能固定一列 4，行底纹：就是给一行的单元格加上背景色，需要在tabledata列表中添加一个字段bgcolor就可以了 5，列底纹：同上，区别是在表头内添加一个字段bgcolor 6，单元格文字颜色改变：这是我们项目的要求，需要拿到每个单元格的数据和指标对比大小来标红。这里在父组件就可以配置 7，操作列：表头添加操作列，key给edit就会出现一个编辑和删除的列。不写就没有这一列。点击按钮会触发父组件的方法 8，滚动到底部：滚动到底部会触发父组件方法。可以做业务操作，比如拿第二页的表格 9，自动列宽：根据表格内单元格内容的宽度来动态赋值几个宽度，宽度是提前定义好的。由于表头和表体需要宽度一致，所以提前设置几个档次的固定宽度。具体使用是自动根据表体或者表头哪一个长，用哪一个的宽。保证数据的展示完全。当数据过长的时候会自动隐藏并省略号显示。这里我就没有加其他的功能了，后期可以自行更改，把这个文字加一个组件包裹，就是点击可以显示全部文字的弹框那个。

引入组件

uniapp可以直接使用，整体就引入了一个组件，uniapp带有的scroll-view组件。需要去uniapp文档内引入一下，直接插件市场下载一下就好了

代码：

组件部分：写一个tableDiv的vue文件，当然名字随便你换在这里插入图片描述然后把代码复制进去。

{ { h.name}} { { t[h.key]}} 编辑删除 // 表头配置：flxe(固定列)，bgcolor(列底纹) // 表体配置：bgcolor(行底纹) export default { props: { data2: { type: Array, required: true, default: function() { return []; } }, head: { type: Array, required: true, default: function() { return []; } }, tableHeight: { required: true, type: [Number, String], default: function() { return 0; } } }, data() { return { //表体 tableData: [], //表头 header: [], // 表格总长度 tableWidths:0 } }, watch:{ // 监听列表 'data2'(a,b){ this.tableData = a }, // 监听表头 'head'(a,b){ this.header = a //计算列宽 this.tableWidth() }, }, created() { //#ifdef H5 this.tableData = this.data2 //列表 this.header = this.head //表头 this.tableWidth() // #endif }, methods: { // 返回行数据 jumpDetailed(row){ this.$emit('rowData',row) }, // 滚动到底部，调用父组件方法 scrollBottom(e) { // 滚动到底部才触发，滚动到右边不触发 if (e.detail.direction == "bottom") { this.$emit('scrollBottom') } }, // 颜色对比 getColor(row, col) { let color = 'black' // 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染 this.$emit('getTextColor', row, col, val => { color = val }) return color }, // 修改按钮 editTable(val) { this.$emit('getEdit', val) }, // 删除按钮 deleteTable(val) { this.$emit('getDelete', val) }, // 计算单元格宽度 tableWidth() { let w=0 //计算表格长度 this.header.forEach((head, index) => { let hw = head.name.length //表头单元格宽度 let dw = 0 //列表单元格宽度 this.tableData.forEach(data => { // 如果是操作列，就直接给十个字符长度，也就是列宽自动150，不是操作列的统一看字符串长度决定宽度 let a = (head.key == 'edit' ? '1234567891' : (data[head.key]?data[head.key].toString():'1')) let tw = (head.key == 'edit' ? 10 : a.length) // 这里每次循环找出更大的数赋值，确保dw中是表体单元格这一列中最大宽度，根据最大宽度来判断单元格显示 if (dw if (hw head['hWidth'] = 80 } else { head['hWidth'] = 130 } } else { // 表体内容宽度大于表头内容宽度时，以表体宽度为主。根据表头的字符长度来区分宽度 if (dw head['hWidth'] = 80 } else { head['hWidth'] = 130 } } w+=head['hWidth'] //叠加表格总长度 }) this.tableWidths=w //给表格赋值总长度 } } } .wrap { width: 100%; } // 表头 .top { display: flex; position: sticky; //表头向上滚动时固定住 top: 0; //width: 750px; //左右滚动时不会把固定的表头滚动走 z-index: 100; //滑动时表头不被覆盖 .header_dyg { height: 40px; text-align: center; line-height: 40px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0 5px; background-color: #f5f5f6; font-size: 14px; font-weight: bold; color: #2b2b2b; flex-shrink: 0; } // 列定位固定单元格 .flexs { position: sticky; left: 0; background-color: #f5f5f6; z-index: 10; } } // 表格列表 .bottom { //width: 750px; .tablebox { display: flex; font-size: 14px; .table_dyg { height: 30px; text-align: center; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0 5px; flex-shrink: 0; } // 列定位固定单元格 .flexs { position: sticky; left: 0; background-color: #fff; z-index: 10; } } } // 列的颜色 .tdColClass { background-color: #d9edf7; } // 行的颜色 .tdRowClass { background-color: #afdfe4; }

然后父组件引入子组件使用

components: { tableDiv }, data() { return { //表体 tableData: [{ "date": "2020-09-01", "name": "11", "address": "上海市普陀区金沙江路 1518 弄", "age": "18", bgcolor: 1 }, { "date": "2020-09-02", "name": "22", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-03", "name": "33", "address": "上海市普陀区金沙江路 1519 弄", "age": "18" }, { "date": "2020-09-04", "name": "44", "address": "上海市普陀区金沙江路 1516 弄", "age": "18" }, { "date": "2020-09-05", "name": "55", "address": "上海市普陀区金沙江路 1518 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }, { "date": "2020-09-06", "name": "66", "address": "上海市普陀区金沙江路 1517 弄", "age": "18" }], //表头 header: [{ name: '日期', key: 'date', flxe: 1 //固定的列，只能有一个列 }, { name: '姓名', key: 'name', bgcolor: 1 //列底纹 }, { name: '地址', key: 'address' }, { name: '年龄', key: 'age' }, { name: '年龄', key: 'age' }, { name: '操作', key: 'edit' }] } }, methods: { // 自定义事件方法，业务逻辑判断是否需要标红，然后回调给子组件颜色 getRedText(row, col, callback) { let color = 'black' // 判断值是否需要标红 if (row[col.key] == '22') { color = 'red' } else { color = 'black' } // 通过回调函数返回值 callback(color); }, // 编辑按钮 editTable(val){ console.log(val,'编辑'); uni.showToast({ title: val.date+'编辑' }) }, // 删除按钮 deleteTable(val){ console.log(val,'删除'); uni.showToast({ title: val.date+'删除' }) }, // 滚动到底部 scrollBottom(){ uni.showToast({ title: '滚动到底部了' }) console.log('滚动到底部了'); } } } 注意点：

由于小程序不支持直接vue那种父子组件传参形式。拿不到数据，所以这里需要用watch监听一下props变化及时更新子组件。在这里插入图片描述 H5页面是可以支持vue的原本写法的。直接进来拿props就可以使用了。所以这里直接created内赋值一下就可以了

【本文地址】

【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

今日新闻

推荐新闻