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: '可用'
        }
      ]
    }
  }
}
相关推荐
Java水解几秒前
Web API基础
前端
闲鱼不闲2 分钟前
实现iframe重定向通知父级页面跳转
前端
咸鱼青菜好好味2 分钟前
node的项目实战相关-2-前台接口
前端
春秋半夏3 分钟前
音乐播放、歌词滚动
前端·css
Sioncovy7 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
bo521009 分钟前
垃圾回收机制详解
前端
多啦C梦a10 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
患得患失94921 分钟前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
三年三月25 分钟前
021-顶点法线与反射原理
javascript·three.js
快起来别睡了35 分钟前
React 是如何用 JSX 写页面,却能被浏览器执行的?——Babel 的魔法解析
前端