侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 42 篇文章
  • 累计创建 37 个标签
  • 累计收到 351 条评论

目 录CONTENT

文章目录

el-select 同时获取选中的 label 和 value

M酷
2022-08-11 / 1 评论 / 2 点赞 / 303 阅读 / 1,357 字 / 正在检测是否收录...

背景

在业务开发场景中,我们会大量的使用到各种表单组件,其中 el-select 是使用频率最高的组件之一。
此时,有个场景需要 el-select 能够返回当前选中的 valuelabelvalue 用于存储,label 用于展示。
但是 el-select 并不支持直接去获取,那只能靠自己处理了。

可用方案

下面列出 3 个常见方案,推荐第一种方案,后两种是常规思路,不优雅。

1、通过组件实例直接获取(推荐💖)

<el-select v-model="value" placeholder="请选择">
    <el-option
      ref="mySelect"
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

<script>
// ElementUI 中使用
const { label, value } = this.$refs.mySelect.selected

// ElementPlus 中使用,除了返回值有点变化,没其它区别
const mySelect = ref()
const { currentLabel: label, value } = mySelect.value.selected
</script>

2、通过拼接 label 和 value 的方式间接获取

<el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="`${item.value},${item.label}`"
    @change="handleChange">
</el-option>

<script>
// 使用的时候,通过 split(',') 拆开取出来即可
handleChange (val) {
  const [value, label] = val.split(",");
}  
</script>

3、手动循环选项数组获取一次

<el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    @change="handleChange">
</el-option>

<script>
// 在 change 事件中通过 find 找到对应的数据
handleChange (val) {
  const label = this.options.find(item => item.value === val).label
}  
</script>

^_^,希望能够帮到你。

2
广告 广告

评论区