el-table，行包含子行

`el-table` 是 Element UI 提供的一款表格组件，它在 Vue.js 框架中广泛用于展示数据列表。在 `el-table` 中，如果需要某一行包含子行（通常称为嵌套表格或者树形结构），你可以通过 `expand-row-keys` 或者 `row-class-name` 功能来实现。

例如，你可以在父级行的数据中添加一个布尔属性 `expanded` 来标识是否展开，然后使用 `row-expand` 事件监听器动态控制子行的显示隐藏。`el-table-column` 的 `render` 函数还可以用于渲染子表格的内容。

<template>
  <el-table :data="tableData" :expand-row-keys="expandedKeys">
    <el-table-column prop="name" label="名称"></el-table-column>
    <!-- 添加一个列来控制展开 -->
    <el-table-column type="expand">
      <template slot-scope="{ row }">
        <!-- 这里渲染子表格的内容 -->
        <el-table :data="row.children" style="width: 180px;">
          ...
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 父级数据示例，包含children属性
        { name: '父级1', children: [] },
        { name: '父级2', children: [{ name: '子行1' }, { name: '子行2' }] },
      ],
      expandedKeys: [], // 存储已展开的行的键
    };
  },
  methods: {
    expandRow(row) {
      this.expandedKeys.push(row.$key);
    },
    collapseRow(row) {
      const index = this.expandedKeys.indexOf(row.$key);
      if (index > -1) {
        this.expandedKeys.splice(index, 1);
      }
    },
  },
};
</script>