elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接。
以下是思考和开发的过程,不感兴趣可以直接看使用文档。
https://github.com/zhuss/lazy-cascadergithub.com
为什么要再写一篇呢?
当然不是思想觉悟有多高,还不是因为产品提的需求,产品哭哭唧唧的说:“类目太多啦,我要有一个搜索的功能。”
一开始我是拒绝的,毕竟上一次为了解决回显问题,耗费了一波本来就不多的头发,可是后来想一想,都是打工人,打工人和打工人应该是相亲相爱的一家人。
既然接下这个锅,那就想办法解决吧。
最开始,延续的原有的思路,既然回显可以,那搜索应该也不在话下,所以就埋头去研究官方文档,然后发现了 filter-method 和 before-filter 这两个方法。
尝试过之后就pass掉了filter-method,这个只是在选择的时候判断节点是否匹配,不适合动态请求和处理数据。
而 before-filter 方法是可以的,而且文档写的比较明确。
筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选
如果我们在方法中根据输入值去请求后端接口,拿到一组备选项,然后根据拿到的备选项动态更新我们的options参数,那么就可以在组件中筛选出我们想要的节点了吧,至于动态更新options的方法,可以同上一篇的回显逻辑类似。
按照这个思路,同事在一番倒腾之后,确实可以实现动态搜索的需求。
但是,这样处理是有不足的地方的。
1、产品设计的UI和ElementUI的组件并不一致,交互方式也不一样。
2、在动态更新options参数的时候会动态请求很多节点数据,而这些节点大部分都是不需要展示的。
所以,为了解决这两个问题,我又陷入的沉思,甚至想不看ElementUI手动撸一个组件(想想而已)。
那既然原有组件在UI上没办满足产品需求,那我们就自己写这个UI吧,顺着这个思路,那我们就需要用到一个关键的东西,级联面板。
因为上图UI的组成部分就这么几个东西。
- 输入框
- Popover 弹出框
- 搜索选择框
- 级联选择面板
级联选择面板的值仅仅是一个数据,也就是节点id的路径数组,那我们就必须根据这个值,然后遍历options得到对应的label的数组,显示在输入框中。
通过搜索拿到的数据也可以拿到一个节点的值。
那么我们只需要根据值的变化,动态请求需求展示的节点,获取到对应的label即可。
于是就有了最紧要的一段代码。
html
/**格式化id=>object */
解决了这个问题,基本上就已经实现了回显了。
至于搜索,直接用的ElementUI的组件autocomplete就可以了,最后在仿照cascader的参数封装这个组件的,把需要的参数暴露出去就可以了。
完整的代码看下
<
js
export
css
.lazy-cascader {display: inline-block;width: 300px;.lazy-cascader-input {width: 100%;background: #fff;height: auto;min-height: 36px;padding: 5px;line-height: 1;cursor: pointer;> .lazy-cascader-placeholder {padding: 0 2px;line-height: 28px;color: #999;font-size: 14px;}> .lazy-cascader-label {padding: 0 2px;line-height: 28px;color: #606266;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}.lazy-cascader-input-disabled {background-color: #f5f7fa;border-color: #e4e7ed;color: #c0c4cc;cursor: not-allowed;> .lazy-cascader-label {color: #c0c4cc;}> .lazy-cascader-placeholder {color: #c0c4cc;}}
}
.lazy-cascader-tag {display: inline-flex;align-items: center;max-width: 100%;margin: 2px;text-overflow: ellipsis;background: #f0f2f5;> span {flex: 1;overflow: hidden;text-overflow: ellipsis;}> .el-icon-close {-webkit-box-flex: 0;-ms-flex: none;flex: none;background-color: #c0c4cc;color: #fff;}
}
.lazy-cascader-panel {margin-top: 10px;display: inline-block;
}
其实,在自己封装组件的时候,也会不自觉的学习或者掌握一些东西,还是比较有趣的。
比如,为了解决多选的时候Popover 弹出框错位的问题,看了Element 的源码,发现Popover组件有一个updatePopper方法。
而且,封装组件需要考虑的问题比较多,倒不是说复杂,就是尽可能要全面。
好了,这一篇就写到这里,至于适用性,我也不能保证,至少很好的解决了cascader级联动态加载的不足,而且简化了动态加载的方法,很方便的实现了回显和搜索。
如果这正是你需要的,或者你预感自己会需要,可以先收藏,对于组件的不足之处也可以交流和讨论,以方便我去优化和改进。
elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了相关推荐
- cascader 动态加载 回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
- 动态加载 回显_ElementUI cascader级联动态加载及回显
先看图,你是否也遇到这个需求? 如果你正在焦头烂额,无脑抓瞎,那么你来对地方了,因为我将给你一个简单易懂的实现方案. 我也在网上翻了无数页答案,也照着别人的代码和思路尝试了,事实上并不能解决我这个棘手 ...
- Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
- 后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环 后台数组格式: 数组( ...
- cascader 动态加载 回显_Elementui cascader 级联选择器 动态加载数据,保存后回显的问题...
问题描述 使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区 省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组, ...
- ASP.NET中实现模版的动态加载
ASP.NET中,经常会使用到templates(模版)功能,比如在datagrid,datalist,repeater等控件中,使用templates,将会大大增强其功能.以往,我们一般是在设计程序 ...
- ASP.NET中实现模版的动态加载(转)
ASP.NET中,经常会使用到templates(模版)功能,比如在datagrid,datalist,repeater等控件中,使用templates,将会大大增强其功能.以往,我们一般是在设计程序 ...
- 加载中三个点点动态出现
js定时器方法 //html <div>加载中<span id="dot"></span></div>//js <script ...
- element cascader组件动态加载数据
最近碰到一个需要动态加载不同数据的联动功能,但是element官方给的例子比较抽象,所以花了一点时间摸索了一番,为避免下次踩坑,故记录下来. 代码示例如下: </template>< ...
最新文章
- props写法_简单理解vue中Props属性
- android 服务
- 计算机与操作系统基础小结
- linux7.0安装oracle乱码,Oracle Linux 7设置中文字符集
- Jenkins发布PHP项目之一自动化部署
- golang 中io包用法(一)
- PetShop 4.0知识点:加密和解密Web.config文件的配置节
- 使用 Capistrano 和写作 Ruby 迭代边缘部署
- [2018.05.05 T2] 互质2
- 数学建模——评价模型之TOPSIS
- matlab 平滑曲线连接_科研画图-率失真曲线图改进:散点连接成曲线并画出原散点的标记点(基于Matlab)...
- Dell 电脑插入耳机无声音或重启后有声音
- 微型计算机存储器cache,微型计算机存储器系统中的Cache是
- Java面试题(一)
- html怎么去除em的倾斜,HTML5 :b/strong加粗,i/em倾斜区别
- [转]FlightCaster如何预测飞机准点的
- ReactOS学习笔记--编译和调试
- jdk的安装、卸载与简介
- PEWIN32 PRO site key
- 当编程语言都变成女孩子,你会不会喜欢她们!