theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): select 借助 tag-input 的 tagData 完成多选回显

Browse Source
This commit is contained in:
就眠儀式 2022-09-27 09:37:18 +08:00
parent af86d77e17
commit 0e8a649fa2
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package/component/src/component/select/index.vue
View File

@ -52,26 +52,30 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
}); });
const slots = useSlots(); const slots = useSlots();
const emits = defineEmits<SelectEmits>();
const searchValue = ref(""); const searchValue = ref("");
const singleLabel = ref(""); const singleValue = ref("");
const multipleValue = ref([]);
const openState: Ref<boolean> = ref(false); const openState: Ref<boolean> = ref(false);
const selectedItem: Ref<any> = ref([]); const selectedItem: Ref<any> = ref([]);
const options = ref<any>([]); const options = ref<any>([]);
const emits = defineEmits<SelectEmits>();
onMounted(() => { onMounted(() => {
if (slots.default) { if (slots.default) {
getOption(slots.default()); getOption(slots.default());
} }
Object.assign(options.value, props.items); Object.assign(options.value, props.items);
watch( watch(
selectedValue, selectedValue,
() => { () => {
if (multiple.value) { if (multiple.value) {
// tag-input 格式化 multipleValue.value = selectedValue.value.map((value: any) =>{
　　 return options.value.find((item: any) => item.value === value)
})
} else { } else {
singleLabel.value = options.value.find((item: any) => { singleValue.value = options.value.find((item: any) => {
return item.value === selectedValue.value; return item.value === selectedValue.value;
})?.label; })?.label;
} }
@ -122,7 +126,7 @@ provide("multiple", multiple);
> >
<lay-tag-input <lay-tag-input
v-if="multiple" v-if="multiple"
v-model="selectedValue" v-model="multipleValue"
:allow-clear="allowClear" :allow-clear="allowClear"
:disabledInput="true" :disabledInput="true"
> >
@ -135,7 +139,7 @@ provide("multiple", multiple);
</lay-tag-input> </lay-tag-input>
<lay-input <lay-input
v-else v-else
v-model="singleLabel" v-model="singleValue"
:placeholder="placeholder" :placeholder="placeholder"
:allow-clear="allowClear" :allow-clear="allowClear"
:readonly="true" :readonly="true"