element UI Cascader 级联选择器 动态加载次级选项

项目中有这样一个需求,省市区的选择,想到用到el-Cascader组件,动态加载次级选项。

现象

首先应获取所有的省,然后用户选择某个省,动态加载该省下所有的市。这个过程中数组某项被修改,视图未更新


"sendAddress" :options="provenceArray" 
  @active-item-change="handleItemChange" :props="props">

复制代码
// data
provenceArray: [],    
props:{
    label: 'areaName',
    value: 'areaId',
    children: 'cities'
},
复制代码
// ajax 获取省, 同时修改数组对象,每一项添加一个属性cities,并设置为空数组
getProvence() {
  $api.searchAreaInfo({
    parentId: 0
  }).then((res) => {
    this.provenceArray = res && res.data && res.data.data || []
    this.provenceArray.forEach((item,index)=>{
      this.provenceArray[index].cities = [] // 视图未更新
      // this.$set(this.provenceArray[index], 'cities', []) // right
    })
  })
}
复制代码
// 利用active-item-change事件,可以在用户点击某个省份时拉取该省份下的城市数据
handleItemChange(val) {
  let value = val[0]
  $api.searchAreaInfo({
    parentId: value
  }).then((res) => {
    let cities = res && res.data && res.data.data || []
    for(let i = 0; i < this.provenceArray.length; i++) {
      if(this.provenceArray[i].areaId === value) {
        this.provenceArray[index].cities = cities // 视图未更新
        // this.$set(this.provenceArray[i], 'cities', cities) // right
        break;
      }
    }
  })
}
复制代码

原因

你可能感兴趣的:(element UI Cascader 级联选择器 动态加载次级选项)