使用 el-select 自定义选定的值

Posted 2023-02-23

【中文标题】使用 el-select 自定义选定的值

【英文标题】：Customize selected value with el-select

【发布时间】：2021-10-12 07:34:20

【问题描述】：

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

这些是使用插槽通过自定义 html 自定义的选项

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

【参考方案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>

【讨论】：

我需要自定义/添加 html 到所选选项。您的解决方案是在所选值更改后执行某些操作

@GeneralElectric 您能否举例说明您希望以哪种方式更改所选选项？

请检查我的编辑，我已包含图片

@GeneralElectric 不幸的是，我不认为这是可以实现的，因为所选选项没有专用插槽，最好的办法是在选项标签中包含详细信息。

@GeneralElectric 我重新阅读了文档，发现prefix 插槽可能适合这个，我已经更新了我的答案，请参见上文。