Vue使用级联级联选择器数据回显会遇到哪些问题

  

Vue使用级联级联选择器数据回显会遇到哪些问题?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

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

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

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

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

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

<强>解决思路

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

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

 getChildrenList (fid,级别=0){
  返回新的承诺((解决,拒绝)=比;{
  API。getCategory({支撑材:支撑材,级别:级别}),然后(
  res=比;{
  如果(res) {
  如果(res.code===0,,res.result) {
  解决(res.result)
  }
  }
  }
  )
  })
  },
  这让twolist=etChildrenList (codeArr [0], 1)
  这让thirdlist=etChildrenList (codeArr [1], 2)
  的承诺。所有([twolist, thirdlist))((数据)=比;{
  …
  })

Vue2的双向数据绑定使用ES2015中的Object.defineProperty(),该方法无法检测到数组中的深层数据变化,需要使用美元来设置触发列表数据的更新。

<强>一个三级级联选择器,首先获取全部一级类目,二级类目和三级类目采用懒加载,获取数据的步骤如下:

1,获取全部一级类目;

2,由于使用异步数据加载,使用承诺进行数据请求;

3,根据已选择的类目获取相关联的二级类目和三级类目;

4,数据请求完成,使用美元组触发列表数据更新,在美元nextTick中完成数据你回显。

<强>相关代码

& lt; template>   & lt; div>   & lt; el-cascader   占位符=扒胙≡袼衾嗄俊?   :选项=癱ategoryList"   :show-all-levels=癴alse"   v模型=癱ategory"   collapse-tags   :道具=皗   多个:没错,   价值:& # 39;代码# 39;   标签:& # 39;名字# 39;   孩子们:& # 39;孩子# 39;   道具,   }“;/比;   & lt; el-cascader   占位符=扒胙≡袼衾嗄俊?   :选项=皊econdCategoryList"   :show-all-levels=癴alse"   v模型=皊econdCategory"   collapse-tags   :道具=皗   多个:没错,   价值:& # 39;代码# 39;   标签:& # 39;名字# 39;   孩子们:& # 39;孩子# 39;   道具,   }“;/比;   & lt;/div>   & lt;/template>      & lt; script>   出口默认{   数据(){   返回{   categoryList: [],   类别:[],   secondCategoryList: [],   secondCategory: [],   道具:{   懒惰:没错,//checkStrictly:真的,//父子级节点关联   异步lazyLoad(节点、资源){   const{水平、数据}=节点   如果(数据,和数据。孩子,,data.children。长度!==0){   返回资源(节点)   }   如果(数据,和data.leaf) {   返回资源([])   }   const lv3Code=数据及# 63;数据。代码:零   setTimeout(()=比;{   lv3Code,,API。getCategory({支撑材:lv3Code,级别:级别}),然后(   res=比;{   如果(res) {   如果(res.code===0,,res.result) {=res.result const节点。地图(项=比;({叶:水平===2,…项目,孩子们:[]}))   数据。孩子=节点   资源(节点)   其他}{   资源([])   }   }   }   )   },500)   }   }   }   },   安装(){   this.getCategory ()   this.initData ()   },   方法:{   initData () {   让_that=这   异步获取编辑数据…   不要犹豫(结果=比;{//此处仅处理结果中firstCategory和secondCategory均不为空的情况   让firstTemp=_that.getCategoryListFormat(结果。firstCategory _that.categoryList)   让secondTemp=_that.getCategoryListFormat(结果。secondCategory _that.secondCategoryList)   让promiseArr=[firstTemp, secondTemp]。过滤器(_=比;_)   Promise.all (promiseArr) ((formatRes)=比;{//触发列表数据响应   设置(_that美元。categoryList, formatRes [0] .tragetCategoryList)   设置(_that美元。secondCategoryList, formatRes [1] .tragetCategoryList)   _that。nextTick美元(()=比;{//数据加载完成后,在下一次循环中回显   _that。类别=formatRes [0] .category   _that。secondCategory=formatRes [1] .category   })   })   })   },   getCategoryListFormat (categorySelectList tragetCategoryList) {   返回新的承诺((解决,拒绝)=比;{   const类别=[]   让国旗=0   让counter=categorySelectList.length      categorySelectList。forEach (v=比;{//遍历已选择节点数据   const>从& # 39;进口反应反应# 39;;   进口{按钮时,表单、消息、行标签,选择、坳}& # 39;antd& # 39;;   进口的要求“. ./. ./. ./. ./跑龙套/request";   const FormItem=Form.Item;   const选项=Select.Option;      类CarSeriesCascader延伸反应。组件{      构造函数(道具){   超级(道具);   这一点。状态={   defaultBrandList: [],   selectedCarModelList:道具。carModelList, # 63;道具。carModelList: [],   brandCode:空,   carModelList: [],   carId:空,   modelCode:空,   modelName:零   }   }      componentDidMount () {   我们承诺=请求(“/汽车/getBrandList”);   的承诺。然后(结果=祝辞{   如果(结果!=null) {   this.setState ({   defaultBrandList:结果   });   其他}{   message.error(“获取品牌数据失败“);   }   })。抓住(呃=比;{   message.error(“获取品牌数据失败“);   });//this.setState ({//selectedCarModelList:(this.props。carModelList, # 63;this.props。carModelList: [])//});   this.handleChange (this.state.selectedCarModelList);   }      getLimitList=(selectedCarModelList)=比;{   让limitList=selectedCarModelList.map ((carModel、索引)=比;{   让limitItem={};   limitItem。modelName=carModel.modelName;   limitItem。modelCode=carModel.modelCode;   limitItem。carId=carModel.carId;   返回limitItem;   });   返回limitList;   }      addCarModel=()=比;{   让addCarModel={};   让selectedCarModelList=this.state.selectedCarModelList;//选中车型号   如果(this.state。carId !==null) {   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

Vue使用级联级联选择器数据回显会遇到哪些问题