问:
<el-select v-model="addDataForm.channelId" placeholder="必选" @change="chooseChannel">
<el-option :label="item.title" :value="item.id" v-for="item in channelAndColumn">
</el-select>
怎么获取el-option中选中的选项的id,和下标?
回答:
要获取el-option
中选中的选项的id和下标,你可以在chooseChannel
方法中访问addDataForm.channelId
来获取选中的选项的id。要获取选项的下标,你可以通过遍历channelAndColumn
数组并检查每个元素的id是否与选中的id相匹配来找到对应的下标。
以下是一个简单的示例代码片段,演示如何在Vue中实现这一功能:
<template>
<el-select v-model="addDataForm.channelId" placeholder="必选" @change="chooseChannel">
<el-option :label="item.title" :value="item.id" :key="item.id" v-for="(item, index) in channelAndColumn"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
addDataForm: {
channelId: null, // 选中的选项的id
},
channelAndColumn: [
{ id: 1, title: 'Option 1' },
{ id: 2, title: 'Option 2' },
{ id: 3, title: 'Option 3' }
]
};
},
methods: {
chooseChannel() {
const selectedId = this.addDataForm.channelId; // 获取选中的选项的id
// 获取选项的下标
const selectedIndex = this.channelAndColumn.findIndex(item => item.id === selectedId);
console.log('Selected Id:', selectedId);
console.log('Selected Index:', selectedIndex);
}
}
};
</script>