mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-09 22:58:03 +08:00
db664b033b
* docs(components): [select] create example using 'value-key' attribute Example using option type with same value of 'label' property - Use 'id' property of option as value of 'value-key' attribute * docs(docs): apply 'value-key' example to 'select.md' Remove the existing 'tip' and add it to the description --------- Co-authored-by: FE_강명구 <mg_@ex-em.com>
34 lines
781 B
Vue
34 lines
781 B
Vue
<template>
|
|
<div class="m-4">
|
|
<el-select v-model="value" value-key="id" placeholder="Select">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
<p>
|
|
selected option's description:
|
|
{{ value ? value.desc : 'no select' }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
type Option = {
|
|
id: number
|
|
label: string
|
|
desc: string
|
|
}
|
|
const value = ref<Option>()
|
|
const options = ref([
|
|
{ id: 1, label: 'Option A', desc: 'Option A - 230506' },
|
|
{ id: 2, label: 'Option B', desc: 'Option B - 230506' },
|
|
{ id: 3, label: 'Option C', desc: 'Option C - 230506' },
|
|
{ id: 4, label: 'Option A', desc: 'Option A - 230507' },
|
|
])
|
|
</script>
|