首页 > 技术文章 > elementui el-select显示value不显示label

javaupup 2021-07-08 17:12 原文

vue---解决el-select显示value不显示label的问题

问题在于v-model绑定的值和渲染的值类型不匹配
比如v-model绑定了一个整型,但是渲染的时候是字符串

<el-form-item label="状态" prop="xxx">
    <el-select v-model="row.xxx"> // 这里的xxx是整型
       <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option> // 这里的value是字符串
    </el-select>
</el-form-item>

row: {
       xxx: null
}

可以在从接口读取到后端数据的时候,对数据进行转换,比如用String函数或者在末尾加上''

// 如果后端读取到的xxx是整型需要强转
this.row.xxx= String(this.row.xxx)
// 或者
this.row.xxx= this.row.xxx+ ''

也可以在最开始定义这个数据的时候就定义为字符串类型,赋值为空字符串

 row: {
       xxx: ''
}

推荐阅读