uniapp 表格,uniapp table组件
本文分享一个UniApp实战，在复杂场景下实现一个表格组件(UniApp)。希望对你有帮助！
UNI-APP开发(仿饿)开发课程：进入学习
是一个成熟的程徐苑，应该知道怎么自己造轮子(uniApp的插件市场找遍了也没找到符合要求的插件，没办法只能自己造轮子了)。本文旨在再次做出记录。
使用场景：uniApp、移动端(兼容小程序、App、H5)
根据需求组织具体功能：
需求整理
表格名称
可配置背景
可以修改字体样式(大小、颜色)
菜单按钮(需要公开事件)
米
支持多级表头
头部固定
标题支持自定义名称。
形式
支持设置单元格宽度
固定第一列
支持树数据
支持内容图像、链接
其他的
实现内部排序
实现内部分页
内部计算总计行
对于整个组件的一些思考
功能复杂，挤在一个文件里也不优雅凌乱——按照大方向分成几个模块(细粒度)。
有很多要求。直观来看，要传递的参数很多——根据模块定义，参数也是有分类的。
参数很多，如何更优雅的管理，降低入门难度？-配置config.js文件，并在其中设置默认值，将起到字段说明和默认状态管理的作用。
会涉及到一些图标的使用——选择图标字体图标库。
技术实现难点
由于使用环境的限制：uniApp实现的表单相关组件比较简单，对于非H5环境的限制比较大(比如不能设置rowspan，colspan)。用起来也显得麻烦，达不到项目的要求。最后，我决定自己造一个轮子。
表头部分
主要难点在于多级表头的处理，以及如何根据数据驱动显示。一开始打算实现为html表格，但是在开发过程中出现了很多问题。首先，数据处理很麻烦，需要计算每一行单元格有多少行以及colspan和rowspan。而且没有td、tr等组件，需要自己实现。
列的数据是树形的，如下所示
列=[
{title: area ， dataIndex: area}，
{
标题:广州一区，
儿童:[
{title: sales ， dataIndex :广州销量第一 }，
{title :计划销售额， dataIndex :广州一区计划销售额 }，
{title :已实现，数据索引:已在广州一区实现 }
]
},
//.
]好像可以用flex布局实现。
每个网格垂直居中，如果存在子网格，将遍历递归渲染。因为需要递归调用渲染，所以递归部分分为一个组件：titleColumn。先贴个代码(代码已经发布到社区了，有兴趣可以访问门户):
表格标题. vue
标题列. vue
这里有个坑:
普通vue中不需要引入递归组件，但uniApp中需要。
//titleColumn.vue
中标题列的样式。/title-column.vue 没有展开，不好写。直接看效果(自我感觉良好，哈哈哈):
表格内容
这里要先处理列的数据(考虑多级表头)，根据上面的列，可以得到实际要渲染的列：
创建一个新的变量dataIndexs，用来保存需要实际渲染的列数据。
递归列来获取最后的叶节点并保存它。
关键代码：
//根据列获取正文中实际呈现的列
fmtColumns(列表){
//保存叶节点
this.dataIndexs=[]
如果(！列表！列表.长度)返回
//获取实际行
this.columnsDeal(列表)
},
//
columnsDeal(列表，级别=0) {
list.forEach(item={
让{孩子，res }=项目
if (children children.length) {
this.columnsDeal(子级，级别1)
}否则{
this.dataIndexs.push({.res })
}
})
}，下一步就是处理列表数据中的树形结构。
先看数据结构表data:
tableData=[
{
key: 1，
地区:广州，
销售，100，
计划销售额，200，
已达到: 50.0% ，
实现排名，1，
GroupIndex: 1，
GroupLayer: 1，
GroupKey :广州，
孩子:[{
key: 11，
区域:广州1区，
社区，广州一区，
销售，60岁，
计划销售额，120，
已达到: 50.0% ，
实现排名，1，
孩子：[{
key: 111，
区域:广州1区，
社区，广州一区，
销售，60岁，
计划销售额，120，
已达到: 50.0% ，
实现排名，1，
}]
},
{ 关键:12，区域:广州二号，社区:广州二号，销售额:40，计划销售额:80，业绩: 50.0% ，达成排名:1}，
],
},
]树形结构，key是唯一的值。
我考虑过使用递归组件，但这涉及到扩展和折叠。也比较麻烦。
最终的解决方案是将数据扁平化，添加层次结构等属性，无论是子数据、父ID等。每一条数据。展开的行由数组变量记录，子数据的显示受到控制。处理后的数据存储在dataList中。
展平处理功能：
//递归处理数据，tree=Array
listFmt(列表，级别，parentIds=[]) {
return list.reduce((ls，item)={
让{孩子，res }=项目
//错误提示
if(RES[this . id key]===undefined ！res[this.idKey]===null) {
///console.error(`tableData是tableData数据中的[idKey]属性，但没有数据，请检查`)
}
let nowItem={
.res，
水平，
has children:children . length，
parentIds，
孩子们，
[this . id key]:RES[this . id key]RES[this . id key]。toString()
}
ls.push(当前项目)
if (children children.length) {
this.isTree=true
ls=ls . concat(this . list fmt(children，level 1，[.parentIds，nowItem[this.idKey]]))
}
返回ls
}, [])
}，最终数据如下：
数据可以在处理后呈现，
需要两级嵌套遍历：
第一层遍历dataList以获取行。
第二层遍历dataIndexs以获取列。
最终渲染：
固定首列，固定表头
使用css属性实现：position: sticky。定位不准的元素。大家都是成熟的前端程徐苑~ ~，所以我就不详细介绍了。说一些需要注意的细节：
兼容性
支持Uni小程序模式和app模式！
限制
设置position:sticky后，必须指定左上右下中的任意一个才能生效。如果未设置，性能与相对定位相同。在同时设置了top bottom或left和right的情况下，top和left具有更高的优先级。
设置为position:sticky元素的任何父节点的溢出属性必须可见，否则不生效(不能滚动怎么办)。
其他
造一个轮子不难，造一个有用的轮子不容易。
有些布局和css相关的东西，文章中很难表达，就不细说了。有兴趣可以拉代码看看。入口
开发过程中遇到的问题也很多，都是一路打补丁。前期构思失败，会导致后期开发磕磕绊绊(刚开始模块和参数划分不好，整个事情逻辑比较混乱。停下来，再思考，再调整，有一种豁然开朗的感觉)。
我搬砖了~
原地址：https://juejin.cn/post/7083401121486045198
作者：穆华凯
推荐：《uniapp教程》以上是UniApp在实战中开发的一个复杂场景的表格组件的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。