el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数

效果图

我们的数据格式

因为我们的字段和官网提供的字段完全不同,所以需要转换

上代码

   <el-cascader
              ref="lazytree"
              :show-all-levels="false"
              :options="treeData"
              :props="defaultProps"
              :key="isResouceShow"  // 此处加key是为了在重置查询清空值时不报错
              @change="handleNodeClick"
            />

然后在data里面定义defaultProps

      defaultProps: {
        label: "nodeName",
        nodeType: "nodeType",
        value: "nodeId",
        children: "childrenList",
      },

然后接口和处理数据

    // 获取树状采集指标类型
    async queryTreeList() {
      try {
        const res = await queryTreeList();
        const treeList = [res.data];
        this.treeData = this.formatData(treeList);
      } catch (error) {
        console.log(error);
      }
    },
    // 过滤掉级联选择器空的childrenList
    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].childrenList == null || data[i].childrenList.length == 0) {
          data[i].childrenList = undefined;
        } else if (data[i].childrenList.length > 1) {
          this.formatData(data[i].childrenList);
        }
      }
      return data;
    },

查询的时候获取选择检点的数据

 // 节点单击事件
    handleNodeClick() {
      let nodeData = this.$refs.lazytree.getCheckedNodes();  // 获取点击的节点的数据
      let datas = nodeData[0].data;
      this.form.dataitemid = datas.nodeId || "";
      this.form.dataitemidname = datas.nodeName || "";
      this.currentDataitemid = datas.nodeId || "";
      this.queryParams.nodeId = datas.nodeId || "";
      this.queryParams.nodeType = datas.nodeType || "";
      this.getList();
    },

当有需要清空已经选择的值得时候
data里面定义 : isResouceShow: 1,
然后

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");

      // 清空选中节点和高亮节点
      this.$nextTick(() => {
        this.$refs.lazytree.$refs.panel.clearCheckedNodes();
        this.$refs.lazytree.$refs.panel.activePath = [];
      });
      ++this.isResouceShow;  // 强制刷新级联选择器,这样就不会报错
      this.queryParams.nodeId = "";
      this.queryParams.nodeType = "";
      this.handleQuery();
    },

-----------------------------------------------手动分割-----------------------------------------------------------------------

禁用第一个选项

   // 获取设备设施
    getTreeselect() {
      queryAllAmAssetsTree()
        .then((res) => {
          let items = res.data ? res.data : [];
          const treeList = [items];

          this.options = this.formatData(treeList);
          // 遍历第一级的时候不允许点击
          this.options.forEach((item) => {
            if (item.nodeType == "company") {
              item.disabled = true;
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },