可以通过使用label-slot来实现这个功能,具体方法如下:

  1. 在el-select中添加一个label-slot:
<el-select v-model="value">
  <template slot="label">
    <div class="select-label">
      <span>{{ label }}</span>
      <span class="select-tip">{{ tip }}</span>
    </div>
  </template>
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
  1. 在label-slot中添加一个包含label和tip的div,其中label和tip可以是组件的props传入的多个参数。

  2. 在样式中设置.select-label和.select-tip的样式。

这样就可以实现el-select下拉option头部显示提示,多个参数的功能了

vue el-select下拉 option头部显示提示多个参数

原文地址: http://www.cveoy.top/t/topic/hwt4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录