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: '可用'
        }
      ]
    }
  }
}
相关推荐
用户47949283569154 分钟前
你每天都在用的 JSON.stringify ,V8 给它开了“加速通道”
前端·chrome·后端
狗狗摇屁屁7 分钟前
JS手写防抖
开发语言·javascript·ecmascript
JIngJaneIL10 分钟前
基于java+ vue办公管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
清风细雨_林木木16 分钟前
Chart.js和 Echart的区别
开发语言·javascript·ecmascript
静待雨落21 分钟前
Electron无边框窗口如何拖拽以及最大化和还原窗口
前端·electron
沐泽__1 小时前
iframe内嵌页面双向通信
前端·javascript·chrome
小北方城市网1 小时前
第4 课:Vue 3 路由与状态管理实战 —— 从单页面到多页面应用
前端·javascript·vue.js
ohyeah1 小时前
用 Vue3 + Coze API 打造冰球运动员 AI 生成器:从图片上传到风格化输出
前端·vue.js·coze
interception1 小时前
爬虫逆向,瑞数6,补环境,国家专利
javascript·爬虫·python·网络爬虫
Dragon Wu1 小时前
TailWindCss 核心功能总结
前端·css·前端框架·postcss