实现ElementUI中el-select设置下拉框选项内容和选中项内容不一致的效果

25 阅读1分钟

20250918-103455.gif

    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <div> {{ item.labelLong }}</div>
    </el-option>
  </el-select>
      return {
        options: [{
          value: '选项1',
          label: '黄金糕',
          labelLong:'黄金糕0001'
        }, {
          value: '选项2',
          label: '双皮奶',
          labelLong:'双皮奶0001'
        }, {
          value: '选项3',
          label: '蚵仔煎',
          labelLong:'黄金糕0001'
        }, {
          value: '选项4',
          label: '龙须面',
          labelLong:'龙须面0001'
        }, {
          value: '选项5',
          label: '北京烤鸭',
          labelLong:'北京烤鸭0001'
        }],
        value: ''
      }
    }