解决element ui cascader 动态加载回显问题

elementui是基于vue2.0的组件库，专为开发人员、设计人员而设计的；可以快速搭建项目框架，集成了界面样式，先给大家介绍下element ui cascader 动态加载回显问题解决方法。

props: {
	lazy: true,
	async lazyLoad(node, resolve) {
	}
 }

但是当我赋值给cascader的时候，cascader却不显示了。只要重新加载下cascader组件就行。

<el-cascader v-if="isShowAddressInfo" v-model="form.addressInfo" :props="props"></el-cascader>

async updateAddress(data) {
   this.addressInfo=['广东省', '佛山市', '顺德区', '龙江镇']
   this.isShowAddressInfo = false;
   // 这里搞个定时器重新载入一下组件就可以触发组件拉取数据
   setTimeout(() => {
     this.isShowAddressInfo = true;
   }, 500);
 }

补充：史上最简单的el-cascader动态加载回显的解决办法

教大家最简单的element-ui的el-cascader级联选择器回显方法，特别是对动态加载时特别简单，不过确实有点辣眼睛。废话不多说了，就是使用el-cascader标签的:placeholder属性来回显内容。例如：我要回显示园区名称，代码如下：

<el-cascader
                v-if="isShowInfo"
                ref="parkCascader"
                v-model="parkOptions"
                :props="parkParams"
                @change="handleChange"
                :show-all-levels="true"
                :placeholder="form.parkName"
                style="width: 100%"
                clearable>
              </el-cascader>

原理很简单，就是在要回显时把form.parkName的属性内容准备好就行，不过，这样回显内容字体颜色比较淡，但无伤大雅！还有一点就，如果在修改el-cascader的内容时如果是清空的话，别忘了把form.parkName的内容也清空哦，不然显示内容会与实际不符。最后需要注意的话，虽然回显内容没有问题，但是parkOptions的值需要按套路正确操作。

到此这篇关于element ui cascader 动态加载回显问题解决方法的文章就介绍到这了,更多相关element ui cascader 动态加载回显内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解el Cascader懒加载数据回显示例

    正文 数据回显时保证 v-model props options 绑定的数据是正确的. 调用 props.lazyLoad 方法中的 resolve 回掉函数设置数据,示例来自el官网. 好多例子中说需要设置 options, 但是异步获取子节点,设置它是没有用的. <el-cascader :props="props"></el-cascader> <script> let id = 0 export default { data() { retu

  • 关于element中el-cascader的使用方式

    关于element中el-cascader的使用方式

    目录 element中el-cascader的使用 使用el-cascader报错解决 一.options为空的情况 二.编辑时给cascader赋值 三.点击了父节点后改变了cascader的options element中el-cascader的使用 从后端拿到arr数据结构: cityList: [     {         id: 1,         name: '北京',         child: [             id: 11,             name:

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

  • elementui中的el-cascader级联选择器的实践

    elementui中的el-cascader级联选择器的实践

    目录 一.效果 二.主要代码 一.效果 功能:使用接口调回来的数据,显示出可选的项,并开始有默认的选项值. 二.主要代码 <el-cascader ref="cascaderAddr" :options="rangeArr" :props="optionProps" v-model="plable" @change="handleChange3" style="width: 100%;&qu

  • Vue element-ui el-cascader 只能末级多选问题

    目录 element-ui el-cascader只能末级多选 扩展实现element-ui中el-cascader全选功能 实现思路如下 element-ui el-cascader只能末级多选 像这样的需求我们直接可以用css完成 /deep/.el-cascader-panel:first-child .el-checkbox{ display:none; } 扩展实现element-ui中el-cascader全选功能 重所周知,element-ui中的cascader中,没有对所有子节

  • 解决element ui cascader 动态加载回显问题

    elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&

  • vue2.* element tabs tab-pane 动态加载组件操作

    一.重要部分 1. 注意 <component :is=item.content></component> :表明模板 <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name" > <component :is=item.content>&l

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • Android 动态加载 so实现示例详解

    目录 背景 so动态加载介绍 从一个例子出发 so库检索与删除 动态加载so 结束了吗? ELF文件 扩展 总结 背景 对于一个普通的android应用来说,so库的占比通常都是巨高不下的,因为我们无可避免的在开发中遇到各种各样需要用到native的需求,所以so库的动态化可以减少极大的包体积,自从2020腾讯的bugly团队发部关于动态化so的相关文章后,已经过去两年了,相关文章,经过两年的考验,实际上so动态加载也是非常成熟的一项技术了. 但是很遗憾,许多公司都还没有这方面的涉略又或者说不知

  • Element中的Cascader（级联列表）动态加载省\市\区数据的方法

    element中的cascader其实是有动态加载次级选项的方法. 方法的原理是利用址(引用)传递,动态修改:options. var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: "tom"} http://element-cn.eleme.io/#/zh-CN/component/cascader#dong-tai-jia-zai-ci-ji-xuan-xiang 其中找到究竟需要在那层添加数据就变成

  • javascript中动态加载js文件多种解决办法总结

    一个比较全部在动态加方法 复制代码 代码如下: /*    动态加载js v1.0 by:dum     用法:src="webJsBase.js?load=a,b"    注:加载本目录下js*/var webJsBase = {    require: function(libraryName) {        document.write('<script type="text/javascript" src="'+libraryName+'

  • jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • swiper 解决动态加载数据滑动失效的问题

    两种解决方法 1.数据加载后进行swiper初始化 success:function(result){ var resultdata =eval("("+result+")"); if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = resultdata.currentPage; pageCount = resultdata.pageCount; var html = &q

随机推荐