[新增] select组件支持传入items属性用于渲染选择项
This commit is contained in:
parent
18ee8db079
commit
8b4d0abd3c
@ -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 海量数据
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user