vbenjs / vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!
https://www.vben.pro
MIT License
25.17k stars 6.86k forks source link

apiCascader 设置defaultValue 界面不回显选择内容 #1787

Closed Hsensor closed 2 years ago

Hsensor commented 2 years ago

⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 Issue 将直接被关闭

描述 Bug

设置defaultValue 界面不回显选择内容

复现 Bug

api cascader 配置如下 { field: 'provinceCityArea', component: 'ApiCascader', label: '所在省市区', defaultValue: ['2','2','18'], componentProps: { api: standardQuery, resultField: 'body', labelField: 'name', valueField: 'id', immediate: true, onChange(e: any, selectedOptions: any) { console.log(222222, arguments) }, onDefaultChange(e: any, selectedOptions: any) { console.log('11111111'); provinceCityArea.value = selectedOptions.map((item) => { return { name: item.label, id: item.value, }; }); }, isLeaf(item) { return item.children && item.children.length; }, initFetchParams: { method: 'post', url: '/management/citys/action/getAddress/', params: {}, }, }, }, // 源码位置 function handleRenderDisplay({ labels, selectedOptions }) { console.log('selectedOptions', selectedOptions) console.log('unref(emitData)', unref(emitData).length) if (unref(emitData).length === selectedOptions.length) { return labels.join(' / '); } if (props.displayRenderArray) { return props.displayRenderArray.join(' / '); } return ''; }

// 控制台输出 image // 界面显示 cascader options 有默认选中,但是界面没有回显(unref(emitData).length 一直是0) image

系统信息

SKT1yang commented 2 years ago

我也遇到了,还以为数据原因

TrancyAlois commented 2 years ago

这个问题解决了没,我也遇到这个问题了。接口拿到数据之后,回显不了,但是下拉框的值是已经选中的状态了。 image

TrancyAlois commented 2 years ago

接口拿到数据之后找到一种方法来赋值。 接口查询的时候要把label的值给拿到,然后以数组的形式给update上去 image

Hsensor commented 2 years ago

接口拿到数据之后找到一种方法来赋值。 接口查询的时候要把label的值给拿到,然后以数组的形式给update上去 image 用cascader 做吧, apiCascader