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

这篇具有很好参考价值的文章主要介绍了ElementUI Select选择器如何根据value值显示对应的label。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

修改前效果如图所示,数据值状态应显示为可用,但实际上仅显示了状态码1,并没有显示其对应的状态信息。在排查了数据类型对应关系问题后,并没有产生实质性影响,只好对代码进行了如下修改。
ElementUI Select选择器如何根据value值显示对应的label,Java学习,elementui,前端,javascript
修改前代码:

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

ElementUI Select选择器如何根据value值显示对应的label,Java学习,elementui,前端,javascript
修改后代码:文章来源地址https://www.toymoban.com/news/detail-612575.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>
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: '不可用'
        },
        {
          value: 1,
          label: '可用'
        }
      ]
    }
  }
}

到了这里,关于ElementUI Select选择器如何根据value值显示对应的label的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+ElementUI el-select选择器:绑定的值为对象

    业务需求: el-select选择器,后台接口需要的参数为name,name会存在重复情况,前端唯一标识选择用id,所以最后决定使用select绑定对象值将数据保存下来。 实现思路: 常规的select选择器,v-model 形式绑定的参数只能是boolean,string,number,但是仔细翻阅官方文档发现,selelct是可以

    2024年02月14日
    浏览(43)
  • elementUi重置Select选择器样式、option、deep、vue3、plus

    样式标签属性为 style scoped lang=\\\"scss\\\"/style

    2024年02月14日
    浏览(42)
  • 解决el-select回显异常 显示option选项的value 而不是显示label

    回显的value和选项value类型不同 form中v-model=\\\"form.userId\\\"是字符串类型 option中:value=“item.userId” 选项id是数字类型 :value=“item.userId” 改为 :value=“item.iduserId+‘’”(转换成字符串)

    2024年02月12日
    浏览(44)
  • 【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起

    问题: elementui 的 select 下拉框 搭配 树形菜单 tree 点击菜单 值虽然变化了,但select下拉框没收起 vue代码 1.给下拉框写个 ref 即 2.点击下拉框选项的时候判断值有没有赋值(即这个select下拉框的值有没有改变),写个监听,值改变了就收起树形菜单。 我这里是把下拉框 显示的

    2024年02月11日
    浏览(38)
  • element ui中Select 选择器,自定义显示内容

    正常情况下,下拉框选项展示内容,就是选择后展示的label内容 如图所示: 但是要想自定义选项内容,但是展示内容不是选项label的内容,可以在el-option标签内增加div进行自定义选项label展示,但选择后结果展示仍是el-option标签内label属性绑定的值。 展示效果如图:

    2024年02月05日
    浏览(42)
  • 如何根据 offset 找到对应的 Message?

    通过 Offset 从存储层中获取 Message 大致分为两步: 第一步,根据 Offset 找到所属的 Segment 文件 第二步,从 Segment 中获取对应 Offset 的消息数据 第一步 可以直接根据 Segment 的文件名进行查找(上面已经介绍了 Segment 的文件面就是它包含的数据的起始 Offset )。 第二步 则需要一

    2024年02月04日
    浏览(78)
  • layui中使用JavaScript监听下拉框(select)的变化,根据选中的值来决定是否显示或隐藏input元素

    HTML和CSS用于设置网页的基本结构和样式,而JavaScript则用于实现交互功能,比如根据下拉框的选项来控制input元素的显示或隐藏。 以下是一个简单的例子,使用JavaScript监听下拉框(select)的变化,然后根据选中的值来决定是否显示或隐藏input元素: HTML: JavaScript: 在这个例子中

    2024年02月04日
    浏览(50)
  • java中HashMap如何根据value的值去获取key是多少

    在Java中,HashMap是一种基于键值对存储数据的数据结构。HashMap并没有直接提供根据value获取key的方法。但你可以通过遍历HashMap的entrySet,找到对应的value,然后获取其对应的key。 以下是一个示例代码: 你可以传入一个HashMap和一个value,这个方法会遍历HashMap的entrySet,找到第一

    2024年02月09日
    浏览(40)
  • antdvue tree-select树选择组件 选中值显示label拼接父节点

    最近使用antdv的a-tree-select实现一个功能:选中子节点需要拼接父节点 如图所示 问题就是 没有直接的api可以支持 记录一下解决方法 原本的使用 修改后 总结 就是利用labelInValue 属性 处理显示的title

    2024年02月13日
    浏览(54)
  • ElementUI 时间选择器如何限定选择时间

    DatePicker 日期选择器 | Element Plus 我们如何限定我们的选择时间呢,比如限定选择时间为今天之前,或者今天之后的时间? 我们可以使用官方提供的disabled-date来实现  我们通过这个属性 做一个回调函数,在里面比较我们想要限定的时间范围,然后将结果return 就能完成时间范围

    2024年02月04日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包