vue ElementUI级联选择器回显问题解决
目录
- 1. 分析问题
- 2. 解决问题
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+elementUI封装一个根据后端变化的动态table(完整代码)
实现了自动生成和插槽两个方式,主要把 el-table 和el-pagination封装在一起 效果图: 使用组件,启用自动生成 :auto="true" 自动生成-编辑 (包括请求已经实现了)新增和删除也是一样 ps:如有额外的按钮可以用插槽实现 查询的时候,只需要多返回下面数据,就可以自动生成列,和对应操作按钮 目录 table.vue <template> <div> <el-row v-if="auto"> <el-
-
vue3与elementui封装一个便捷Loading
目录 前言 实际使用 代码实现 前言 因为后台管理,总要写很多loading状态的变量,然后控制开启和关闭..我个人很讨厌写这种重复的代码..所以为了少写点这种变量,所以突发奇想封装一个,目前感觉还是挺好用的,没出啥bug...在表格中也能运用自如..喜欢的话,可以复制到你自己的项目拿去用,记得点个赞噢 实际使用 代码实现 import { reactive } from 'vue' import { ElMessageBox, ElMessage } from 'element-plus' i
-
vue+elementUI组件tree如何实现单选加条件禁用
目录 vue+elementUI组件tree单选加条件禁用 使用如上方法就可以完成实现单选 完结!付上一个完成的代码- vue+elementUI组件tree单选加条件禁用 elementUI tree:http://element.eleme.io/#/zh-CN/component/tree 官方给出的API还是挺全的,但是示例木有给全,有几个API的说明也不是很能理解- tree实现带选择框的要加上node-key="id" show-checkbox两个属性, <el-t
-
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
-
vue2+elementUI的el-tree的选中、高亮、定位功能的实现
在使用无选择框的el-tree时遇到的坑以及如何使用el-tree 最后附全部代码 ref="tree" ----> 必须写 accordion ----> 是否每次只打开一个同级树节点展开 看个人选择 default-expand-all ----> 默认打开全部节点 :data="leftData" ----> 必写 展示数据 @node-click="handleNodeClick" ----> 节点被点击时的
-
vue下的elementui轮播图自适应高度问题
目录 elementui轮播图自适应高度 elementui轮播图自适应的最简单实现 效果如下 拉伸一下 elementui轮播图自适应高度 翻了下api 没有找到对应的属性,所以这里用自定义方法来实现 <el-carousel :interval="5000" arrow="never" :height="autoHeight"> <el-carousel-item v-for="(banner, inde
-
vue ElementUI级联选择器回显问题解决
目录 1. 分析问题 2. 解决问题 1. 分析问题 [问题描述] 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model中的数据据重新放到 Cascader 级联组建后,会出现数据不回显的问题. [原因分析] 在级联组件中虽然在v-model中重新传入选中的数据,但采用了懒加载+远程数据的方式构建选项数据,此时级联组件的结构数据并未生成,此时仅有选中后的数据而没有选项数据,因此导致了级联选择器没有数据可供显示,也就导致了数据不回显
-
Element-UI中<el-cascader />回显失败问题的完美解决
目录 项目场景: 问题描述 原因分析: 解决方案: 一.多选赋值回显 二.单选赋值回显 总结 项目场景: 项目场景:接手了一些老项目,需要做一些日志相关的操作,从后台日志跳转到相应页面要带上原来的请求参数,涉及到一个回显问题 问题描述 Element-UI的 <el-cascader /> 这个组件,赋值之后它不会回显!而且后端返回的值只有最后一级的id,可是一个劲看文档.找资料浪费大半天,所以总结了一个比较完美的办法 原因分析: value 属性才是回显的关键,只有绑定了value属性才会让
-
Vue下拉框回显并默认选中随机问题
今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回
-
解决element ui cascader 动态加载回显问题
elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&
-
浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依
-
vue+elementUI下拉框回显问题及解决方式
目录 vue elementUI下拉框回显问题 正确回显格式应该是这样 而回显的确实这个值的id vue下拉框回显映射 单选框 多选框 级联框 总结 vue elementUI下拉框回显问题 在开发过程中,总会做到修改功能,但是在修改回显的时候,发现下拉框始终回显的是id而不是文本 下面看案例 正确回显格式应该是这样 而回显的确实这个值的id 原因是因为在给select复制的时候没有重新渲染,一开始我的编辑回显方法是这样 // 编辑回显 edit() { // 通过选中id查询信息 axios.
-
element tree树形组件回显数据问题解决
目录 1.当el-tree 从后台拿到数据动态回显展示出来时,只要有一个父节点,则下面的所有子节点全部被勾选了 2.解决方法代码如下 总结 解决vue+element tree组件 回显数据时有一个父节点数据下面子节点就都会被选中 1.当el-tree 从后台拿到数据动态回显展示出来时,只要有一个父节点,则下面的所有子节点全部被勾选了 如图所示: 后台返回的回显数据只有33(父节点组织管理)45(子节点个人管理),但是组织管理下的所有子节点都被回显选中. 2.解决方法代码如下 先在组件上绑定ch
-
vue修改数据的时候,表单值回显不正确问题及解决
目录 修改数据的时候,表单值回显不正确 vue简单实现数据回显 1.回显输入框html 2.data 定义的数据 3.计算属性判断按钮状态 4.对*数据做处理 修改数据的时候,表单值回显不正确 如果在修改数据的时候,发现表单的值回显不正确,每次修改,都是第一次修改的值,这个可能是你的代码有问题. 如果出现上面的问题,请检查 (1) prop的数据是否绑定正确 <el-col :span="24"> <el-form-item label="图标"
-
基于vue2.0实现的级联选择器
基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联 web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况: 单个级联 (下拉选择框,单选) 单个级联 (多项选择) 二级联动 (省份和城市联动) 三级联动 (省市区联动) 在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备. 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数
-
详解关于element级联选择器数据回显问题
element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on