Element-ui中Tree的使用，以及全選反選獲取id

 　　　　　　　　　　<el-tree

                        empty-text

                        :data="data"

                        :show-checkbox='true'

                        default-expand-all

                        node-key="module_id"

                        ref="tree"

                        highlight-current

                        :props="defaultProps"

                        @check="nodeClick"

                    >

                        <span class="custom-tree-node" slot-scope="{ node, data }">

                            <span>{{ data.module_name }}</span>

                            <span>

                                <el-button

                                    type="text"

                                    size="mini"

                                    style="margin-left:5px;"

                                >({{ data.module }})</el-button>

                            </span>

                        </span>

                    </el-tree>

data() {
        return {
            checkAll: false,
            select_box: [],
            data: [], //tree
            defaultProps: {
                children: 'child',
                label: 'module_name'
            }
        };
    },

 handleCheckAllChange(val) {
            if (this.checkAll) {
//全選 this.$nextTick(function () {
                    this.$refs.tree.setCheckedNodes(this.data);
                });
            } else {
//反選 this.$nextTick(function () {
                    this.$refs.tree.setCheckedKeys([]);
                });
            }
            this.$nextTick(function () {
//獲取id
                let select_box = [];
                this.$refs.tree.getCheckedNodes().forEach((item) => {
                    select_box.push(item.module_id);
                });
                this.select_box = select_box;
                // console.log(this.select_box, 'select_box888');
            });
        },
        nodeClick(data, node, e) {
//點擊的時候獲取到所有選中的 // console.log(this.$refs.tree.getCheckedNodes(), 'console.log(this.$refs.tree.getCheckedNodes());');
            let select_box = [];
            this.$refs.tree.getCheckedNodes().forEach((item) => {
                select_box.push(item.module_id);
            });
            this.select_box = select_box;
            console.log(this.select_box, 'select_box');
        },

 

解決el-tree勾選子的時候獲取父的id
只有所有子級都被選中的時候才能獲得父級的id，如果不選中所有的子級那么獲取得到的id就只有子級的。但是提交數據時后台需要父級id的。
通過
clickTree(v,e){
                console.log(this.$refs.tree.getNode(v));//一層層獲取其父組件獲取id，但是如果添加完id（需要判斷id是否存在。存在刪除，不存在添加）再勾掉層級很多會很麻煩，判斷太多
｝
 
//這個可以直接獲取勾選的id和父級的id，勾選掉也會消失
console.log(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()),"dfdff");’
 
 
保存的時候需要將減號和勾選的id分開(回顯有父級的id，子級默認全選)，或者傳對應的值過去區分是減號還是勾選，回顯的時候根據type區分自己整理出來勾選的id