vue.js - 使用 el-select 自定义选定的值

Question

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

这些是使用插槽使用自定义 HTML 自定义的选项

这是选择后的外观，我需要使用自定义html按选项显示

Answer 1

我为此创建了一个原型：

源代码

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