Arco Design vue表格展开

您好！感谢您的提问。如果您想要实现在 Vue 中的表格展开效果，可以参考以下步骤：

1. 在表格中添加一个“展开”按钮或者图标，点击该按钮可以展开或收起子表格。

2. 子表格可以使用 Vue 组件来实现，可以在父组件中定义一个子组件，同时传递子表格需要的数据。

3. 当用户点击“展开”按钮时，可以通过父组件向子组件传递一个布尔值，用于控制子表格的显示和隐藏。

4. 在子组件中，可以使用 Vue 的 v-show 或 v-if 指令来控制子表格的显示和隐藏。

下面是一个简单的示例代码，供您参考：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td><button @click="toggleSubTable(index)">展开</button></td>
        </tr>
        <tr v-for="(subItem, subIndex) in subList" :key="subIndex">
          <td colspan="3">{{ subItem }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '小明', age: 18, subList: ['语文：90', '数学：80'] },
        { name: '小红', age: 19, subList: ['语文：85', '数学：90'] },
        { name: '小刚', age: 20, subList: ['语文：95', '数学：85'] }
      ],
      subList: []
    }
  },
  methods: {
    toggleSubTable(index) {
      this.subList = this.list[index].subList
    }
  }
}
</script>

在上面的代码中，我们使用了一个 subList 数组来存储子表格数据，当用户点击“展开”按钮时，我们将对应的子表格数据赋值给 subList 数组，然后使用 v-for 指令来渲染子表格。同时，我们在子表格的 td 标签中设置了 colspan 属性，使其占据整个表格的三列，达到展开的效果。