怎么获取el-option中选中的选项的id,和下标

问:

<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>