效果图

<el-tree
                    class="filter-tree"
                    ref="tree"
                    highlight-current
                    :expand-on-click-node = "false"
                    :data="categories"
                    :filter-node-method="filterCategory"
                    :props="defaultCategory"
                    @node-click="selectCategory"
                    node-key="categoryId"
                    default-expand-all style="margin-top:20px;height:520px;overflow-y: auto;">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span class="fr">
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => add(data)">
                            新增
                        </el-button>
                        <el-button
                            class="fontRed" 
                            v-if="data.isSys !==1"
                            type="text"
                            size="mini"
                            @click="() => del(node, data)">
                            删除
                        </el-button>
                    </span>
                </span>
            </el-tree>

获取el-tree类别列表方法，新增，删除节点方法

<script>
import {list,addCategory,updateCategory,delCategory} from '@/api/basicSetting/categorySet'
export default {
  name: "categorySet",
  data() {
    return { 
        id:1,
        index:1,
        createUser:'',    
        createTime:'',
        isDisabled:true,                //是否禁用
        categories:[],                  //档案类别列表
        defaultCategory:{
            children: 'children',
            label: 'categoryName'       // 这里的名字要与封装的数据中的节点字段名一样
        },
        filterText:'',                  //搜索档案名称
    };
  },
  created() {
    this.getCategory();
  },
  watch: {
  	//实时监控搜索类别
      filterText(val) {
          this.$refs.tree.filter(val);
      }
  },
  methods: {

    // 获取档案类别
    getCategory(){
        this.createUser = this.$store.state.user.userName;
        this.createTime = this.$moment(new Date()).format("YYYY-MM-DD");
        list().then(res => {
            var arr = this.common.parseTreeData(res.data, 'categoryCode', 'parentCode',null);            
            this.categories = arr;
        }).catch((err) => {
          console.log(err);
        }); 
    },
    // 筛选档案类别
    filterCategory(value, data) {
        if (!value) return true;
        return data.categoryName.indexOf(value) !== -1;
    },
    // 选择档案类别
    selectCategory(data) {
        // this.node = node;
        this.row = data;
        console.log(data);
        //系统级，不可修改删除
        if(data.isSys === 1){
            this.isDisabled = true; 
        }
        // 可删除非系统级类别
        else{
            this.isDisabled = false; 
        }         
        this.dialog.data = data
        this.$forceUpdate();
    },

    // 新增
    add(data) {
        console.log(data);   
        const newChild = {
            id: this.id++,
            categoryName: '新增档案'+this.index++,
            createUser: this.createUser,
            createTime: this.createTime,
            categoryCode: data.categoryCode + '.XZDA',
            categoryShortCode:'',
            isSys:0,
            parentCode: data.categoryCode,
            remarks:'',
            children: [] 
        };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
    },

    // 删除
    del(node,data) {
        if (data.categoryId != undefined) {
            this.$confirm('确认删除该类别？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delCategory(data.categoryId).then(res =>{                   
                    this.close();  
                    this.$message.success("档案类别删除成功!");  
                    this.getCategory();                  
                }).catch((err) => {
                    console.log(err);
                });
            });
        }
        else{
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        }
    },
/**
     * 普通list集合转成树形集合
     * @param data      list集合
     * @param idField   子节点字段名
     * @param parentField 父节点字段名
     * @param topValue 最顶级父节点字段值（如 0 1 -1）
     */
     parseTreeData(data, idField, parentField, topValue) {
        var arr = [];
        for (var i = 0, l = data.length; i < l; i++) {
            var item = data[i];
            if (item != null && item[parentField] === topValue) {
                this.tranData(data, item, idField, parentField);
                arr.push(item);
            }
        }
        return arr;
    },
    tranData (data, parent, idField, parentField) {
        var temp = [];
        for (var i = 0, l = data.length; i < l; i++) {
            var item = data[i];
            if (item != null && item[parentField] == parent[idField]) {
                this.tranData(data, item, idField, parentField);
                temp.push(item);
            }
        }
        if(temp.length>0){
            parent["children"] = temp;
        }
    },

    // 保存
    saveData(event) {
        this.$refs['dataForm'].validate(valid => {
            if (valid) {                               
                this.dialog.loading = true;
                if (this.dialog.data.categoryId != undefined) {
                    updateCategory(this.dialog.data).then(res =>{                    
                        this.close();
                        this.$message.success("档案类别修改成功!");  
                        this.getCategory();                  
                    }).catch((err) => {
                        console.log(err);
                        this.dialog.loading = false;
                    });
                } else {
                    addCategory(this.dialog.data).then(res =>{                    
                        this.close();
                        this.$message.success("档案类别新增成功!");  
                        this.getCategory();                  
                    }).catch((err) => {
                        console.log(err);
                        this.dialog.loading = false;
                    });
                }
            }
        });
    },
  }
};
</script>