element 级联选择器

template 结构

 <el-form-item
        label="客户需求:"
        prop="customerRequire"
        class="content-customerRequire common-style"
        ><el-cascader
          ref="requirementRef"
          v-model="ruleForms.customerRequire"
          placeholder="请选择客户需求"
          data-tid="customerRequire"
          :props="props"
        ></el-cascader>
      </el-form-item>
import {
    
     get_search } from 'api/cooperation-in-page';
data() {
    
    
    return {
    
    
      ruleForms: {
    
    
        customerRequire: '', //客户需求
       	rules: {
    
    
        customerRequire: [
          {
    
    
            required: true,
            message: '请选择您的需求',
            trigger: 'change',
          },
        ],
      },
      props: {
    
    
        lazy: true,
        lazyLoad: (node, resolve) => {
    
    
          const {
    
     level, data, value } = node;
          const params = {
    
    
            productTypeCode: data?.productTypeCode || value,
            code: value,
          };
          get_search(params).then((res) => {
    
    
            if (res.code === 200) {
    
    
              let {
    
     data } = res;
              data = Array.isArray(data) ? data : [];
              const _arrMap = data.map((item) => {
    
    
                return {
    
    
                  value: item.code,
                  label: item.name,
                  leaf: level >= 2,
                  productTypeCode: item.productTypeCode,
                };
              });
              resolve(_arrMap);
            } else {
    
    
              this.$message.warning(res.message);
              resolve([]);
            }
          });
        },
      },
    };
  },

猜你喜欢

转载自blog.csdn.net/weCat_s/article/details/114970823