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

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

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

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

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

watch: { filterText(val) { this.$refs.tree.filter(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() {
    this.treeDataList();
  },

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

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

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

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

//树节点点击，
    handleNodeClick(data, node) {
      // console.log("点击节点", data, node);
      this.projectQuery.category_id = node.key;
      this.getTableData();
    },

4、

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

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

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

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

悦读