ElementUI中el-table拆分单元格实现

首先解释下这里的拆分单元格，指的是展示一条父子结构的数据，将一条数据中的多条子数据展示出来。由于elementui中提供的是合并单元格行列的方法，所以下面是自定义实现的效果。

效果展示：

数据格式：
tableData: [
        {
          parentName: 1,
          parentAge: 55,
          children: [  // 展示拆分的单元格
            { childName: 22, childAge: 33 },
            { childName: 25, childAge: 33 },
            { childName: 26, childAge: 33 },
          ],
        },
      ],
notSplitCellPropList: ['parentName', 'parentAge'],
propList: [
    { label: '选择', prop: 'childCheckbox' },
    { label: '姓名', prop: 'parentName', isShowBatchEdit: true },
    { label: '年龄', prop: 'parentAge' },
    { label: '孩子姓名', prop: 'childName' },
    { label: '孩子年龄', prop: 'childAge' },
],
      

github源码地址：github.com/Qinzi03/bat…

npm install 方式使用

 npm install batch-edit-table