[新增] select组件支持传入items属性用于渲染选择项

This commit is contained in:
castleiMac 2022-04-03 17:48:09 +08:00
parent 18ee8db079
commit 8b4d0abd3c
3 changed files with 42 additions and 1 deletions

View File

@ -157,6 +157,37 @@ export default {
}
</script>
:::
::: title 传入items属性进行选项渲染
:::
::: demo
<template>
<lay-select v-model="selected" :items="items">
</lay-select>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selected = ref('1');
const items=ref([
{label:'选项1',value:1,keyword:'选项xuanxiang1'},
{label:'选项2',value:2,keyword:'选项xuanxiang2'},
{label:'选项3',value:3,keyword:'选项xuanxiang3'},
])
return {
selected,items
}
}
}
</script>
:::
::: title 海量数据

View File

@ -29,6 +29,7 @@ export interface LaySelectProps {
showEmpty?: boolean;
emptyMessage?: string;
multiple?: boolean;
items?: { label: string, value: string | number | [] | null, key: string }[]
}
const selectRef = ref<null | HTMLElement>(null);
@ -232,6 +233,15 @@ provide("keyword", txt)
<template v-if="!multiple && showEmpty">
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
</template>
<template v-if="props.items">
<lay-select-option
v-for="(v, k) in props.items"
:key="k"
:value="v.value"
:label="v.label"
:keyword="v.keyword"
></lay-select-option>
</template>
<slot></slot>
</dl>
</div>

View File

@ -10,7 +10,7 @@ import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
import { computed, inject, onMounted, Ref, ref } from "vue";
export interface LaySelectOptionProps {
value: string | null | undefined;
value: string | null | undefined | number;
label: string;
keyword?: string;
disabled?: boolean;