<template>
    <div>
        <el-button type="primary" @click="toggle">
            {{ isExpandAll ? "全部收起" : "全部展开" }}
        </el-button>

        <el-table
            ref="tableTree"
            :data="listData"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            row-key="id"
        >
            <el-table-column label="序号" type="index" />
            <el-table-column label="部门" prop="department" />
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isExpandAll: false, // 全部展开
            listData: [
                {
                    id: 1,
                    department: "市场部",
                    children: [
                        { id: 6, department: "销售部" },
                        { id: 7, department: "采购部" },
                    ],
                },
                {
                    id: 2,
                    department: "事业部",
                    children: [
                        { id: 3, department: "研发部" },
                        { id: 4, department: "技术部" },
                    ],
                },
                { id: 5, department: "财务部" },
            ], // 表格数据
        };
    },
    methods: {
        // 点击切换
        toggle() {
            this.isExpandAll = !this.isExpandAll;
            this.toggleExpand(this.listData, this.isExpandAll);
        },

        /** 展开/收起方法
         * @param {data} array 绑定table中的data
         * @param {isExpand} boolean 是否展开
         */
        toggleExpand(data, isExpand) {
            data.forEach(item => {
                this.$refs['tableTree'].toggleRowExpansion(item, isExpand);
                if (item.children != null) {
                    this.toggleExpand(item.children, isExpand);
                }
            });
        },
    },
};
</script>