使用 el-select 自定义 selected 值

Question

我需要在 el-select 组件中自定义 selected 值，到目前为止，我只找到了有关自定义选项项的文档和示例，但没有找到值 once select编辑。 element-plus 这可能吗？如果是这样，请添加示例或为我指明正确的方向。

这些是使用自定义 HTML 使用插槽

自定义的选项

这是 selected 后的样子，我需要按照选项显示，使用自定义 html

Answer 1

我为此创建了一个原型：

Source Code

<template>
  <el-select
    v-model="selected"
    value-key="price"
    :placeholder="selected ? '' : 'Please Select'"
    clearable
  >
    <el-option v-for="item in options" :value="item">
      <div class="option-grid">
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
        <div class="price">{{ item.price }}</div>
      </div>
    </el-option>

    <template v-if="selected" #prefix>
      <div class="option-grid prefix">
        <div class="title">{{ selected.title }}</div>
        <div class="desc">{{ selected.desc }}</div>
        <div class="price">{{ selected.price }}</div>
      </div>
    </template>
  </el-select>
</template>

<script setup>
  import { ref } from 'vue'

  const options = Array.from({ length: 3 }, (_, i) => {
    const n = i + 1

    return {
      title: `Title ${n}`,
      desc: `Description ${n}`,
      price: `Price ${n}`,
    }
  })

  const selected = ref(null)
</script>

<style lang="scss">
  .el-select-dropdown__item {
    height: max-content;
  }

  .option-grid {
    display: grid;
    grid-template-areas:
      'title price'
      'desc  price';
    line-height: 1.2;
    .title,
    .desc {
      font-size: 14px;
    }
    .title,
    .price {
      font-weight: bold;
    }
    .title {
      grid-area: title;
    }
    .desc {
      grid-area: desc;
    }
    .price {
      grid-area: price;
      justify-self: end;
      align-self: center;
    }
    &.prefix {
      width: 196px;
      color: var(--el-text-color-regular);
      .title,
      .desc {
        justify-self: start;
        padding-left: 20px;
      }
    }
    &:not(.prefix) {
      .title {
        padding-top: 4px;
      }
      .desc {
        padding-bottom: 4px;
      }
    }
  }
</style>

Answer 2

我在 Vue2 中回答了 elements-ui 的类似问题。这是 Vue3 和 ElementsPlus 的更新 fiddle：https://jsfiddle.net/fmay24ru/8/

不幸的是，如果您想对结果进行样式设置，除了使用 #prefix 之外别无他法。但是，如果您只想显示其他或更多值，那么 :label 是最好的选择。

使用 el-select 自定义 selected 值

Customize selected value with el-select

vue.js

vue-component

vuejs3

element-ui

element-plus