element框架select选择器绑定对象设置

select选择器如果绑定value值就是我们所需要的数据时，可直接绑定value值，当我们需要获取value之外的其他值时可绑定对象格式；

select涉及API

Option涉及API

//vue3
<template>
	<div class="main-container">
		<el-form :model="formData" label-width="80px" inline>
			<el-form-item label="选择类型" prop="name">
				<el-select v-model="selectValue" placeholder="请选择" clearable value-key="value" @change="selectChange">
					<el-option v-for="item in listData" :key="item.id" :label="item.name" :value="item"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="类型描述" prop="desc">
				<el-input disabled v-model="formData.desc"></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { ref } from 'vue';
const formData=ref({
	name: null,
	id:null,
	desc:null
});
const selectValue=ref('');
const listData = ref([
	{ id:1, value: '125', name: 'Option1', desc: 'Option1 - 230506'},
	{ id:2, value: '105', name: 'Option2', desc: 'Option2 - 230507'},
	{ id:3, value: '215', name: 'Option3', desc: 'Option3 - 230508'},
	{ id:4, value: '415', name: 'Option4', desc: 'Option4 - 230509'},
])
function selectChange(val){
	if( !val ){
		console.log('val');
		formData.value.name = null;
		formData.value.id = null;
		formData.value.desc = null;
	}else{
		formData.value.name = selectValue.value.name;
		formData.value.id = selectValue.value.id;
		formData.value.desc = selectValue.value.desc;
	}
}
</script>