mirror of https://github.com/halo-dev/halo
fix: resolve incorrect display of options in formkit selector with async data (#6629)
#### What type of PR is this? /kind bug /area ui /milestone 2.20.x #### What this PR does / why we need it: 为 formkit select 组件优化逻辑,目前将可以监听到 options 的变化,用于在变化时设置值。用于解决当 options 是异步获取,而 value 是初始设置时,无法显示正常的 label。 #### How to test it? 测试 options 比设置 value 晚时,数据能否正常显示 label。 #### Does this PR introduce a user-facing change? ```release-note 解决当 formkit select 组件中的 options 延迟设置时无法正常回显的问题。 ```pull/6628/head^2
parent
3c785cb7c8
commit
b02ab8d809
|
@ -43,9 +43,12 @@ const filterOptions = computed(() => {
|
|||
}
|
||||
|
||||
const options = props.options.filter((option) => {
|
||||
if (option.label) {
|
||||
return option.label
|
||||
.toLocaleLowerCase()
|
||||
.includes(keyword.toLocaleLowerCase());
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (props.allowCreate) {
|
||||
|
|
|
@ -555,6 +555,18 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => options.value,
|
||||
async (newOptions) => {
|
||||
if (newOptions && newOptions.length > 0) {
|
||||
const selectedOption = await fetchSelectedOptions();
|
||||
if (selectedOption) {
|
||||
selectOptions.value = selectedOption;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const enableAutoSelect = () => {
|
||||
if (!selectProps.autoSelect) {
|
||||
return false;
|
||||
|
@ -575,11 +587,6 @@ watch(
|
|||
() => options.value,
|
||||
async (newOptions) => {
|
||||
if (newOptions && newOptions.length > 0) {
|
||||
const selectedOption = await fetchSelectedOptions();
|
||||
if (selectedOption) {
|
||||
selectOptions.value = selectedOption;
|
||||
}
|
||||
|
||||
if (enableAutoSelect()) {
|
||||
// Automatically select the first option when the selected value is empty.
|
||||
const autoSelectedOption = getAutoSelectedOption();
|
||||
|
|
Loading…
Reference in New Issue