当前位置: 首页 > 知识库问答 >
问题:

javascript - Element-UI Cascader组件省市区多选相关?

纪晨
2024-02-26

有个需求要求一个组件能进行省市区的多选,我把目标投向了element-ui官网的Cascader组件,该组件支持多选。省市区的获取有两种方式,一种是后端直接返回完整的树形结构,数据量有点大(现在要求的是三级级联,估计区有2000多个),估计页面渲染会有卡顿,第二种是通过懒加载获取,但是回显可能存在这种情况就是,如果当时多选时选的数据有点多,那么回显时会通过懒加载调级联接口可能也会很多(因为回显需要对应的树形结构),也会很卡顿,有没有别的实现方式呢?

有没有别的方式可以实现这种需求?

共有2个答案

公冶俊达
2024-02-26

后端直接返回完整的树形结构,但是你并不一定需要一次性全部渲染,你可以自己组装需要渲染的数据去渲染的。
比如说把后端返回的省市区数据存在不参与页面渲染的变量中。然后在数据回显时按需取值赋值给 Cascader 组件绑定的变量就行了,可以不需要依次请求接口。

不过一般来说 Cascader 回显时也是一级一级调用的请求,我的理解中并不会造成卡顿。除非说你选择了几十上百个地区节点。所以可能是你们回显调用的级联接口并不是通过上级 key 查询对应的下级数据,直接返回了整棵树?但是也不应该,不都是用的 Cascader 组件默认的数据回显么,自己重写了?

锺高翰
2024-02-26

造成页面卡顿不一定是所谓的数据量大造成,而是因为vue给数据进行遍历进行了数据双向绑定,耗时产生在这里。一般来说这种数据都是展示,不太会有修改的操作,你可以针对这个树结构,将数据不进行双向绑定,可以使用 Object.freeze(xxx),也有可能提高你页面渲染。

 类似资料:
  • 使用省市区选择器,你需要在 sm.js 和 sm.css 之后额外引入如下JS文件: <script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script> 省市区选择器也是一个定制的picker,因此他的用法和picker完全一致,请参

  • 介绍 省市区三级联动选择,通常与弹出层组件配合使用。 引入 import { createApp } from 'vue'; import { Area } from 'vant'; const app = createApp(); app.use(Area); 代码演示 基础用法 要初始化一个 Area 组件,你需要传入一个 area-list 属性,数据格式具体可看下面数据格式章节。 <v

  • 使用指南 组件介绍 Area 组件用于省市区选择,默认包装在 popup 弹出层中显示。 引入方式 import { Area } from 'feart'; components:{ 'fe-area':Area } 代码演示 默认 Area <div class="fe-center"> <fe-area v-model="value" :list="list" /> </d

  • vant 省市区选择组件,数据如何下载? 只能通过这种包文件的形式下载吗?可以直接下载js文件吗?

  • 中国省市地区选择器。两种选择类型,省市和省市地区 [Code4App.com]

  • 本文向大家介绍Vue.js组件tree实现省市多级联动,包括了Vue.js组件tree实现省市多级联动的使用技巧和注意事项,需要的朋友参考一下 小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动。 调用示例:  组件代码: 效果图: 本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。 以上就是本文的全部内容,希望对大家的学习有所帮助,