後臺管理系統中，我們有個很必需的功能，那就是組織機構樹，我當時用這個的時候，不小心陷入了個誤區，導致我走了很多彎路，在這裡我就分享下我遇到的問題吧，希望和我一樣遇到這個問題的人可以一起探討下

 在使用的時候，因為要區分一級和二級選單許可權，所以也有不同的判斷，其他的不多說，先上程式碼

<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的坑了，歡迎小夥伴一起討論