cascader 实现 单选多选 递归 调用赋值

  <el-cascader
          ref="cascader"
          placeholder="请选择监测标签"
          style="width: 200px"
          class="my-cascader max-width"
          :options="typeLayersOptions"
          collapse-tags
          :props="{ multiple: true, checkStrictly: true, clearable: true }"
          v-model="typeLayers"
          @change="typeLayersSelect"
        >
        </el-cascader>
  
 
getTypeLayers() {
      this.typeLayersOptions = [];
      let params = {
        SSOID: this.SSOID,
        areaLayer: this.areaLayer,
        userName: this.userName
      };
      this.$axios
        .get("/apis/hmcsEnterprise/v2/enterpriseType/list", { params })
        .then(res => {
          if (res.data.success) {
            this.typeLayersOptions = this._handleNewLabelsData(res.data.result);
          }
        });
    },
    _handleNewLabelsData(data) {
      let options = [];
      if (!(data && data.length)) {
        return null;
      }
      data.forEach(item => {
        options.push({
          value: item.layer,
          label: item.name,
          id: item.id,
          children: this._handleNewLabelsData(item.childrenList)
        });
      });
      return options;
    },
posted @ 2021-08-30 11:51  诡道也  阅读(635)  评论(0编辑  收藏  举报