| 修改日期 | 修改人 | 备注 |
| 2020-01-02 16:48:09[当前版本] | 闫梦洁 | 其他原因... |
| 2019-12-28 17:56:39 | 闫梦洁 | 格式调整 |
| 2019-12-27 17:47:29 | 闫梦洁 | 创建版本 |
使用 load-data 属性可以异步加载子选项，需要给数据增加 loading 来标识当前是否在加载中。
load-data 的第二个参数为回调，如果执行，则会自动展开当前项的子列表
代码示例：
<template>
<Cascader :data="data4" :load-data="loadData"></Cascader>
</template>
<script>
export default {
data () {
return {
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
]
}
},
methods: {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
}
}
}
</script>
实际过程中，我们会发现，当当前选中项子选项无内容时，展开子选项保持为上次内容，尝试了清楚子选项数组内容也没有起到作用后，然后采取了一种取巧的方法解决这个问题，在加载子选项内容的方法中，判断当前子选项数据是否没有数据，没有数据时，手动添加一条空内容，如下：
if (childArr.length <= 0) {
childArr = ["", ""];
}
item.children = childArr;
