element-ui 保存之后要显示label结果显示value

最新推荐文章于 2023-10-17 17:38:26 发布

原创最新推荐文章于 2023-10-17 17:38:26 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #elementui #vue.js

本文介绍如何在Vue项目中实现带有过滤功能的下拉选择框，并通过编码和昵称展示员工信息。同时讨论了当数据库存储编码而前端需要显示名称时的解决方案。

<el-select
  filterable
  :filter-method="filterSearchName"
  v-model="actionForm.forcer"
  value-key="id"
  placeholder="请选择执行人" clearable>
  <el-option
    v-for="item in staffInfo"
    :key="item.id"
    :label="item.nickname"
    :value="item.employeeNumber"
    style="min-width: 420px"
  >
    <span style="float: left;color: blue;font-weight: bold">{{ item.nickname }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
  </el-option>
  <slot>
    <el-pagination
      small
      background
      layout="prev,next,total"
      @current-change="changePageStaffInfo"
      :total="pageInfo.total"
    >
    </el-pagination>
  </slot>
</el-select>

如上述代码，假如我数据库存的是编码，页面要显示姓名。由于select 赋值的是编码。

那么此时我想要看姓名就不要加