el-table 树形结构表格合并单元格
在 el-table 中有一些属性可以用于合并单元格：
1. rowspan：合并当前行的单元格个数；
2. colspan：合并当前列的单元格个数；
3. formatter：格式化单元格内容，可以返回一个对象来定义该单元格合并的行列数。
下面是一个示例代码，用于合并树形结构表格中的单元格：
```html
<el-table :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  <el-table-column prop="name" label="Name">
    <template slot-scope="{row, $index}">
      <div :>
        {{ row.name }}
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="Age">
    <template slot-scope="{row, $index}">
      <template v-if="!row.ageMerge">
        {{ row.age }}html colspan属性
      </template>
      <template v-else>
        <el-table-cell :rowspan="wspan" :colspan="lspan">{{row.age}}</el-table-cell>
      </template>
    </template>
  </el-table-column>
</el-table>
```
```js
export default {
  data() {
    return {
      data: [
        {
          name: 'John Brown',
          age: 18,
          level: 0,
          hasChildren: true,
          children: [
            {
              name: 'Jim Green',
              age: 24,
              level: 1,
              hasChildren: false
            },
            {
              name: 'Jim Red',
              age: 20,
              level: 1,
              hasChildren: false
            }
          ]
        },
        {
          name: 'Joe Black',
          age: 30,
          level: 0,
          hasChildren: true,
          children: [
            {
              name: 'Jon Snow',
              age: 26,
              level: 1,
              hasChildren: false
            }
          ]
        }
      ]
    }
  },
  mounted() {
    Cells()
  },
  methods: {
    mergeCells() {
      let mergedRows = 0;
      this.data.forEach((item, index) => {
        if (item.children && item.children.length > 0) {
          let childrenCount = item.children.length;
          // 合并当前行的 age 单元格
          if (index === mergedRows) {
            item.ageMerge = true;
            wspan = childrenCount;
            lspan = 1;
            mergedRows += childrenCount;
            childrenCount--;
          }
          // 合并 child 节点行的 age 单元格
          item.children.forEach((child, i) => {
            if (i === 0 && childrenCount > 0) {
              child.ageMerge = true;
              wspan = childrenCount;
              lspan = 1;
            } else {
              child.ageMerge = false;
              wspan = lspan = 1;
            }
          });
        } else {
          // 没有子节点的情况
          item.ageMerge = false;
          wspan = lspan = 1;
          mergedRows++;
        }
      });
    }
  }
}
```
在上述代码中，我们利用了 formatter 属性来格式化 age 单元格，返回了一个对象：
```js
{
  rowspan: 2, // 合并的行数
  colspan: 1, // 合并的列数
  age: 18 // 单元格的内容
}
```
我们利用 mergeCells 方法来计算出每个单元格需要合并的行列数，在格式化的时候使用。当然，也可以不用 formatter，直接在合并单元格的时候，用 el-table-cell 来渲染合并后的单元格。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。