vue展开行 加载子表格

在Vue中展开行加载子表格，一种常见的做法是通过自定义组件来实现。具体步骤如下：

1. 在父组件中定义表格，并在需要展开的行中添加一个自定义组件，用于展示子表格。

2. 在自定义组件中定义子表格，并使用`props`接收父组件传递的数据，如当前行的数据。可以使用`v-if`控制子表格的显示与隐藏。

3. 在父组件中定义一个方法，用于处理展开行的事件。该方法需要接收当前行的数据，并将其保存在一个数组中，用于渲染子表格。

4. 在父组件中定义一个计算属性，用于动态计算当前行是否展开。可以使用`Array.prototype.includes()`方法判断当前行的数据是否在保存行数据的数组中，如果存在则返回`true`，否则返回`false`。

5. 在父组件中使用`scoped slot`自定义表格列，用于控制展开行的显示。在展开行中添加一个按钮或图标，用于触发展开行的事件。

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

<template>
  <el-table :data="tableData">
    <el-table-column type="expand">
      <template slot-scope="props">
        <child-table v-if="isExpanded(props.row)" :data="props.row"></child-table>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="expandRow(scope.row)">Expand</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import ChildTable from './ChildTable.vue'

export default {
  components: {
    ChildTable
  },
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 22 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 25 }
      ],
      expandedRows: []
    }
  },
  methods: {
    expandRow(row) {
      if (this.isExpanded(row)) {
        this.expandedRows = this.expandedRows.filter(item => item !== row)
      } else {
        this.expandedRows.push(row)
      }
    },
    isExpanded(row) {
      return this.expandedRows.includes(row)
    }
  }
}
</script>