[新增] select组件支持传入items属性用于渲染选择项
This commit is contained in:
parent
18ee8db079
commit
8b4d0abd3c
@ -157,6 +157,37 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</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 海量数据
|
::: title 海量数据
|
||||||
|
@ -29,6 +29,7 @@ export interface LaySelectProps {
|
|||||||
showEmpty?: boolean;
|
showEmpty?: boolean;
|
||||||
emptyMessage?: string;
|
emptyMessage?: string;
|
||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
|
items?: { label: string, value: string | number | [] | null, key: string }[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectRef = ref<null | HTMLElement>(null);
|
const selectRef = ref<null | HTMLElement>(null);
|
||||||
@ -232,6 +233,15 @@ provide("keyword", txt)
|
|||||||
<template v-if="!multiple && showEmpty">
|
<template v-if="!multiple && showEmpty">
|
||||||
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
||||||
</template>
|
</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>
|
<slot></slot>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,7 +10,7 @@ import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
|
|||||||
import { computed, inject, onMounted, Ref, ref } from "vue";
|
import { computed, inject, onMounted, Ref, ref } from "vue";
|
||||||
|
|
||||||
export interface LaySelectOptionProps {
|
export interface LaySelectOptionProps {
|
||||||
value: string | null | undefined;
|
value: string | null | undefined | number;
|
||||||
label: string;
|
label: string;
|
||||||
keyword?: string;
|
keyword?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
Loading…
Reference in New Issue
Block a user