VUE+ElementUI Table三级表格实现“指定展开行““指定合并行”

在Vue中结合ElementUI实现Table组件的三级表格，并指定展开行和合并行，可以通过Table组件的row-key属性来设置行的唯一标识，expand-row-keys属性来指定展开的行，以及通过使用Table的span-method属性来实现行的合并。

以下是一个简单的例子，展示如何实现三级表格并指定展开行和合并行：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    :expand-row-keys="expands"
    :span-method="spanMethod"
  >
    <el-table-column
      type="expand"
    >
      <template slot-scope="props">
        <el-table
          :data="props.row.children"
          row-key="id"
          :span-method="spanMethod"
        >
          <el-table-column
            prop="date"
            label="日期"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="地址"
          ></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              date: '2016-05-02',
              name: '李小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },