让element UI的select选择器 :label 的值经过函数处理

最新推荐文章于 2024-01-28 13:47:56 发布

Chasing stars

最新推荐文章于 2024-01-28 13:47:56 发布

阅读量861

点赞数

分类专栏： Vue 文章标签： 1024程序员节 vue

本文链接：https://blog.csdn.net/weixin_43520670/article/details/109252648

版权

在使用Element UI的select组件时遇到问题，原始的label只能显示数组对象的值。通过尝试，发现在`:label`中使用函数处理可以解决这一限制。文章通过具体示例展示了如何修改初始代码，使select选择器的label能够经过函数处理，达到预期效果。

摘要由CSDN通过智能技术生成

让element UI的select选择器 :label 的值经过函数处理

1、问题产生

最近用element UI选择器的时候产生了一个问题，它的label只能是数组对象里面的值，这样很不方便，于是我试着用函数处理 :label 的内容，发现有效，于是记录一下。

2、具体示例

1.开始的select代码

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

<script>
  export default {
   
    data()