el-select label为空会显示value作为下拉框

原创已于 2024-10-17 13:21:10 修改 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript #经验分享

于 2021-10-15 14:55:46 首次发布

vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

element

3 篇文章

订阅专栏

el-select

2 篇文章

订阅专栏

本文介绍如何在Element UI的el-select组件中，当label为空时设置默认显示值't暂无名称'，并使用encodeURI和decodeURI进行转码。展示了具体代码实现和效果展示。

项目场景：

el-select：
例如：label为空时会默认取value：

解决方案：

提示：这里填写该问题的具体解决方案：
我是给他个默认的label值(toStr)：

 <el-option v-for="item of xqList" :label="toStr(item.label)" 
:value="item.value" :key="item.value"></el-option>

toStr(str){
    let data
    if(str){
        data = encodeURI(str);
    }else{
        data = '暂无名称';
    }
    data = data.replace(/&nbsp;/g,'%20');
    return decodeURI(data);
},

效果如图：