【vue】element-ui Cascader 级联选择器动态加载回显（懒加载回显）

最新推荐文章于 2024-09-24 14:31:33 发布

茄茄茄子eggplant

最新推荐文章于 2024-09-24 14:31:33 发布

阅读量4.1k

点赞数 1

分类专栏： vue学习文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/qq_43226415/article/details/131394700

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了在Vue项目中使用el-cascader组件处理单选和多选的情况，通过绑定key实现节点重载。利用lazyLoad属性进行懒加载，并模拟数据进行动态请求。同时展示了如何监听表单数据变化，通过添加和编辑数据的处理函数addAndEdit来更新组件状态。

摘要由CSDN通过智能技术生成

前言：不是很懂，欢迎补充指正

方法一：单选情况

单选直接拿placeholder或者换个盒子展示。

方法二：多选应该能，没有实践过，有模拟数据

核心：在组件上绑定key，利用改变key时会重新加载节点，在v-model设置进数据（用v-if也行）。

能自动请求，咱也不知道为啥。

template和data：

<el-cascader
      :key="resetCascader"
      v-model="select"
      :props="props"
    />

  data() {
    return {
      from: {
        id: '1'
      },
      resetCascader: 0, // 记录key值
      // 区域code
      select: [],
      props: {
        // expandTrigger: 'click',
        // emitPath: false,
        lazy: true,
        lazyLoad: (node, resolve) => {
          console.log(node)
          const { level, value } = node
          console.log(level, value)
          setTimeout(async() => {
            const res = await this.getTempData(level, value || null)
            console.log(res)
            return resolve(res)
          })
        }
      }
    }

假设是修改情况，form中有数据，加个监听：

watch: {
    form: {
      handler(newValue) {
        this.addAndEdit(newValue)
      },
      deep: true,
      immediate: true
    }
  },

处理函数：

    addAndEdit(userData) {
      this.resetCascader++
      // this.show = false
      if (userData) {
        this.form = { ...userData }
      }
      this.select = []
      this.select.push(1, 3, 8)
      console.log(this.option)
    }

假数据模拟请求：

// 模拟请求
    getTempData(level, key) {
      return new Promise((resolve, reject) => {
        let result = [] // 最终要返回的数据
        if (level === 0) {
          // 一级的数据
          result = [
            { label: '测试1', value: 1, leaf: false },
            { label: '测试2', value: 2, leaf: false }
          ]
        }
        if (level === 1) {
          // 二级的数据
          if (key === 1) {
            // '测试1' 查回来的子数据
            result = [
              { label: '测试1-1', value: 3, leaf: false },
              { label: '测试1-2', value: 4, leaf: false }
            ]
          } else if (key === 2) {
            // '测试2' 查回来的子数据
            result = [
              { label: '测试2-1', value: 5, leaf: false },
              { label: '测试2-2', value: 6, leaf: false }
            ]
          }
        }
        if (level === 2) {
          // 三级的数据
          if (key === 3) {
            // '测试1' 查回来的子数据
            result = [
              { label: '测试1-1-1', value: 7, leaf: true },
              { label: '测试1-1-2', value: 8, leaf: true }
            ]
          } else if (key === 4) {
            // '测试2' 查回来的子数据
            result = [
              { label: '测试1-2-1', value: 9, leaf: true },
              { label: '测试1-2-2', value: 10, leaf: true }
            ]
          } else if (key === 5) {
            // '测试2' 查回来的子数据
            result = [
              { label: '测试2-1-1', value: 11, leaf: true },
              { label: '测试2-1-2', value: 12, leaf: true }
            ]
          } else if (key === 6) {
            // '测试2' 查回来的子数据
            result = [
              { label: '测试2-2-1', value: 13, leaf: true },
              { label: '测试2-2-2', value: 14, leaf: true }
            ]
          }
        }
        console.log('--开始请求--')
        setTimeout((item, index) => {
          console.log('级联请求到的数据', result)
          // 做一个延时，模拟接口数据返回
          resolve(result)
          console.log('--请求成功--')
        }, 1000)
      })
    },