element-ui中el-tree樹形控件-樹節點的選擇(選中當前節點,獲取當前id而且獲取其父級id)

時間 2019-11-10

標籤 element tree 控件樹節點選擇選中當前節點獲取而且其父简体版

原文原文鏈接

在element-ui的el-tree樹形控件中默認獲取選取當前選中id的方法是this.$refs.tree.getCheckedKeys();
可是若是子節點不是所有選中的話，父節點算不選中。
因爲咱們通常想要的是就算只選中一個直接點父節點以及其父輩都算選中，因此須要本身寫邏輯。css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>樹形列表</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

    <div id="app" v-cloak>
        <el-tree
            :data="rootData"
            ref="rootTree"
            show-checkbox
            node-key="value"
            default-expand-all>
        </el-tree>
        <button @click="getKeys">獲取選中節點Key</button>
    </div>

    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                rootData: [{"value":16,"label":"首頁","parent":-1},{"value":17,"label":"用戶列表","parent":-1},{"value":18,"label":"信息列表","parent":18},{"value":19,"label":"信息管理","parent":-1,"children":[{"value":20,"label":"我的信息","parent":19},{"value":21,"label":"修改信息","parent":19}]},{"value":22,"label":"資金數據","parent":-1,"children":[{"value":23,"label":"投資分佈","parent":22},{"value":24,"label":"項目分佈","parent":22},{"value":25,"label":"收支統計","parent":22}]},{"value":26,"label":"系統管理","parent":26,"children":[{"value":27,"label":"機構管理","parent":26},{"value":28,"label":"角色管理","parent":26},{"value":29,"label":"崗位管理","parent":26},{"value":30,"label":"用戶管理","parent":26},{"value":31,"label":"系統菜單","parent":26}]},{"value":32,"label":"車輛管理","parent":-1,"children":[{"value":33,"label":"車輛信息","parent":32}]}]
            },
            methods: {
                getKeys () {
                    var aKey = this.getCheckedKeys(this.rootData, this.$refs.rootTree.getCheckedKeys(), 'value');
                    console.log(aKey);
                },
                getCheckedKeys (data, keys, key) {
                    var res = [];
                    recursion(data, false);
                    return res;

                    // arr -> 樹形總數據
                    // keys -> getCheckedKeys獲取到的選中key值
                    // isChild -> 用來判斷是不是子節點
                    function recursion (arr, isChild) {
                        var aCheck = [];
                        for ( var i = 0; i < arr.length; i++ ) {
                            var obj = arr[i];
                            aCheck[i] = false;

                            if ( obj.children ) {
                                aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
                                if ( aCheck[i] ) {
                                    res.push(obj[key]);
                                }
                            }

                            for ( var j = 0; j < keys.length; j++ ) {
                                if ( obj[key] == keys[j] ) {
                                    aCheck[i] = true;
                                    if ( res.indexOf(obj[key]) == -1 ) {
                                        res.push(obj[key]);
                                    }
                                    break;
                                }
                            }
                        }
                        if ( isChild ) {
                            return aCheck.indexOf(true) != -1;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

getCheckedKeys函數用來獲取選中的node-key指向的鍵值。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。