antd table树形表格一键展开/折叠

原创已于 2023-08-15 14:04:11 修改 · 4.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2023-08-11 14:40:47 首次发布

vue3 同时被 3 个专栏收录

20 篇文章

订阅专栏

antd

12 篇文章

订阅专栏

table

1 篇文章

订阅专栏

本文介绍了如何使用AntDesign中的树形表格组件，通过`expandedRowKeys`属性和`expandedRowsChange`事件实现表格的展开与折叠功能，以及如何初始化展开所有数据和处理单行的展开/折叠操作。

antd树形表格的展开与折叠只需关注 expandedRowKeys属性与 expandedRowsChange 事件，expandedRowKeys为表格数据id组成的数组，expandedRowsChange 表格展开与折叠时触发的回调。

以下为举例说明：

<a-button @click="expand">全部展开</a-button>
<a-button @click="expandClose">全部折叠</a-button>

<a-table
    :dataSource="data"
    :columns="columns"
    :loading="formState.loading"
    rowKey="id"
    :expandedRowKeys="expandedRowKeys"
    @expandedRowsChange="expandedRowsChange"
></a-table>

<script>
    const expandedRowKeys = ref([])

    let expandArr = []; // 全部展开数据的id
    expandArr = res.data; // res.data为从后台获取到的数据
    expandArr = expandArr.map(item => item.id);
    expandedRowKeys.value = expandArr; // 给expandedRowKeys赋值为id组成的数组，期望首次渲染数据时即展开全部数据
    
    // 全部展开
    const expand = () => {
      expandedRowKeys.value = expandArr; //点击【全部展开】按钮时，给expandedRowKeys赋值为id组成的数组
    };
    // 全部折叠
    const expandClose = () => {
      expandedRowKeys.value = []; //点击【全部折叠】按钮时，清空数组，表格行全部折叠
    };
    // 表格行操作（展开折叠）
    const expandedRowsChange = expandedRows => {
      expandedRowKeys.value = expandedRows; // 点击树形表格内的展开折叠图标时
    };
</script>