avue v2.9.5的表格组件,怎么折叠表格

Avue V2.9.5的表格组件是一个基于Vue.js的轻量级UI库，其中的表格支持功能丰富，包括行展开和折叠。要实现表格的折叠功能，你可以使用内置的`v-model`和`expand-row`指令。假设你有一个数据列表，每个条目都有一个`expanded`字段用于标记是否展开：

<template>
  <av-table :data="tableData" @expand-change="handleExpandChange">
    <template slot="actions" slot-scope="scope">
      <template #default="{ row }">
        <button @click="toggleRowExpansion(row)">{{ row.expanded ? '收起' : '展开' }}</button>
      </template>
    </template>
    <template slot="expanded">
      <!-- 展开的内容 -->
      {{ row.expandedContent }}
    </template>
    <template slot="cell" slot-scope="scope">
      <!-- 每列的数据展示 -->
      <span>{{ scope.row.columnName }}</span>
    </template>
    <av-table-column title="展开/收起" header-align="center" width="80">
      <template slot="footer" slot-scope="scope">
        <div class="action-btn" @click.stop="toggleRowExpansion(scope.row)">
          <i v-if="scope.row.expanded" class="iconfont icon-collapse"></i>
          <i v-else class="iconfont icon-expand"></i>
        </div>
      </template>
    </av-table-column>
  </av-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, columnName: '姓名', expandedContent: '详细信息...', expanded: false },
        // 更多数据...
      ],
      toggleRowExpansion(row) {
        row.expanded = !row.expanded;
      }
    };
  }
};
</script>

在这个例子中，当点击“展开/收起”按钮时，会触发`toggleRowExpansion`方法，改变对应行的`expanded`属性，从而切换表格行的显示状态。