elementui中樹形控件的使用

一、將后臺(tái)返回的數(shù)據(jù)填充到前端控件中登疗，需要注意的幾點(diǎn)問題

(1)排截、el-tree中需要綁定node-key='自定義的id名稱'
(2)、在配置data中defaultProps中的屬性時(shí)辐益，要按照與后端協(xié)商的字段名稱對(duì)稱
(3)断傲、重要的是要月后端協(xié)商返回字段內(nèi)容：

協(xié)商返回的數(shù)據(jù)格式（舉例）：

children: Array(6) //與defaultProps中的children對(duì)應(yīng)
menuId: 1 //與node-key對(duì)應(yīng)
name: "運(yùn)維管理"  //與defauktProps中的label字段相對(duì)應(yīng)；
parentId: 0 //父節(jié)點(diǎn)id
path: "/"

二智政、當(dāng)前端要將選中的菜單項(xiàng)傳入后端的時(shí)候认罩，現(xiàn)有的API中當(dāng)選中父菜單時(shí)候所有的子菜單會(huì)checked，但是當(dāng)該菜單下不是選中所有子菜單的時(shí)候女仰，這時(shí)候主菜單不會(huì)被checked猜年，而API中el-tree的getCheckedKeys()方法只會(huì)選中屬性為checked菜單的名為 node-key對(duì)應(yīng)的id的集合抡锈，這時(shí)候有三種方法

(1)疾忍、第一種方法：
1、找到項(xiàng)目中的\node_modules\element-ui\lib\element-ui.common.js文件床三；
2一罩、搜索文件中的TreeStore.prototype.getCheckedNodes方法中的；

if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
          checkedNodes.push(child.data);
}

3撇簿、修改成

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
          checkedNodes.push(child.data);
 }

4聂渊、重啟項(xiàng)目

console.log(this.$refs.tree.getCheckedKeys()); //就可以拿到父節(jié)點(diǎn)的ID啦

(2)、第二種方法

methods: {
      getCheckedNodes() {
        var rad=''
        var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 獲取當(dāng)前的選中的數(shù)據(jù)[數(shù)組] -id, 把數(shù)組轉(zhuǎn)換成字符串
        var ridsb = this.$refs.tree.getCheckedNodes()// 獲取當(dāng)前的選中的數(shù)據(jù){對(duì)象}
        ridsb.forEach(ids=>{//獲取選中的所有的父級(jí)id
          rad+=','+ids.pid
        })
        rad=rad.substr(1) // 刪除字符串前面的','
        var rids=rad+','+ridsa
        var arr=rids.split(',')//  把字符串轉(zhuǎn)換成數(shù)組
        arr=[...new Set(arr)]; // 數(shù)組去重
        rids=arr.join(',')// 把數(shù)組轉(zhuǎn)換成字符串
        console.log(rids)
      }
    }

（3)四瘫、第三種方法（推薦） 官方新出的獲取半選中狀態(tài)的方法

let parentArr = this.$refs.tree.getHalfCheckedKeys()   //獲取半選中狀態(tài)的id
let childArr = this.$refs.tree.getCheckedKeys()  //獲取全選中的id
this.addRoleForm.rolePower = parentArr.concat(childArr)   //拼接在一起

API解釋相關(guān)方法屬性

屬性說明

Props

更多的方法 詳情

element-ui官網(wǎng)

整個(gè)項(xiàng)目的代碼結(jié)構(gòu)

<template>
<div>
    <el-tree :data="data2" show-checkbox node-key="menuId" ref="tree" highlight-current :props="defaultProps" @check='slesCheck'>
    </el-tree>
</div>
</template>

<script>
export default {
    data() {
        return {
            data2: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
        };
    },
    methods: {
        getMenu() {
            this.$axios.get('menu/queryMenuList').then(res => {
                this.data2 = res.data
                console.log(res.data)
            })
        },
        slesCheck() {
           // this.checkedIds = this.$refs.tree.getCheckedKeys();
            // var rad = ''
            // var ridsa = this.$refs.tree.getCheckedKeys().join(',') // 獲取當(dāng)前的選中的數(shù)據(jù)[數(shù)組] -id, 把數(shù)組轉(zhuǎn)換成字符串
            // var ridsb = this.$refs.tree.getCheckedNodes() // 獲取當(dāng)前的選中的數(shù)據(jù){對(duì)象}
            // ridsb.forEach(ids => { //獲取選中的所有的父級(jí)id
            //     rad += ',' + ids.parentId
            // })
            // rad = rad.substr(1) // 刪除字符串前面的','
            // var rids = rad + ',' + ridsa
            // this.addRoleForm.rolePower = rids.split(',') //  把字符串轉(zhuǎn)換成數(shù)組
            // this.addRoleForm.rolePower = [...new Set(this.addRoleForm.rolePower)]; // 數(shù)組去重
            // // rids = arr.join(',') // 把數(shù)組轉(zhuǎn)換成字符串
            // console.log(this.addRoleForm.rolePower)
            let parentArr = this.$refs.tree.getHalfCheckedKeys()
            let childArr = this.$refs.tree.getCheckedKeys()
            this.addRoleForm.rolePower = parentArr.concat(childArr)
            console.log(parentArr)
            console.log(childArr)
            console.log(this.addRoleForm.rolePower)
        },
        getMeunList() {
            // this.$axios.get('menu/queryMenuIdList?roleId=1').then(res=>
            // this.$refs.tree.setCheckedKeys( this.checkedIds); //修改前要先獲取該el-tree的選中狀態(tài)
            //     console.log(res)
            // })
        }
    },

    created() {
        this.getMenu()
        // this.getMeunList()
    }
}
</script>
<style>
.el-tree {
    margin-top: 60px;
    width: 200px;
}
</style>

遺留的問題！Ｏ醋觥９选！后臺(tái)返回的數(shù)組中既有父級(jí)菜單id又有子菜單id诚纸，但子菜單并不完整的情況下撰筷，運(yùn)用setCheckedKey()方法會(huì)將該父級(jí)菜單下的所有子菜單選中，有一個(gè)屬性check-strictly（在顯示復(fù)選框的情況下畦徘，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法毕籽，默認(rèn)為 false）但是設(shè)置后當(dāng)子菜單數(shù)量很多的情況下抬闯，體驗(yàn)很不好，求教各路大神解惑