tiny-vue
tiny-vue copied to clipboard
🐛 [Bug]: Cascader级联选择器在懒加载的情况+异步网络请求已选项的场景下下无法回显
Version
3.11.1
Vue Version
3.3.7
Link to minimal reproduction
<template>
<tiny-dialog-box
:visible="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<tiny-form :model="info">
<tiny-form-item label="分组">
<tiny-form-item label="设备分组">
<tiny-cascader
v-model="info.group"
:props="groupProps"
/>
</tiny-form-item>
</tiny-form-item>
</tiny-form>
<template #footer>
<tiny-button type="primary" @click="submit">提交</tiny-button>
</template>
</tiny-dialog-box>
</template>
<script setup>
import { defineEmits, reactive } from 'vue';
import {
TinyDialogBox,
TinyForm,
TinyFormItem,
TinyButton,
TinyCascader,
} from '@opentiny/vue';
const store = mainStore();
const info = reactive({
group: [],
});
function setData(_id){
//外部打开dialog时执行
//模拟网络请求,拉去已保存的选项
const {data} = fetch(_id)
Object.assgin(info, data)
}
const groupProps = {
lazy: true,
value: '_id',
label: 'name',
checkStrictly: true,
multiple: true,
async lazyLoad(node, resolve) {
if (node.level === 0) {
//模拟网络请求
const { data } = await fetch();
resolve(data);
} else {
//模拟网络请求
const { data } = await fetch()
resolve(data);
}
},
};
function submit() {
//网络请求保存所选项
}
defineExpose({
setData
})
</script>
Step to reproduce
选择一个二级及以上的选项后,保存选择结果,再次打开Cascader组件渲染并使用v-model绑定已选项,发现无法回显(使用options提前构建好选择项则可回显,但是由于业务需求只能选择懒加载)
What is expected
正常回显
What is actually happening
显示为空
What is your project name
TinyPro二开的后台管理系统
Any additional comments (optional)
在一个编辑基础信息的弹窗中,由于无法预估最终层级,与构建选项树的繁杂,则使用Cascader组件的懒加载功能对选择项进行加载。 选择完选择项后,会保存到数据库中,再次打开这个弹窗编辑时,希望能够将Cascader选择项在懒加载的模式下进行回显