<Cascader 
v-model="valueArray"
:data="dataObject"  
:load-data="loadData" 
placeholder="请选择所属地区" 
@on-change="changeData"></Cascader>

（1）dataObject: 以对象的形式保存‘级联’

{
    value: '01',
    label: '江苏',
    children: [
        {
            value: '010101',
            label: '南京',
            children: [
                {
                    value: '010101',
                    label: '夫子庙',
                }
            ]
        }
    }
}

（2）valueArray：以数组的形式保存选择的值（一般是具体名称的编号）；如果你选择：江苏/南京/夫子庙，则数组为[01,0101,010101];
（3）loadData：异步加载子项；在加载子项之前，会事先在created加载第一层数据，之后通过loadData加载子项

data(){
  return {
    dataObject:[], //级联数据
    valueArray：[], //选择值数组
  }
}
methods: {
  getFirstData(){ //请求加载第一层数据
    let that = this;
    var params ={pkid:'00',pzType:1};
    this.dataObject =[];

    this.$api.getData(params,function(res){
      if (res === 'error') return;

      for (var i =0;i<res.length;i++) {
        var wzpz = res[i];
        wzpz.value = wzpz.pzid;
        wzpz.label = wzpz.pzname;
        if(wzpz.ischild == 1){
          wzpz.loading = false;
          wzpz.children = [];
        }
        that.dataObject.push(wzpz); 
      }
    });
  },
  loadData(item, callback){ //异步加载子项
    item.loading = true;
    var params ={pkid:item.pzid,pzType:1};
    this.$api.getChildren(params, function(res) {
      item.loading = false;
      for (var i =0;i<res.data.data.length;i++) {
        var wzpz = res.data.data[i];
        wzpz.value = wzpz.pzid;
        wzpz.label = wzpz.pzname;
        if(wzpz.ischild == 1){
          wzpz.loading = false;
          wzpz.children = [];
        }
        item.children.push(wzpz); 
      }
      callback();
    });
  },
  changeData(value, selectedData){
    this.newObject.firstId =selectedData[0].pzid||'';
    this.newObject.firstName =selectedData[0].pzname||'';
    this.newObject.secondId =selectedData[1].pzid||'';
    this.newObject.secondName =selectedData[1].pzname||'';
    this.newObject.ThirdId =selectedData[2].pzid||'';
    this.newObject.ThirdName =selectedData[2].pzname||'';
    this.valueArray = value;
  }
},
created() {
  this.getFirstData();//请求加载第一层数据
}

(3)changeData:选择操作，该函数有两个参数value,selectDate;value是选择后的编号数组，直接赋值给valueArray；selectDate包含具体的对象值，提取出级联的值重新放在一个对象里，之后传给后端

  changeData(value, selectedData){
    this.newObject.firstId =selectedData[0].pzid||'';
    this.newObject.firstName =selectedData[0].pzname||'';
    this.newObject.secondId =selectedData[1].pzid||'';
    this.newObject.secondName =selectedData[1].pzname||'';
    this.newObject.ThirdId =selectedData[2].pzid||'';
    this.newObject.ThirdName =selectedData[2].pzname||'';
    this.valueArray = value;
  }

Cascader 属性

属性	说明	类型	默认值
data	可选项的数据源，格式参照示例说明	Array	[]
value	当前已选项的数据，格式参照示例说明	Array	[]
render-format	选择后展示的函数，用于自定义显示格式	Function	label => label.join(’ / ‘)
disabled	是否禁用选择器	Boolean	false
clearable	是否支持清除	Boolean	true
placeholder	输入框占位符	String	请选择
trigger	次级菜单展开方式，可选值为 `click` 或 `hover`	String	click
change-on-select	当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例	Boolean	false
size	输入框大小，可选值为`large`和`small`或者不填	String	-
load-data	动态获取数据，数据源需标识 loading	Function	-
filterable	是否支持搜索	Boolean	false
not-found-text	当搜索列表为空时显示的内容	String	无匹配数据
transfer	是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果	Boolean	false
element-id	给表单元素设置 `id`，详见 Form 用法。	String	-

Cascader 事件

事件名	说明	返回值
on-change	选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据	value, selectedData
on-visible-change	展开和关闭弹窗时触发	显示状态，Boolean

iview官方地址：https://www.iviewui.com/components/cascader

后记

如需重新渲染出已选的级联；只需重新组合出valueArray数组，

    var one = this.newObject.firstId;
    var two = this.newObject.secondId;
    var three = this.newObject.ThirdId;
    this.valueArray = [one,two,three];

例如值为[01,0101,010101]，选择框中便会显示：江苏/南京/夫子庙

Cascader 级联选择（详解）

后记

猜你喜欢