vue+element el-tree 最详细的使用方法，包含真实数据渲染

时间：2025-05-09 10:07:21

上一篇文章贴了完整的el-tree代码，这一篇详细的描述一下如何在项目中使用

传送门，el-tree完整代码，有完整的代码

先从这一段代码开始，对应的是左侧的树区域

   <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            ></el-input>

input的v-model绑的值在data中定义： filterText: “”, //树过滤
在watch中监听，筛选的值会不断发生变化，所以要监听值的变化，调用树的filter方法，用this.$点出来。

watch: { filterText(val) { this.$(val); }, },

（filter方法可以查看文档，对树节点进行筛选操作，该参数会在filter-node-method中作为第一个参数）

**
data绑的值用来展示数据，
props用来配置选项（树的子节点，树节点文本展示，叶子节点），
node-key是树结点唯一标识，整棵树唯一的（这个就相当于v-for循环时，唯一的key），
accordion是否每次只打开一个同级树节点展开，default-expand-all默认展开所有节点，这两个可以依据个人情况选择，
:filter-node-method 对树节点进行筛选时执行的方法，用这个方法筛选Function(value, data, node)**
ref要有，过滤的时候要用到，ref可以拿到树的所有属性和方法
@node-click节点被点击时的事件

 data() {
    return {
      filterText: "", //树过滤
      treeData: [], //树数据
      defaultProps: {
        //树形控件的属性绑定对象
        children: "children", //设置通过children属性展示子节点信息
        label: "title", //通过label设置树形节点文本展示
        isLeaf: "leaf",
      },
    };

1、获取左侧树，形参id可以不写，我没有用到

  created() {
    ();
  },

//获取左侧树
    async treeDataList(id) {
      try {
        const data = await burgetTree();//树接口已封装，可以按你自己调接口的方式写
         = ;
        // ("树数据", );
      } catch (error) {
        (error);
      }
    },

2、树过滤，接的第一个值就是filter方法中的val。方法里的代码基本上和其他文章里都一样，唯一一个要注意的点是这个是接口返回给你的字段，按自己项目的来、

    //树过滤
    filterNode(value, data) {
      if (!value) return true;
      return (value) !== -1;
    },

3树节点点击事件，解释一下 .category_id 是项目名称下拉框，category_id对应的字段描述是按分类筛选，代码里没有展示，页面上还有一个下拉框，选择项目，选完之后展示对应的树数据。

//树节点点击，
    handleNodeClick(data, node) {
      // ("点击节点", data, node);
      .category_id = ;
      ();
    },

4、

// 树节点鼠标移入移出
    mouseenter(data) {
      this.$set(data, "show", true);
    },
    // 树节点鼠标移入移出
    mouseleave(data) {
      this.$set(data, "show", false);
    },

 //添加同级节点
    append(node) {
      
       = true;
      .parent_id = ;
    },
    // 添加子级节点
    appendChild(node) {
       = true;
      ();
      .parent_id = ;
    },
    // 编辑节点，调查看接口
    async editNode(node) {
      const data = await burgetFindProject({ id:  });
      // ('树节点详情', data);
      if ( == 200) {
         = ;
         = true;
      }
    },
    // 删除结点
    deleteNode(node) {
      this.$confirm("是否删除当前节点?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          burgetRemove({ id:  }).then((res) => {
            if ( == 200) {
              this.$message.success("删除成功");
              ();
            }
          });
        })
        .catch((err) => err);
    },
    //添加、修改节点提交
    submitNode() {
      this.$refs.(async (valid) => {
        if (!valid) return;
        try {
          if () {
            var data = await burgetUpdate();
          } else {
            var data = await burgetAdd();
          }
          // ('添加树', data);
          if ( == 200) {
            this.$message.success("操作成功");
             = false;
            ();
             = { parent_id: "" };
          }
        } catch (error) {
          (error);
        }
      });
    },
    //添加节点弹窗关闭
    nodeClose() {
       = { parent_id: "" };
       = false;
    },

还有缺的再补，暂时就这么多

相关文章