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

淡淡的烟草味﹌ 2022-12-17 14:51 113阅读 0赞

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

*   *  1、问题产生
     *  2、具体示例
     *   *  1.开始的select代码
         *  2.开始的select选择器label选项
         *  3.修改后的代码
         *  4.修改代码后的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() { 
          return { 
            options: [{ 
              value: '选项1',
              label: '黄金糕'
            }, { 
              value: '选项2',
              label: '双皮奶'
            }, { 
              value: '选项3',
              label: '蚵仔煎'
            }, { 
              value: '选项4',
              label: '龙须面'
            }, { 
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: ''
          }
        }
      }
    </script>

### 2.开始的select选择器label选项 ###

输出了data里面对象的label属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center]

### 3.修改后的代码 ###

<template>
      <el-select v-model="value" filterable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="change(item)"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default { 
        data() { 
          return { 
            options: [{ 
              value: '选项1',
              label: '黄金糕'
            }, { 
              value: '选项2',
              label: '双皮奶'
            }, { 
              value: '选项3',
              label: '蚵仔煎'
            }, { 
              value: '选项4',
              label: '龙须面'
            }, { 
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: ''
          }
        },
      methods:{ 
          //改变展示内容
        change(item) { 
          if (item.label == undefined) { 
            return;
          }
          return (item.label.substr(0, 1));
        },
      }    
      }
    </script>

### 4.修改代码后的select选择器label选项 ###

只是展示了一个字，与函数实现的功能一样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/679703398e5945b7ba67806c9562f4ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/3d4ee8faa86148baa627b72db0c339ee.png