Vue element select下拉框为对象

最新推荐文章于 2023-08-25 17:55:45 发布

原创最新推荐文章于 2023-08-25 17:55:45 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

117 篇文章

订阅专栏

博客围绕路由传参的卷/期选择展开。业务中后端返回卷/期列表，可选择或通过前后按钮请求数据。介绍了两种方法，一是用ElementUI select时，通过标签定位到select框解决按钮切换值不更新问题；二是简单业务场景下，select加属性可将整个option作为值。

业务背景：

从路由传过来 volume/issue（卷/期）；
每个期刊有很多卷，卷里有很多期，后端返回卷/期列表；
当前 volume/issue可以通过 select下拉选择，也可通过 pre/next 前后按钮切换，后请求数据。

在这里插入图片描述

第一种方法：el-select

在这里插入图片描述

<div class="volumeBox">
  <el-select @change="handleSelect" placeholder="" v-model="current">
    <el-option
            :key="item.id"
            :label="'Volume ' + item.volume + ' · ' + 'Issue ' + item.issue"
            :value="item"
            v-for="item in selectOptions">
    </el-option>
  </el-select>
  <p class="color666 fontSize13 marginBottom15">Volume {{ journalData.volume}}・Issue {{ journalData.issue}}</p>
</div>

.volumeBox{
    position: relative;
    margin-bottom: 20px;
    p{ position: absolute;  top: 11px;  left: 15px; }
  }
::v-deep .el-select .el-input__inner{ border: none;}
::v-deep .el-select .el-input .el-select__caret{ color: #0093DD;}

一开始是打算用ElementUI select 把整个option（对象）作为值，尝试之后发现按钮切换 current值没有跟着切换，所以解决办法是用 <p>标签定位到 select框里，作为select框的值。

第二种：

若项目是简单的业务场景，可以这么写select 把整个option（对象）作为值: 需加 value-key属性

<el-select v-model="current" value-key="id">
    <el-option
            :key="item.id"
            :label="'Volume ' + item.volume + ' · ' + 'Issue ' + item.issue"
            :value="item"
            v-for="item in selectOptions">
    </el-option>
  </el-select>