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) => {
|
const options = props.options.filter((option) => {
|
||||||
return option.label
|
if (option.label) {
|
||||||
.toLocaleLowerCase()
|
return option.label
|
||||||
.includes(keyword.toLocaleLowerCase());
|
.toLocaleLowerCase()
|
||||||
|
.includes(keyword.toLocaleLowerCase());
|
||||||
|
}
|
||||||
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (props.allowCreate) {
|
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 = () => {
|
const enableAutoSelect = () => {
|
||||||
if (!selectProps.autoSelect) {
|
if (!selectProps.autoSelect) {
|
||||||
return false;
|
return false;
|
||||||
|
@ -575,11 +587,6 @@ watch(
|
||||||
() => options.value,
|
() => options.value,
|
||||||
async (newOptions) => {
|
async (newOptions) => {
|
||||||
if (newOptions && newOptions.length > 0) {
|
if (newOptions && newOptions.length > 0) {
|
||||||
const selectedOption = await fetchSelectedOptions();
|
|
||||||
if (selectedOption) {
|
|
||||||
selectOptions.value = selectedOption;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (enableAutoSelect()) {
|
if (enableAutoSelect()) {
|
||||||
// Automatically select the first option when the selected value is empty.
|
// Automatically select the first option when the selected value is empty.
|
||||||
const autoSelectedOption = getAutoSelectedOption();
|
const autoSelectedOption = getAutoSelectedOption();
|
||||||
|
|
Loading…
Reference in New Issue