ElementUI的select选择器的默认多选

Vue.js组件中处理接口数据类型转换与显示问题

最新推荐文章于 2025-09-02 10:13:39 发布

原创最新推荐文章于 2025-09-02 10:13:39 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在Vue.js组件中如何处理从接口获取的数字类型ID，将其转换为字符串以匹配el-select组件的需求。同时，解决当value和label不同时，确保显示label而非value的问题。通过遍历数据并根据需求调整，实现了正确显示label并以id作为value的功能。

data(){
    elFormFinance:{
        name:[]
    }
}

<el-select v-model="elFormFinance.name" multiple placeholder="列表" :filterable="true">
            <el-option
              v-for="item in departTechers"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

1、接口中返回的id 是数字类型，为了和 select 选择器对上，需要转换数据类型为字符串

2、如果 value 和 lable 不是同一个值，直接赋值会显示成 vule 而不是 lable

官方文档中有一句提示：

于是解决方案如下：

for (let i=0; i<this.departTechers.length; i++){
            if (finance.indexOf(this.departTechers[i].id+"") >= 0){
              elFormFinance.name.push(this.departTechers[i].id)
            }
}

如愿显示出 lable 作为显示，id 作为 value 的方式