el-select怎么同时获取选中项的name,value值
时间: 2023-07-16 22:15:31 浏览: 58
你可以使用 `v-model` 来绑定选中项的值,然后通过监听 `change` 事件来获取选中项的 `name` 值。例如:
```html
<el-select v-model="selectedValue" @change="handleSelectChange">
<el-option label="Option 1" value="option1" name="Option 1"></el-option>
<el-option label="Option 2" value="option2" name="Option 2"></el-option>
<el-option label="Option 3" value="option3" name="Option 3"></el-option>
</el-select>
```
在 Vue 实例中定义 `selectedValue` 和 `handleSelectChange` 方法:
```javascript
data() {
return {
selectedValue: ''
}
},
methods: {
handleSelectChange(value) {
const selectedOption = this.$refs.select.getOption(value);
const selectedName = selectedOption.name;
console.log(`selectedValue: ${value}, selectedName: ${selectedName}`);
}
}
```
这里通过 `$refs.select.getOption(value)` 方法来获取选中项的 `name` 值。注意要给每个 `el-option` 设置 `name` 属性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)