vue select 获取value和lable操作
在Vue.js框架中,`<Select>`组件是一个常用的下拉选择控件,它通常用于创建交互式的表单。本文将详细介绍如何在Vue中使用`<Select>`组件来获取选定选项的`value`(值)和`label`(标签文本)。在实际应用中,我们可能需要同时获取选项的唯一标识(例如ID)和其对应的描述(例如名称),以便于后续的数据处理和展示。 让我们看看提供的代码片段: ```html <FormItem label="物资类型:" prop="supplyType"> <Select v-model="detailData.supplyType" :label-in-value="true" placeholder="请选择物资类型" @on-change="getVendorId"> <Option v-for="item in supplyTypeList" :value="item.id" :key="item.id" :label="item.dictionaryName">{{ item.dictionaryName }} </Option> </Select> </FormItem> ``` 这里,`<Select>`组件的`v-model`绑定到`detailData.supplyType`,用于存储选定选项的值。`:label-in-value="true"`是一个关键属性,它表示在选择选项时,返回的对象不仅包含`value`,还包含`label`。`@on-change`监听事件触发`getVendorId`方法,用于处理选择变化。 ```javascript getVendorId: function (val) { let that = this; that.detailData.supplyType = val.value; // 获取label that.detailData.supplyTypeName = val.label; // 获取value } ``` 在`getVendorId`方法中,`val`参数包含了选定选项的信息。`val.value`代表`value`,即`item.id`,而`val.label`则代表`label`,即`item.dictionaryName`。 数据源`supplyTypeList`是一个对象数组,每个对象包含`id`和`dictionaryName`字段,它们分别作为`value`和`label`的来源。 ```json supplyTypeList = [ { "id": 45, "dictionaryName": "办公用品", "dictionaryCode": "nofficeSupplies" } ] ``` 补充知识:在Vue中,特别是使用第三方库如Element UI时,获取`<Select>`组件选中项的`value`和`label`的操作类似。以下是一个使用Element UI的例子: ```html <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> ``` 在`methods`中: ```javascript handleChange(value) { console.log('当前选择:', value); // 如果选项对象结构为 { value: 'id', label: 'name' } console.log('ID:', value.id); // 获取ID console.log('Name:', value.name); // 获取Name } ``` 在这个例子中,`@change`事件触发`handleChange`方法,`value`参数是选中项的完整对象,可以直接访问其`id`和`name`属性。 总结起来,在Vue中处理`<Select>`组件时,通过设置`v-model`和`:label-in-value`(或Element UI的`:value-key`),我们可以方便地获取选中项的`value`和`label`。这在处理复杂表单数据或者需要与后台交互时尤其有用。记得确保选项数据源与组件属性保持一致,以保证正确地绑定和显示选项。