Vue: el-select选项中如何显示label之外的其他信息

Vue el-select选项显示额外信息方法

我是飞鸟呀

于 2025-04-24 14:09:37 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/147477308

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

实现如下效果：在选项旁边显示额外的信息，比如人员所属部门，或者产品的价格信息等。

如下：添加span来显示，且可以为不同的span定义不同的style，以实现文字灰度上的差异。

<el-select v-model="scope.row.nickName"
           filterable style="width: 70%"
           @change="(newVal) => handleUserChange(newVal,scope.$index)"
            >
              <el-option
                v-for="item in userOptions"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId">
                <span style="float: left">{
  
  { item.nickName }} </span>
                <span style="float: left; color: #8492a6; font-size: 13px"&g

了解本专栏