ElementUI Select选择器如何根据value值显示对应的label

修改前效果如图所示,数据值状态应显示为可用,但实际上仅显示了状态码1,并没有显示其对应的状态信息。在排查了数据类型对应关系问题后,并没有产生实质性影响,只好对代码进行了如下修改。

修改前代码:

html 复制代码
<el-select v-model="datasetInfo.status" placeholder="请选择数据集状态">
          <el-option label="可用" value=1></el-option>
          <el-option label="不可用" value=0></el-option>
</el-select>


修改后代码:

html 复制代码
<el-select v-model="datasetInfo.status" placeholder="请选择数据集状态">
	<el-option v-for="item in options" :value="item.value":label="item.label">
	</el-option>
</el-select>
javascript 复制代码
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: '不可用'
        },
        {
          value: 1,
          label: '可用'
        }
      ]
    }
  }
}
相关推荐
kungggyoyoyo10 分钟前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
ohyeah12 分钟前
栈:那个“先进后出”的小可爱,其实超好用!
前端·数据结构
心随雨下22 分钟前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
自在极意功。27 分钟前
AJAX 深度详解:从基础原理到项目实战
前端·ajax·okhttp
s***45328 分钟前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
海上彼尚32 分钟前
[逆向] 1.本地登录爆破
前端·安全
什么时候吃饭37 分钟前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
2501_9409439138 分钟前
体系课\ Python Web全栈工程师
开发语言·前端·python
q***064739 分钟前
SpringSecurity相关jar包的介绍
android·前端·后端
低保和光头哪个先来1 小时前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架