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

Question

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

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

Answer 1

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

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

Answer 2

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

Answer 3

最终的办法还是后端提供一个所有省市区的接口，然后渲染到组件上，发现其实也没有那么卡顿，接口是比较快的，200ms左右吧。