ElementUI选择器

时间:2022-09-29 RealPluto 人气:0

1. 分析问题

【问题描述】使用 ElementUI 的 Cascader 级联选择器组件，如果使用了懒加载和动态加载数据会导致，在v-model中的数据据重新放到 Cascader 级联组建后，会出现数据不回显的问题。【原因分析】在级联组件中虽然在v-model中重新传入选中的数据，但采用了懒加载+远程数据的方式构建选项数据，此时级联组件的结构数据并未生成，此时仅有选中后的数据而没有选项数据，因此导致了级联选择器没有数据可供显示，也就导致了数据不回显的问题。【解决方案】 ① 前端渲染完整的选项数据，此方案需要前端渲染的数据量极大，可能导致页面崩溃，不建议采用此方式处理； ② 仅渲染选中后的数据，即仅构建选中后的选项结构，后端返回的数据结构进行处理后依然可以配合懒加载+远程数据的方式（需要对渲染生成的数据进行去重，避免和远程访问的数据重复）

2. 解决问题

借助Cascader 级联选择器组件的options属性，构建选项结构配合v-model即可实现数据回显，如果想配合懒加载+远程数据，需要指定级联组件的属性信息。

{
  "label": "浙江省",
  "value": 12321
  "children": [{
      "label": "杭州市",
      "value": 4565
   }]
}

【实现方式】

<el-cascader
  v-model='data'
  :props='cascadeProps'
  :options='cascadeOptions'
  filterable
  ></el-cascader>

cascadeProps: {
  multiple: true,
    checkStrictly: true,
      // 启用懒加载
      lazy: true,
        // 远程数据访问
        lazyLoad: async (node, resolve) => {
          const { data, level} = node
          const parentCode = level === 0 ? '000' : data.nodeCode
          const nodes = await this.getRemoteData(parentCode, level)
          // 去除重复节点
          let nodeFilter = nodes.filter(n => {
            if (!this.optionList.includes(n.value)) {
              return n
            }
          })
          resolve(nodeFilter)
        },
},

getRemoteData(parentCode, level) {
  return new Promise((resolve, reject) => {
    getDistrictData({ parentCode }).then((res) => {
      resolve(this.formatData(res.data, level))
    })
  })
},

  formatData(data, level) {
    let districtType = ''
    switch (level) {
      case 0:
        districtType = 'province'
        break
      case 1:
        districtType = 'city'
        break
      case 2:
        districtType = 'district'
        break
      default:
        break
    }
    return data.map((item) => {
      return {
        districtType,
        nodeCode: item.nodeCode,
        value: item.districtId,
        label: item.name,
        leaf: level >= 2,
      }
    })
  },

加载全部内容