vue2 antdv tsx Cascader动态加载数据

tsx代码实现：

import { defineComponent, onMounted, reactive} from '@vue/composition-api'; 

export defalut defineComponent({
    name: 'Demo',
    setup() {

        const city = reactive({
            list: []
        })
        const initCityData = async(value: string) => {
            // 初始化cityList数据,调用api
            const oneLevel = await getCityList(value);
            oneLevel.map(item => {
                city.list.push(Object.assign(item, { isLeaf: false }))
            })
        }
        //根据点击事件获取下一级内容
        const cityLoadData = async(selectOptions) => {
            const targetOption = selectOptions[selectOptions.length - 1];
            const nextLevel = await getCityList(selectedOptions[0]?.value); // 调用下一级的api,保存下一级的数据
            targetOption.loading = true; 
            setTimeout( () => {
                targetOption.loading = false;
                targetOption.children = nextLevel; // 将获取的子级数据赋值给父级的children
                city.list = [...city.list]
            }, 1000)
        }
        onMounted(() => {
            // 初始化cityList数据
            initCityData('-1');
        }) 

          
        return {
            city，
            initCityData，
            cityLoadData
        }
    },
    render() {
        return (
              <div>
                   <a-cascader
                        v-model={this.city}
                        options={this.city.list}
                        load-data={this.cityLoadData}
                        placeholder="请选择"
                        field-names={{ label: 'name', value: 'value', children: 'children' }}/>
              </div>
        )
    }
})

cascader属性

v-model	值为数组，表示选中的值
options	初始化一级数据
load-data	根据选中的内容，触发该事件调用下一级
field-names	可以自定义label,value,children字段