获取el-dropdown当前点击的选项的index

你可以通过监听 `command` 事件来获取 `el-dropdown` 当前点击的选项的 index。具体实现方式如下：

1. 在 `el-dropdown` 上添加 `@command` 事件监听器，如下：

<el-dropdown @command="handleCommand">
  <el-dropdown-menu>
    <el-dropdown-item command="1">选项一</el-dropdown-item>
    <el-dropdown-item command="2">选项二</el-dropdown-item>
    <el-dropdown-item command="3">选项三</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

2. 在 Vue 实例中添加 `handleCommand` 方法，并在该方法中获取当前点击的选项的 index，如下：

methods: {
  handleCommand(command) {
    console.log('点击了选项', command - 1);
  }
}

在上述代码中，我们通过 `command - 1` 来获取当前点击的选项的 index，因为 `command` 的值是从 1 开始的，而 index 的值是从 0 开始的。

相关问题

element的el-dropdown,动态添加选项

element的el-dropdown组件可以实现下拉菜单功能，而且可以通过动态添加选项来扩展菜单项。

要动态添加选项，首先需要在data中定义一个数组，用来存放菜单项的信息。例如：

data() {
  return {
    options: [
      {
        value: 'option1',
        label: '选项一'
      },
      {
        value: 'option2',
        label: '选项二'
      }
    ]
  }
}

然后，在el-dropdown组件中的el-dropdown-menu标签中使用v-for指令循环渲染菜单项。注意要绑定菜单项的value和label属性，以及给菜单项添加一个key属性：

<el-dropdown-menu>
  <el-dropdown-item
    v-for="(option, index) in options"
    :key="option.value"
    :command="option.value"
  >
    {{ option.label }}
  </el-dropdown-item>
</el-dropdown-menu>

由于菜单项是通过v-for动态生成的，所以可以在Vue实例中的方法中通过操作options数组来动态添加或删除菜单项。例如，可以在某个事件触发后添加一个新的菜单项：

methods: {
  addOption() {
    const newOption = {
      value: 'option3',
      label: '选项三'
    }
    this.options.push(newOption)
  }
}

这样就可以实现动态添加选项的功能了。需要注意的是，动态添加选项后，如果需要更新el-dropdown组件的下拉菜单，需要调用下拉菜单的updatePopper方法来进行更新。

this.$nextTick(() => {
  this.$refs.dropdown.updatePopper()
})

通过上述方法，就可以在element的el-dropdown组件中动态添加选项，并且实时更新下拉菜单。

修改element plus中el-select的.el-select-dropdown__item属性示例

修改element plus中el-select的.el-select-dropdown__item属性可以通过以下示例代码实现：

<template>
  <el-select v-model="selectedValue" :placeholder="placeholder" @visible-change="onVisibleChange">
    <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      placeholder: '请选择',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
      ],
    };
  },
  methods: {
    onVisibleChange(visible) {
      if (visible) {
        // 获取.el-select-dropdown__item元素集合
        const dropdownItems = document.querySelectorAll('.el-select-dropdown__item');
        // 修改.el-select-dropdown__item元素的样式
        dropdownItems.forEach((item) => {
          item.style.color = 'red';
        });
      }
    },
  },
};
</script>

在上面的示例中，我们通过在el-select中添加@visible-change事件来监听下拉框的显示和隐藏状态。在下拉框显示时，我们通过document.querySelectorAll('.el-select-dropdown__item')获取所有的.el-select-dropdown__item元素集合，并通过forEach遍历集合对元素进行样式修改。在这里，我们将元素的文字颜色修改为红色。