el-select gets all (item) data of the currently selected object

Scenes

When applying a drop-down box, only copywriting is enough for interface display, but we may need multiple fields to pass parameters to elementUIthe backend . For example, if the following backend interface returns data:el-select

const optionsList = [
	{
    
    
		name: '',
		id: '',
		class_name:'',
		class_type: '',
		english_name: '',
		is_default: false,
		online_worker_count: 0,
		time: "2022-12-26 16:30:21",
	}
	...
]

That is, you need to obtain all data of the object corresponding to the currently selected name.

accomplish

Use the official attributes of element:

value-key is the key name that uniquely identifies value. It is required when the bound value is an object type.

<el-form-item v-for="(workerItem, index) in form.data.worker_groups" :key="'workerGroups_'+ index"
                          style="margin-top: 10px">
	<el-select v-model="form.data.worker_groups[index]" value-key="name" filterable clearable placeholder="请选择">
		<el-option
		   v-for="item in data.workerGroups"
		     :key="item.id"
		     :label="item.name"
		     :value="item">
		 </el-option>
	</el-select>
</el-form-item>

important point

• el-select's v-model binds the current object
• If you cannot bind workerItem directly, an error will be reported. Use form.data.worker_groups[index]the index to obtain the current object.
• The value of el-option is bound to the current object we want to obtain.
• The value of value-key can correspond to the label