el-Cascader(vue3 总结)

零、基本使用

1基本使用

option 数据源

props 配置项

v-model绑定的是一个数组

​​​​​​​

 <el-form-item label="商品分类：" :prop="EFormPropKeys.CATEGORY">
            <el-cascader
              style="width: 300px"
              v-model="createForm[EFormPropKeys.CATEGORY]"
              :options="categoryTreeOpts"
              :props="{
                children: 'children',
                value: 'categoryId',
                label: 'categoryName'
              }"
            />
          </el-form-item>




<srcipt>

  onMounted(() => {
    getCategoryTree()
  })


 /**
   * 获取分类树
   */
  const getCategoryTree = () => {
    getProductCategoryTree()
      .then((res) => {
        categoryTreeOpts.value = res.data || []
        console.log("getProductCategoryTree", res.data)
      })
      .catch((err) => {
        console.log("err", err)
      })
  }
</srcipt>

保存 提交时候时候：分别保存

levelOneCategoryId: createForm[EFormPropKeys.CATEGORY][0],
      levelTwoCategoryId: createForm[EFormPropKeys.CATEGORY][1],
      levelThreeCategoryId: createForm[EFormPropKeys.CATEGORY][2],

编辑回显时候： 存到数组中

 [EFormPropKeys.CATEGORY]: [
          data.levelOneCategoryId,
          data.levelTwoCategoryId,
          data.levelThreeCategoryId
        ],

一 自定义props

Element-plus 的Cascader 级联选择器 如何自定义Props-优快云博客

二 v-model 绑定的是数组

定义一个数据去接受数据，然后在赋值给form 表单

二单选---获取所有数据 !!!!!!

# 展开选择，放在一个【数组】里 

1、options属性指定选项数组即可渲染出一个级联选择器

2、  :props="customProps" 配置选项

3、  v-model="industryList" 是一个数组（[一级code, 二级code]）

4、得选择最后一级： 如果不是配置属性checkStrictly（是否严格的遵守父子节点不互相关联）

  <el-cascader
                  v-model="industryList"
                  style="width: 500px"
                  placeholder="请选择"
                  :options="industry"
                  :props="customProps"
                  @change="searchIndustry"
                  clearable
                />


/** 获取所属行业 */
const customProps = ref({
  label: "name",
  children: "childList",
  value: "code"
})


const industry = ref<any>([])
industry.value =[
        {
            "code": "A",
            "name": "农、林、牧、渔业",
            "sort": 0,
            "childList": [
                {
                    "code": "4",
                    "name": "渔业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "5",
                    "name": "农、林、牧、渔专业及辅助性活动",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "2",
                    "name": "林业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "3",
                    "name": "畜牧业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "1",
                    "name": "农业",
                    "sort": 0,
                    "childList": []
                }
            ]
        },
        {
            "code": "B",
            "name": "采矿业",
            "sort": 0,
            "childList": [
                {
                    "code": "12",
                    "name": "其他采矿业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "7",
                    "name": "石油和天然气开采业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "10",
                    "name": "非金属矿采选业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "11",
                    "name": "开采专业及辅助性活动",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "9",
                    "name": "有色金属矿采选业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "8",
                    "name": "黑色金属矿采选业",
                    "sort": 0,
                    "childList": []
                },
                {
                    "code": "6",
                    "name": "煤炭开采和洗选业",
                    "sort": 0,
                    "childList": []
                }
            ]
        }]

# 初始化

回显保存的行业： 将数据赋值给 v-model="industryList"  即可回显

所有的行业列表数据

# 切换企业

数据会自动加载到industryList

将industryList 数组 拆分 一级code,二级code 分别赋值给【保存的对象属性】上

<el-cascader
                 
                  v-model="industryList"
                  style="width: 500px"
                  placeholder="请选择"
                  :options="industry"
                  :props="customProps"
                  @change="searchIndustry"
                  clearable
                />



// 保存所属行业数据
const searchIndustry = () => {
  if (Array.isArray(industryList.value) && industryList.value.length >= 2) {
    company.value["firstIndustry"] = industryList.value[0]
    company.value.secondIndustry = industryList.value[1]
  } else {
    company.value.firstIndustry = ""
    company.value.secondIndustry = ""
  }
}

三  单选--- 懒加载

地区的数据量太大，所有都返回会卡或者超时，所以使用懒加载： 点击一级，在触发二级数据

# 初始化

回显保存的地区： 将数据赋值给 v-model="area" 即可回显

所有地区列表

 <el-cascader
                  placeholder="请输入"
                  ref="cascader"
                  :props="address"
                  style="width: 500px"
                  v-model="area"
                  @change="changeAddress"
                  clearable
                />



const allAddressData = ref<any>([])
const area = ref<Array<string>>([])

// 省市区
const address = {
  value: "value",
  label: "label",
  lazy: true, // 开启懒加载
  cascaderOptions: [],
  // checkStrictly: true, //可选择任意节点
  lazyLoad(node, resolve) {
    //node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
    setTimeout(async () => {
      const nodes: any = []
      // 构造查询条件
      let areaQueryParams = {
        parentCode: node.level === 0 ? "" : node.value
      }
      //查询接口
      try {
        const res: any = await CompanyAPI.queryArea(areaQueryParams)
        res.data.map((item) => {
          let obj = {
            value: item.code,
            label: item.name,
            leaf: node.level >= 2 // 节点级别，如果没有子节点就停止查询
          }
          nodes.push(obj)
        })
        allAddressData.value[node.level] = convertData(nodes)
        //重新加载节点
        resolve(nodes)
      } catch (error: any) {
        console.error(error)
        if (!error.msg || error.msg != "") {
          ElMessage.error(error.msg)
        }
      }
    }, 0)
  }
}

#切换地区

/** 保存所属地区数据 */
const changeAddress = (data) => {
  if (Array.isArray(data) && data.length >= 2) {
    company.value.provinceCode = data[0]
    company.value.provinceName = allAddressData.value[0][data[0]]

    company.value.cityCode = data[1]
    company.value.cityName = allAddressData.value[1][data[1]]

    company.value.districtCode = data[2]
    company.value.districtName = allAddressData.value[2][data[2]]
  } else {
    company.value.provinceCode = ""
    company.value.provinceName = ""

    company.value.cityCode = ""
    company.value.cityName = ""

    company.value.districtCode = ""
    company.value.districtName = ""
  }
}