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

60 阅读 0 评论 40 点赞

我是靠谱客的博主彪壮摩托，最近开发中收集的这篇文章主要介绍vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑，觉得挺不错的，现在分享给大家，希望可以做个参考。

业务场景

由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。

问题描述

使用Cascader级联选择器过程中主要存在的应用问题如下：

1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据；

2、提前加载数据后，点击相应父级节点出现数据重复等；

3、使用多个数据源相同的级联选择器，产生只能成功响应一个加载子级节点数据；

4、Vue中级联选择器相应数据完成加载，依然无法回显。

解决思路

Cascader级联选择器在需要回显的节点数据都存在的情况下，方可完成回显，首先想到的是把选中节点相关的数据全部获取到即可，遍历已选择的节点数据，遍历加载相对应的数据。(如果多个级联选择器使用同一个数据源，使用深拷贝将数据分开，避免产生影响)

由于是级联的数据懒加载，需要每一级相应的节点数据加载完进行下一步，故使用ES6中的Promise，将子级节点数据加载封装成一个Promise，待Promise执行完成，对列表数据遍历获取完成后返回即可。

getChildrenList (fid, level = 0) {

return new Promise((resolve, reject) => {

API.getCategory({ fid: fid, level: level }).then(

res => {

if (r

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。