<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="序號(hào)" type="index" />
            <el-table-column label="部門" prop="department" />
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isExpandAll: false, // 全部展開
            listData: [
                {
                    id: 1,
                    department: "市場(chǎng)部",
                    children: [
                        { id: 6, department: "銷售部" },
                        { id: 7, department: "采購部" },
                    ],
                },
                {
                    id: 2,
                    department: "事業(yè)部",
                    children: [
                        { id: 3, department: "研發(fā)部" },
                        { id: 4, department: "技術(shù)部" },
                    ],
                },
                { id: 5, department: "財(cái)務(wù)部" },
            ], // 表格數(shù)據(jù)
        };
    },
    methods: {
        // 點(diǎn)擊切換
        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>