需求点

  1. el-cascader一共两级,第一级数据由接口返回;点击第一级的展开icon,拿第一级的id去请求接口获取第二级的数据;
  2. el-cascader需带有模糊搜索功能。
 <el-form-item label="业务状态" prop="businessStatus">
  <el-cascader
        ref="casader"
        clearable
        key="casader`"
        :options="businessProList"
        :props="optionProps"
        filterable
        :before-filter="beforeFilter"
        @input.native="inputEnter"
        @change="handleSelectBusiness"
        placeholder="业务状态"
        size="small"
      ></el-cascader>
 </el-form-item>

<script>
export default {
data() {
  return {
	productList: [],
	businessProList: [],
	optionProps: {
        lazy: true,
        lazyLoad: this.lazyLoad
    },
  },
  mounted() {
  	this.getAllProList();
  },
  methods: {
    //获取第一级的数据
    getAllProList() {
      api.getAllPro({}, this.isSaas ? "saasOrder" : "").then((res) => {
        this.productList = res.data;
        res.data.forEach((item) => {
          this.businessProList.push({
            value: item.proId,
            label: item.proName,
            children: []
          });
        });
        this.originBusinessList = this.businessProList.slice(0);
      });
    },
    
    beforeFilter() {
      return false;
    },

	//模糊搜索
    inputEnter() {
      let ref = this.$refs["casader"];
      setTimeout(() => {
        this.businessProList = [];
        this.originBusinessList.forEach((item) => {
          if (item.label.indexOf(ref.inputValue) !== -1) {
            this.businessProList.push(item);
          }
        });
      });
    },

    handleSelectBusiness(val) {
      this.filters.businessStatus = val[1];
    },
  }
}

    lazyLoad(node, resolve) {
      if (node.value) {
        let nodes = [];
        let proId = node.value;
        api.getData({id}).then((res) => {
          res.data.forEach((item) => {
            nodes.push({
              value: item.processNodeId,
              label: item.nodeName,
              leaf: true
            });
          });

          resolve(nodes);
        });
      } else {
        resolve([]);
      }
    },
</script>

效果图:
在这里插入图片描述 在这里插入图片描述
在这里插入图片描述

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