elementui中樹形表格切換展開不同層級的示例代碼

更新時間：2022年08月20日 11:52:12 作者：suoh's?Blog

這篇文章主要介紹了elementui中樹形表格切換展開不同層級,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

效果：

代碼（復制粘貼即可）：

<template>
    <div class="myDiv">
        <el-row style="margin:10px 0">
            <el-col :span="22">
                <el-button type="primary" size="mini" plain @click="expandLevel(0)">展開一級</el-button>
                <el-button type="primary" size="mini" plain @click="expandLevel(1)">展開二級</el-button>
                <el-button type="primary" size="mini" plain @click="expandLevel(2)">展開三級</el-button>
                <el-button type="primary" size="mini" plain @click="expandLevel(3)">展開四級</el-button>
            </el-col>
        </el-row>
        //下面寫法主要方便大家作為組件封裝使用
        <el-table :data="tableData" style="width: 100%" row-key="id" :expand-row-keys="expandId" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column show-overflow-tooltip :prop="item.prop" :width="item.width" :label="item.label" v-for="(item,i) in treeProps" :key="i">
                <template slot-scope="scope">
                    <!-- 自定義數(shù)據(jù)-展示slot插槽 -->
                    <slot v-if="item.slot" :name="item.prop" :scope="scope">-</slot>
                    <!-- 非自定義處理(判空) -->
                    <span v-else-if="scope.row[item.prop] === '' || scope.row[item.prop] === null">-</span>
                    <!-- 非自定義處理(展示數(shù)組數(shù)據(jù))-換行展示 -->
                    <div v-else-if="Array.isArray( scope.row[item.prop])==true">
                        <div v-for="aa in scope.row[item.prop]" ::key="aa">
                            {{aa}}
                        </div>
                    </div>
                    <!-- 非自定義處理(正常展示) -->
                    <span v-else>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>
        </el-table>
 
    </div>
</template>
 
<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            expandNum: 0, //展開層級的數(shù)字
            expandId: [],
            treeProps: [{ prop: 'date', label: '評估項目', width: '400' },
            { prop: 'address', label: '指標屬性', width: '300' },
            { prop: 'map', label: '采集要點', width: '300' }],
            tableData: [{
                id: 1,
                date: '快速反應能力',
                name: '-',
                address: '-',
                level: 1,
                children: [{
                    id: 11,
                    date: '快速籌劃',
                    name: '-',
                    address: '-',
                    level: 2,
                    children: [{
                        id: 111,
                        date: '方案計劃齊全',
                        name: '-',
                        address: '-',
                        level: 3,
                        children: [{
                            id: 1111,
                            date: '四級111',
                            name: '四級111',
                            address: '定量',
                            map: ['11', '22', '33'],
                            level: 4,
                        }, {
                            id: 1112,
                            date: '四級1',
                            name: '四級2',
                            address: '定量',
                            map: ['11', '22', '33'],
                            level: 4,
                        }, {
                            id: 1113,
                            date: '四級1',
                            name: '四級3',
                            address: '定量',
                            map: ['11', '22', '33'],
                            level: 4,
                        }, {
                            id: 1114,
                            date: '四級1',
                            name: '四級4',
                            address: '定量',
                            level: 4,
                        }]
                    }]
                }]
            }, {
                id: 2,
                date: '突發(fā)事件處理能力',
                name: '-',
                address: '-',
                level: 1,
                children: [{
                    id: 21,
                    date: '隨機應變',
                    name: '-',
                    address: '-',
                    level: 2,
                    children: [{
                        id: 211,
                        date: '方案計劃齊全',
                        name: '-',
                        address: '-',
                        level: 3,
                        children: [{
                            id: 2111,
                            date: '四級1',
                            name: '四級1',
                            level: 4,
                            address: '定量'
                        }]
                    }]
                }]
            }],
            expandNumCopy: 0,//保留當前展開的層級
        }
    },
    created() {
    },
    methods: {
        /** 展開層級 */
        expandLevel(i) {
            this.expandNum = i
            this.expandId.splice(0);
            if (this.expandNum > 0) { //expandNum==0 為第一層級 不需要展開 大于0再執(zhí)行
                this.setExpandKeys(this.tableData1, i)
            }
        },
        /** 遞歸設置展開層級對應的id數(shù)組 */
        setExpandKeys(dataList, num) {
            --num;
            if (num >= 0) {
                for (var i = 0; i < dataList.length; i++) {
                    this.expandId.push(`${dataList[i].id}`);
                    if (dataList[i].children) {
                        this.setExpandKeys(dataList[i].children, num);
                    }
                }
            }
        },
 
    },
    mounted() { }
}
</script>
<style lang="scss" scoped>
</style>