vue 可合并表格组件_----vue实现复杂表格的合并与展示----

本文介绍了如何使用基于Element-UI封装的LbTable组件在Vue项目中实现复杂表格的合并和展示。首先,通过导入LbTable组件并设置merge属性来指定合并依据。接着,将多维数组转换为一维数组以便处理数据。在column属性中定义表格列,包括父级列和子级列,并使用render方法自定义内容。最后展示了实现的表格效果。
摘要由CSDN通过智能技术生成

1.import LbTable from'@/components/lb-table/lb-table'(ps:LbTable是接触element-ui 表格的二次封装。官方网址:https://github.liubing.me/lb-element-table/zh/guide/#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8;git地址:https://github.liubing.me/lb-element-table/zh/guide/)

2.

merge属性是根据哪几个字段去合并的一个数组

3.将后台返回的多维数组通过递归转成一维数组

formData() {

let flag = this.dataTable.every(item => !item.businessDataProjectDtoList);

if (flag) {

// this.initData();

return;

}

let data = [];

this.dataTable.forEach(element => {

if (

element.businessDataProjectDtoList &&

element.businessDataProjectDtoList.length

) {

element.businessDataProjectDtoList.forEach((item, index, array) => {

delete element.businessDat

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值