el-select中的el-option选中后显示的是图片

可以通过在el-option组件中设置slot来实现显示图片。具体实现方式如下：

1. 在el-option组件中设置slot属性，值为label。

2. 在label的slot中添加img标签，并设置src属性为图片的路径。

示例代码如下：

<el-select v-model="selected">
  <el-option label="Option 1" value="1">
    <template slot="label">
      <img src="path/to/image1.png" alt="Image 1">
    </template>
  </el-option>
  <el-option label="Option 2" value="2">
    <template slot="label">
      <img src="path/to/image2.png" alt="Image 2">
    </template>
  </el-option>
</el-select>

上述代码中，我们在el-option组件中添加了label的slot，并在其中添加了img标签来显示图片。注意要将图片的路径替换为正确的路径。

相关问题

el-select中的v-for下的el-option选中后显示的是图片

在使用`v-for`渲染`el-option`时，可以通过在`el-option`组件中设置`slot`来实现显示图片。具体实现方式如下：

1. 在`el-option`组件中设置`slot`属性，值为`label`。

2. 在`label`的`slot`中添加`img`标签，并设置`src`属性为图片的路径。

示例代码如下：

<el-select v-model="selected">
  <el-option
    v-for="(item, index) in options"
    :key="index"
    :label="item.label"
    :value="item.value">
    <template slot="label">
      <img :src="item.image" alt="Image">
      <span>{{ item.label }}</span>
    </template>
  </el-option>
</el-select>

上述代码中，我们通过`v-for`遍历`options`数组，渲染多个`el-option`组件，并在每个`el-option`组件中添加了`label`的`slot`，并在其中添加了`img`标签来显示图片。注意要将图片的路径存储在`options`数组中，并使用`:src`绑定到`img`标签的`src`属性上。

当选中一个el-option的时候触发下一个el-select中的el-option

您可以在第一个el-select的@change事件中获取当前选中的el-option的值，并将该值作为第二个el-select的options属性的值，以此来更新第二个el-select的选项。具体代码如下：

<template>
  <div>
    <el-select v-model="selectedOption1" @change="handleChange">
      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="selectedOption2">
      <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption1: '',
      selectedOption2: '',
      options1: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ],
      options2: []
    }
  },
  methods: {
    handleChange(value) {
      // 根据第一个el-select的选中值更新第二个el-select的选项
      if (value === 'option1') {
        this.options2 = [
          { label: 'Option 1-1', value: 'option1-1' },
          { label: 'Option 1-2', value: 'option1-2' }
        ]
      } else if (value === 'option2') {
        this.options2 = [
          { label: 'Option 2-1', value: 'option2-1' },
          { label: 'Option 2-2', value: 'option2-2' }
        ]
      } else if (value === 'option3') {
        this.options2 = [
          { label: 'Option 3-1', value: 'option3-1' },
          { label: 'Option 3-2', value: 'option3-2' }
        ]
      }
    }
  }
}
</script>

在上面的代码中，第一个el-select的选项为options1，当其选中某个el-option时，会触发@change事件，调用handleChange方法。在该方法中，根据第一个el-select的选中值更新第二个el-select的选项，然后第二个el-select的选项会重新渲染。