vxe-table表格数据嵌套多层

vxe-table是一个基于Vue.js的可定制的表格组件，它支持丰富的功能，比如数据嵌套多层。数据嵌套多层指的是在一个表格中展示具有层级关系的数据，比如组织结构、目录列表等。在vxe-table中，可以通过设置`rowspan-method`属性来实现数据的多层嵌套。

`rowspan-method`是一个函数，它可以决定哪些单元格需要跨越多行显示。在函数内部，你可以根据当前行的数据和它的子数据来返回一个配置对象，配置对象中可以指定需要跨越的行数和列数。这样，在渲染表格时，vxe-table会自动将这些单元格展开成多个行。

具体实现步骤如下：
1. 准备层级数据，通常这种数据会有一个字段来标识层级关系，比如`children`字段。
2. 在vxe-table中设置`rowspan-method`属性，并绑定到一个方法。
3. 在`rowspan-method`方法中，根据当前行数据和其子数据决定跨行跨列的配置。
4. 根据返回的配置对象，vxe-table会渲染出具有层级嵌套效果的表格。

下面是一个简单的示例代码片段：

new Vue({
  el: '#app',
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          children: [
            {
              id: 2,
              name: '李四',
            }
          ],
        },
        // ... 其他数据
      ],
      rowspanSpan: {}
    }
  },
  methods: {
    rowspanMethod({ row, rowIndex, column, columnKey }) {
      // 这里可以根据row数据结构判断是否是需要展开的行
      // 假设id为1的行需要展开，我们设置rowspan为其子数据的数量+1
      if (row.id === 1) {
        this.rowspanSpan = {
          rowspan: row.children.length + 1,
          colspan: 1
        }
      } else {
        // 其他行不展开
        this.rowspanSpan = null
      }
    }
  }
})

在模板中：

<template>
  <vxe-table :data="tableData" @rowspan-method="rowspanMethod">
    <!-- 其他列定义 -->
  </vxe-table>
</template>