vue--el-tree树的懒加载--实现节点后的编辑，删除，添加按钮功能

__十七

已于 2022-06-16 15:34:32 修改

阅读量4.7k

点赞数 4

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-06-16 15:27:38 首次发布

本文链接：https://blog.csdn.net/wlijun_0808/article/details/125316508

版权

Vue 专栏收录该内容

59 篇文章 5 订阅

订阅专栏

本文档详细介绍了前端UI组件库中针对树形结构数据的管理操作，包括编辑、删除和添加节点的功能实现。编辑节点时，弹窗显示节点信息并允许修改；删除节点前会检查是否有子节点或关联数据；添加节点则根据当前层级限制，并在确认后局部刷新。代码示例展示了使用Element UI组件进行操作的逻辑和交互处理。

摘要由CSDN通过智能技术生成

很多代码不能全部贴出来，变量也没有全部做注释。如果有看不懂的，可以留言或者私信

样式说明：

在这里插入图片描述

1，编辑操作
点击某一个节点之后的编辑按钮，出现弹窗，将现有的节点数据显示在弹窗中，并且可修改，点击弹窗中的确定，弹窗消失，新修改的数据显示。
2，删除操作
点击某一个节点后面的删除按钮，弹出提示信息，如果这个节点下面有子节点或者有关联的数据，那就不可删除（后端判断），否则可删除，并且刷新删除节点的父节点。
3，添加操作
点击某一个节点之后的添加子节点的操作，会弹出子节点信息，填入之后，点击确定之后，保存，并且局部刷新该节点

<el-tree
                :data="treeData"
                node-key="id"
                :filter-node-method="filterNode"
                ref="dimTree"
                :props="treeDataDefaultProp"
                style="margin-right: 8px"
                :expand-on-click-node="false"
                :load="loadNode"
                lazy
              >
                <span
                  :class="{'custom-tree-node': true, 'node-click': flag == data.code}"
                  slot-scope="{node, data}"
                  :ref="node.data.code"
                >
                  <span class="enumText">{{ data.name }}</span>
                  <span>
                    <el-button
                      type="text"
                      class="blue el-icon-edit-outline"
                      size="mini"
                      @click.stop="editCateName(data, node)"
                    >
                    </el-button>
                    <el-button
                      type="text"
                      class="el-icon-circle-plus-outline"
                      size="mini"
                      v-if="data.currentLevel < 5"
                      @click.stop="appendTreeNode(data, node)"
                    >
                    </el-button>
                    <el-button type="text" class="el-icon-delete" size="mini" @click="removeTreeNode(node, data)">
                    </el-button>
                  </span>
                </span>
              </el-tree>

