ant design of vue Cascader 级联选择回显及传值

1.回显

<a-cascader :fieldNames="{ label: 'text', value: 'id', children: 'children' }" :options="optionsList" placeholder="请选择当前所在地区" @change="Onchange">
  <a href="">选择单位</a>
</a-cascader> 

loadDataorg(store.getters.adminInfo.org_id, 'table', this.searchValue).then(res => {
        this.loading = false
        if (res.code === 0) {
         this.optionsList = res.data
           localStorage.setItem(
            'optionsList',
            JSON.stringify(this.optionsList)
          )
        } else {
          notification.error({
            message: '系统提示',
            description: res.msg
          })
        }

回显很简单，无非就是从后端拿到树形数据，用fieldNames将字段对应就可以
也可以将级联放到input框中 注意后端返回的数据和cascader的数据格式对应上就可以

 2.传值

拿到cascader选中的那一条数据所对应的所有值可以用onchange事件中的属性selectedOptions

这个属性是onchange事件函数中被激发的属性，可以用它获取到选中数据所带的所有值。

 Onchange(value, selectedOptions) {
      this.valuelist = selectedOptions.pop()
      console.log('this.valuelist', this.valuelist)
      // pop是拿到级联中末尾的数据
    }