vue+ele 爬坑之路(二)—tree

后台管理系统中，我们有个很必需的功能，那就是组织机构树，我当时用这个的时候，不小心陷入了个误区，导致我走了很多弯路，在这里我就分享下我遇到的问题吧，希望和我一样遇到这个问题的人可以一起探讨下

在使用的时候，因为要区分一级和二级菜单权限，所以也有不同的判断，其他的不多说，先上代码

<div class="main-content">
                    <el-tree
                            :data="treeLeft"
                            node-key="id"
                            default-expand-all
                            @node-click="handleNodeClick"
                            :props="defaultProps"
                            :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span @click="() => aaa(node,data)">{{node.label}}</span>
                            <span style="margin-left: 15px">
                                <el-button
                                        type="text"
                                        size="mini"
                                        @click="() => appendTree(node,data)">新增
                                </el-button>
                                <template v-if="node.level!==1">
 //node.level可直接获取，通过计算node.level的值可以控制功能按钮的显示,每个树节点node里面的level都是唯一的
                                    <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => treeEdit(node,data)">修改
                                    </el-button>
                                    <template v-if="data.children.length===0">
 //data.children可直接获取，通过计算当前节点是否有children，可选择功能按钮是否显示
                                    <el-button
                                            type="text"
                                            size="mini"
                                            @click="() => treeDelete(node,data)">删除
                                    </el-button>
                                     </template>
                                </template>
                            </span>
                        </span>
                    </el-tree>
                </div>

在script中

<script>
 export default {
methods:{
 //新增组织机构树
            appendTree: function (node, data) {
                this.deptVisible = true //我这里的通过弹窗来对组织机构树进行修改的
                this.deptTitle = '新增组织机构'
                this.dept.deptFullName = data.label;
                this.dept.preDept.deptId = data.id
                // this.dept.parentId=node.parent.data.id
                this.dept.dLevel = node.level
            },
            //新增组织机构树--保存
            deptSave: function () {
                this.$refs.dept.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            if(this.previewUrl==''){
                                this.deptSubmit();
                            }else{
                                this.$refs.upload.submit();
                            }
                        })
                    }
                })
            },
}
}
</script>

好了，这就是我的关于el-tree的坑了，欢迎小伙伴一起讨论

vue+ele 爬坑之路(二)—tree

相关推荐