element 级联框懒加载

      <ElCascader
        ref="cascader"
        :key="key"
        v-model="code"
        clearable
        filterable
        :props="props"
      />

重点在于props,在js文件中进行定义

data(){
  return {
   props: {
    //设置为懒加载的模式
    lazy: true,
    value: 'value',
    expandTrigger: 'click',
    lazyLoad(node, resolve) {
      const { level, root, data } = node
      //判断为根节点时入参queryType的值为0,deptCode为null
      if (root) {
        http
          .post('/xx/xx', { deptCode: null, queryType: 0 })
          .then((res) => {
            const result = res.data.map((item) => ({
              label: item.deptName,
              value: item.deptCode,
              //leaf标明节点是不是叶子节点,在这里表示当为第三级(即level为2时就是叶子节点,不会再调接口加载选项)
              leaf: level >= 2,
            }))
            //  将结果resolve出去,result就是我们想要的数据
            resolve(result)
          })
          .catch((res) => {
            console.log(res)
          })
      } else {
        http
          .post('/iot/queryDepartments', {
            deptCode: data.value,
            queryType: 0,
          })
          .then((res) => {
            const result = res.data.map((item) => ({
              label: `${item.deptCode}${item.deptName}`,
              value: item.deptCode
            }))
            resolve(result)
          })
          .catch((res) => {
            console.log(res)
          })
        }
    },
  },
 }
 }

如果业务逻辑没那么复杂,只是点击选项就会调接口请求数据的话,

data(){
  return {
   props: {
    //设置为懒加载的模式
    lazy: true,
    value: 'value',
    expandTrigger: 'click',
    lazyLoad(node, resolve) {
        http
          .post('/xx/xx', { xxx })
          .then((res) => {
            const result = res.data.map((item) => ({
              label: item,
              value: item,
            }))
            //  将结果resolve出去,result就是我们想要的数据
            resolve(result)
          })
          .catch((res) => {
            console.log(res)
          })
      } 
  },
 }
 }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。