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: '可用'
        }
      ]
    }
  }
}
相关推荐
DokiDoki之父几秒前
前端速通—CSS篇
前端·css
pixle03 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19879 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH9 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童14 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
非凡ghost19 分钟前
火狐浏览器(Firefox)tete009 Firefox 多语便携版
前端·firefox
文心快码BaiduComate20 分钟前
文心快码Comate3.5S更新,用多智能体协同做个健康管理应用
前端·人工智能·后端
袁煦丞24 分钟前
极空间变身全能私有云+1Panel傻瓜式部署:cpolar内网穿透实验室第618个成功挑战
前端·程序员·远程工作
袁煦丞26 分钟前
10.15-1 Reader电子书管理神器搭配极空间私有云:cpolar内网穿透实验室第488个成功挑战
前端·程序员·远程工作
ZHOUYUANN1 小时前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发