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