vue ElementUI级联选择器回显问题解决

 更新时间:2022年09月15日 08:31:12   作者:RealPluto  
这篇文章主要介绍了vue ElementUI级联选择器回显问题解决,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

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,
      }
    })
  },

到此这篇关于ElementUI级联选择器回显问题解决的文章就介绍到这了,更多相关ElementUI选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue之常用的内置指令详解

    Vue之常用的内置指令详解

    这篇文章主要为大家介绍了Vue之常用的内置指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue核心概念Getter的使用方法

    Vue核心概念Getter的使用方法

    今天小编就为大家分享一篇关于Vue核心概念Getter的使用方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • VUE 项目如何使用 Docker+Nginx进行打包部署

    VUE 项目如何使用 Docker+Nginx进行打包部署

    使用 Docker,你可以创建一个包含 Vue.js 应用程序的容器镜像,并在任何支持 Docker 的环境中运行该镜像,这篇文章主要介绍了VUE 项目用 Docker+Nginx进行打包部署,需要的朋友可以参考下
    2024-06-06
  • Vue中使用ECharts与v-if的问题和解决方案

    Vue中使用ECharts与v-if的问题和解决方案

    在Vue项目中使用v-if指令控制ECharts图表显示时,可能会遇到图表无法正常渲染或显示错误的问题,下面这篇文章主要介绍了Vue中使用ECharts与v-if的问题和解决方案,需要的朋友可以参考下
    2024-10-10
  • vue中各种deep的区别解析

    vue中各种deep的区别解析

    在Vue3中,推荐使用::deep作为深度选择器,它比Vue2中的::v-deep语法更简洁,::v-deep、::deep、:deep()、&gt;&gt;&gt;和/deep/都是用于穿透组件作用域的选择器,但Vue3更倾向于使用::deep或:deep(),感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • vue下拉列表的两种实现方式比较

    vue下拉列表的两种实现方式比较

    这篇文章主要介绍了vue下拉列表的两种实现方式比较,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • Vue-Element-Admin前端接入SSO的方法步骤

    Vue-Element-Admin前端接入SSO的方法步骤

    本文主要介绍了Vue-Element-Admin前端接入SSO的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 基于Vue sessionStorage实现保留搜索框搜索内容

    基于Vue sessionStorage实现保留搜索框搜索内容

    这篇文章主要介绍了基于Vue sessionStorage实现保留搜索框搜索内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • vue中的vue-print-nb如何实现页面打印

    vue中的vue-print-nb如何实现页面打印

    这篇文章主要介绍了vue中的vue-print-nb如何实现页面打印,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

    Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

    这篇文章主要介绍了Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论