iview级联选择组件的动态加载数据的使用与编辑回显

感慨就不多说了，心声万千，上代码。

1.页面组件，动态加载需要loadData,iview官网有写

<Cascader

:data="treeData"

:load-data="loadData"

filterable

change-on-select

v-model="formData.level_id"

></Cascader>

2.初始化数据加载

shux() {

this.$axios.post("url", data).then((res) => {

if (res.data.ret === 0) {

let dataList = res.data.data;

this.treeData = this.handleTreeData(customList);//调用数据处理的方法

}

});

},

3，处理数据的方法

handleTreeData(list) {

let arr = [];

if (list && list.length !== 0) {

list.map((item) => {

let obj = {};

obj.value = item.depart_id;

obj.label = item.depart_name;

if (item.has_child === 2) {//根据后台字段返回数值判断是否有子节点

obj.children = [];

obj.loading = false;

}

arr.push(obj);

});

return arr

}

},

4，子数据渲染（千万不要调用初始化获取数据的方法，数据会丢失），需要作异步处理

async loadData(item, callback) {

this.depart_id = item.value;

let params = {

depart_id: item.value,

};

let {data} = await this.$axios.post("/rmc/departs/get_list", params)

if (data.ret === 0) {

let dataList = data.data;

item.children = this.handleTreeData(dataList);

console.log(item.children);

}

callback();

},

5、编辑回显

这里需要注意，官网组件回显使用回调会出现问题

这里代码需要这样写

组件的展开与收回增加这个事件去判断是否需要回调

handleChange(value){

console.log(this.changeOnSelect)

this.changeOnSelect = value

 

},

数据回调处理

async loadData(item, callback) {

console.log(item)

this.depart_id = item.value;

let params = {

depart_id: this.depart_id,

};

 

let {data} = await this.$axios.post("/rmc/departs/get_list", params)

if(data.ret==0){

let dataList = data.data;

item.children = this.handleTreeData(dataList);

if(this.changeOnSelect){

callback();

}

 

}

},