iView级联选择器Cascader回显慢的问题

简单小结一下，iView在日常开发中所遇到的一点小问题，
今日简单聊聊iView级联选择器Cascader的使用心得：

[参考资料：iView ]

1.存在问题:

Cascader选择器在回显数据时会出现加载缓慢的状况及相应不及时，数据量略微大一点，会影响客户的体验感。

分析问题所在：不是接口请求与诸多循环遍历影响的时长问题，而是Cascader级联选择器回显机制问题。

2.代码：

a,基本属性：

data() {return {tableLoading: false,columns: [{title: "策略",align: "center",slot: "strategyItem",minWidth: 300,},],tableList: [{keyword: "其它",strategyItem: [],},],showList: false,configObj: {keyword: "",strategyName: "",operator: "CM",strategyType: "2", strategyChannelDetails: [],id: "",strategyItem: [],},strategyChannelList: [],operatorList: [],data: [],};},

b,获取表格数据tableList

 getConfig(configId) {this.tableLoading=true;this.$axios.request({url: "/XXy/",method: "get",params: {id: configId,},}).then((res) => {if (res.data.code === 0) {let {strategyName,operator,strategyType,strategyChannelDetails,id,} = res.data.data;this.configObj = {strategyName,operator,strategyType,strategyChannelDetails,id,};this.getstrategyItemList(this.configObj.operator);let arr = this.configObj.strategyChannelDetails.map((item) => {return {keyword: item.keyword,strategyItem: [item.type, item.strategyItemId + ""],strategyName: (item.type==='0'?"单一":(item.type==='1'?"分省":" "))+" / "+item.strategyItemName,};});arr.length && (this.tableList = arr);this.tableLoading=false;} else {this.$Message.error(res.data.data);this.tableLoading=false;}this.disabled = true;},(err) => {this.$Message.error("获取数据失败");this.tableLoading=false;});},

c,获取字典数据data

d,表格中插入组件Cascader

 <template slot-scope="{ row, index }" slot="strategyItem"><Cascader v-if="showList":data="data":key="'strategyItem-' + index"clearabletransfer@on-change="(value, selectedData) => {changeRowData(index, row, value, selectedData);}"v-model="row.strategyItem"></Cascader><Input v-if="!showList":key="'strategyName-' + index"transfer   v-model="row.strategyName"@mouseover.native="changeList()"></Input></template>

e,把获取的字典数据data绑给Cascader，因为Cascader组件渲染绑定的数据是树形数组类型的数据，所以字典数据data是一个符合官网示例那样的数组。

tableList的strategyItem也是一个数组，只不过是过滤后的类型及属性对象数组。这个只是为了在回显时，在表格中通过其自身索引及对应属性，回显出字典数据data中的值。

在这过程中，会出现数据加载缓慢问题。尝试了很多办法，一些解决方法有点用，但不够合理确切。

参考解决方法：
https://juejin.cn/post/7028842100363886600

最终不断摸索，来了一波移形换影，偷天换日，完美解决此类问题。

3，解决方案：

进入页面时：通过将过滤好数据绑定给Input输入框，当需要修改或者点击输入框时，
让其级联组件Cascader显示出来。
因为Cascader不能直接回显变量，而将过滤好的数据给
input也不能通过级联下拉修改添加数据，两个切换，恰好完美弥补彼此缺点，解决响应慢的问题。
而级联组件和输入框相差只有后面的图标，我们可以通过鼠标移入悄然解决，纵享丝滑。

这里用到了鼠标移入事件
mouseover
在vue中这样使用mouseover会一直不显示。

@mouseover="changeList"

所以这样使用

@mouseover.native="changeList()"

鼠标移入，或者点击其他添加或删除方法触发
Input回显组件隐藏，可以点击修改添加等其他方法时Cascader显示,至此完美解决。

iView级联选择器Cascader回显慢的问题相关推荐

element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
el-cascader组件 :(返回结果的)格式转化有时候会报错:TypeError: thsAreaCode.replace is not a function (bug截图如下) 说白了就是该组 ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
element-UI级联选择器(Cascader)获取label值 - 代码篇
element-ui级联选择器(Cascader)获取级联对象 :主要是想获取:label值.value值效果图预览: 代码参考如下: <el-cascaderref="cascad ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
elementui级联选择器Cascader不触发change事件
使用级联选择器时,需求是选择最后一级,同时选择之前的父级标签,看这个需求明明很简单,人家自带的组件就是这样,但是却一直无法触发绑定的change事件,只有添加props.checkStrictly = ...
关于级联选择器Cascader数据太多会改变列表大小的问题
1.打开后台控制台中的---元素栏,通过做左侧的标志找到级联选择器的部分 2.然后你在筛选器--element-style{}中输入 max-height:400px(你自己觉得最合适的高度)看看页面 ...
iView使用tree和回显
<Tree :data="data" ref="tree" show-checkbox multiple></Tree> getChec ...
elementui级联选择器懒加载回显亲测有效
记录一下自己挣扎迷茫的一天,如果有同样遇到级联选择器要回显的同志,希望你早点看到这篇日志.进入正题,如何在懒加载上回显. //组件上写法 <el-cascader:options="l ...
antd——a-tree-select 树形选择控件与 a-cascader 级联选择器的对比——技能提升
在遇到省市区多级联动数据的时候,经常会用到的就是 a-cascader级联选择器. 1.级联选择器的使用方法 1.1 需要指定数据源--options 数据结构是对象数组嵌套--value/lab ...

iView级联选择器Cascader回显慢的问题

iView级联选择器Cascader回显慢的问题相关推荐

最新文章

热门文章