data(){
 return{
	createCateInfo: {
        type: '',
        code: '',
        name: '',
        parentCategoryId: '',
        currentLevel: '',
        manager: ''
      },
      editCateNameInfo: {
        code: '',
        name: '',
        manager: ''
      },
      rules: {
        code: [
          {required: true, message: '请输入分类编码', trigger: ['blur', 'change']},
          {validator: this.validateCode, trigger: ['blur', 'change']}
        ],
        name: [
          {required: true, message: '请输入分类名称', trigger: ['blur', 'change']},
          {validator: this.validateName, trigger: ['blur', 'change']}
        ],
        manager: [
          {required: true, message: '请输入负责人', trigger: 'blur'},
          {validator: validateManager, trigger: 'blur'}
        ]
      },
      createCateShow: false,//增加分类名称弹窗
      isEditShow: false,// 修改分类名称弹窗
      isAppendNode: '', //保存点击添加的节点
      isRemoveNode: '', // 保存点击删除的节点
      isEditData: '', //保存点击编辑名称按钮的节点
}
}

 methods: {
    // 验证输入框只能输入数字、字母、下划线、中划线
    validateCode(rule, value, callback) {
      let reg = this.$configs.regExp.code;
      return reg.test(value) ? callback() : callback(new Error('只能输入数字、字母、下划线、中划线'));
    },
    validateName(rule, value, callback) {
      let reg = this.$configs.regExp.name;
      return reg.test(value) ? callback() : callback(new Error('只能输入中文、数字、字母、下划线、中划线'));
    },
    // 点击编辑按钮修改
    editCateName(data) {
      this.isEditData = data;
      this.editCateNameInfo.name = data.name;
      this.editCateNameInfo.code = data.code;
      this.editCateNameInfo.manager = data.manager;
      this.isEditShow = true;
    },
    // 编辑分类弹窗的确定按钮
    editCateConfirm() {
      this.$refs['editCateFrom'].validate(valid => {
        if (valid) {
          if (
            this.isEditData.name !== this.editCateNameInfo.name ||
            this.isEditData.manager !== this.editCateNameInfo.manager
          ) {
            let param = {
              id: this.isEditData.id,
              name: this.editCateNameInfo.name,
              manager: this.editCateNameInfo.manager
            };
            this.$api.put('/api/category', param).then(res => {
              if (res.code === 200) {
                this.isEditData.name = this.editCateNameInfo.name;
                this.isEditData.manager = this.editCateNameInfo.manager;
                this.isEditShow = false;
                this.$message({
                  type: 'success',
                  message: '修改分类成功'
                });
              }
            });
          } else {
            this.isEditShow = false;
          }
        }else{
          return false
        }
      });
    },
    // 添加一个分类结点
    appendTreeNode(data, node) {
      this.createCateInfo.code && (this.createCateInfo.code = '');
      this.createCateInfo.name && (this.createCateInfo.name = '');
      this.createCateInfo.manager && (this.createCateInfo.manager = '');
      if (data.currentLevel == 5) {
        this.$message({
          type: 'warning',
          message: '已达到最大层级，不可再添加。'
        });
        return;
      }
      this.isAppendNode = node;
      this.createCateInfo.parentCategoryId = data.id;
      this.createCateInfo.currentLevel = data.currentLevel + 1;
      this.createCateShow = true;
    },
    // 添加分类弹窗确定按钮
    createCateConfirm() {
      this.$refs['createCateFrom'].validate(async valid => {
        if (valid) {
          if (this.isAppendRootNode) {
            this.createRootCateMethod();
          } else {
            let bolRelate = await this.isRelateMethod();
            // 新加一个弹窗,当这个节点是叶子节点的时候并且关联了数据时有弹窗，若是没有关联数据或者是已经有叶子节点的时候，就没有弹窗
            if (this.isAppendNode.isLeaf && bolRelate) {
              this.showRelateParentNodeMsgBox();
            } else {
              this.createCateMethod();
            }
          }
        } else {
          return false;
        }
      });
    },
 // 添加新分类节点的接口
    async createCateMethod() {
      this.createCateInfo.type = Number(this.cateTabActive);
      const param = JSON.parse(JSON.stringify(this.createCateInfo));
      const res = await this.$api.post('/api/category', param);
      if (res.code === 200) {
        this.createCateShow = false;
        this.$message({
          type: 'success',
          message: '添加分类成功'
        });
        this.cateInfo = '';
        this.isAppendNode.loaded = false;
        this.isAppendNode.expand();
      }
      // else {
      //   this.$message({
      //     type: 'warning',
      //     message: res.msg
      //   });
      // }
    },
// 删除一个分类结点
    removeTreeNode(node, data) {
      this.isRemoveNode = node;
      let msg = node.isLeaf ? '' : '及其子分类';
      this.$confirm('确定删除该分类' + msg + '?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeTreeNodeMethod(data.id);
        })
        .catch(() => {
          return;
        });
    },
    // 删除分类接口
    async removeTreeNodeMethod(id) {
      const res = await this.$api.delete('/api/category/' + id);
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '删除分类成功'
        });
        if (this.isRemoveNode.level == 1) {
          this.getTreeData();
        } else {
          this.isRemoveNode.parent.loaded = false;
          this.isRemoveNode.parent.expand();
        }
      } else {
        let typeId = res.info.type;
        if (typeId == 61) {
          let msg = this.isRemoveNode.isLeaf ? '该维度分类下已有维度关联' : '该维度的叶子节点下已有维度关联';
          this.$message({
            type: 'warning',
            message: msg
          });
        } else {
          let msg = this.isRemoveNode.isLeaf ? '该指标分类下已有指标关联' : '该指标的叶子节点下已有指标关联';
          this.$message({
            type: 'warning',
            message: msg
          });
        }
      }
    },