如何使用element的tree树形组件实现编辑和增加下级或者同级并且只可以增加到第4层级

效果图 并且未开启状态时候的样式调整

 html代码

v-loading是加载状态,参考element的组件

这个是根据 status来判断这个条款是否开启,如果没有开启就是画横线的样式 

  <span :style="data.data.status === '1' ? {color: '#ccc', textDecoration: 'line-through'} : ''">{{ node.label }}<small style="color: #19a9d5; font-size: 12px; font-weight: 300">{{ data.children ? '('+data.children.length+')' : '' }}</small></span>

            <div class="col-sm-3 ibox" style="padding: 10px;">
                <el-input
                        placeholder="输入关键字进行过滤"
                        clearable
                        v-model="filterText">
                </el-input>

                <el-tree
                        v-loading="loading"
                        class="filter-tree"
                        :data="personnelList"
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                        node-key="id"
                        :default-expanded-keys="defaultExpandIds"
                        @node-click="treeClick"
                        @node-expand="handleNodeExpand"
                        @node-collapse="handleNodeCollapse"
                        highlight-current
                        style="margin-top: 10px"
                        ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
                        <span :style="data.data.status === '1' ? {color: '#ccc', textDecoration: 'line-through'} : ''">{{ node.label }}<small style="color: #19a9d5; font-size: 12px; font-weight: 300">{{ data.children ? '('+data.children.length+')' : '' }}</small></span>
                      </el-tooltip>
                      <span style="width: 50px;">
                        <el-dropdown @command="(command, e) => handleCommand(command, data, e)"  trigger="click">
                          <el-button
                                  type="text"
                                  style="color: #999"
                                  size="mini"
                                  @click="(e) => treeAppend(e)"
                          >
                            +
                          </el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="up">增加同级</el-dropdown-item>
                            <el-dropdown-item command="down">增加下级</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                        <el-button
                                type="text"
                                style="color: #999"
                                size="mini"
                                icon="el-icon-edit"
                                @click="(e) => handleLeftTreeEdit(e, node, data)">
                        </el-button>
                      </span>
                    </span>
                </el-tree>
            </div>

css部分 可能有的不需要,自我辨别

        [v-cloak] {display: none;}
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
            width: 100%;
        }

        .custom-tree-node span{
            overflow: hidden;
            text-overflow: ellipsis;
            width: calc(100% - 50px);
        }

        .el-cascader-menu{
            max-width: 500px;
            min-width: 250px;
            height: auto;
            min-height: 300px;
        }
        .el-scrollbar__wrap {
            margin-bottom: 0 !important;
            margin-right: 0 !important;
        }
        .el-scrollbar__wrap::-webkit-scrollbar {
            background-color: #fff !important;
        }
        .el-scrollbar__wrap::-webkit-scrollbar-track {
            background-color: #fff !important;
        }

data的部分内容

data(){

return {
  loading: false,
    
            defaultProps: {
                children: 'children',
                label: 'name'
            },    




    }

}

 

js代码贴上有用的部分js 记得阻止事件冒泡,否则一次点击会出现多次的点击事件

//编辑
        handleLeftTreeEdit(e, node, data) {
            this.leftTreeDialogTitle = "编辑"
            e.stopPropagation();//阻止冒泡事件
            this.treeEditDialogVisible = true

            this.$nextTick(function() {
                data.data.statusBoolean = data.data.status === '1' ? false : true
                this.leftTreeForm = {...data.data}
            })
        },

        /**
         * 阻止冒泡
         * @param e
         */
        treeAppend(e) {
            e.stopPropagation();//阻止冒泡事件
        },

        /**
         * 处理左侧项目树'+'图标下拉菜单
         * @param command 传过来的为增加同级 up或者增加下级down 根据后端参数可自定义逻辑
         * @param data
         * @param e
         */
        handleCommand (command, data, e) {
            const itemData = {...data.data}
            this.leftTreeDialogTitle = "新增"
            this.leftTreeForm.sort = itemData.sort // 设置当前排序为新增数据的排序
            this.handBookForm.sort = itemData.sort
            this.leftTreeForm.position = command
            this.currentLeftTreeData = data
            this.treeEditDialogVisible = true
        },

        // 增加子级节点事件
        addChildNode() {
//this.nodeonList是点击的节点的数据level 是层级
            if (this.nodeonList.level == 5){
                this.$message.error('不可增加下级');
            }else if (this.nodeonList.data.isContent=='1'){
                //  1是最后一层就不可以增加 2不是最后一层
                this.$message.error('不可增加下级');
            } else {
                this.treeFrom.parentId =this.dataList.id//自己的id作为父级id
                this.treeFrom.type = this.activeName //tab类型
                this.treePointdialogVisible = true //打开弹框
            }

        },