【elementUI】el-select相关问题

这篇具有很好参考价值的文章主要介绍了【elementUI】el-select相关问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方使用DEMO

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

1.修改下拉框的宽度

:popper-append-to-body="false"

【elementUI】el-select相关问题,elementUI,elementui,vue.js,前端

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :popper-append-to-body="false"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

2.下拉框筛选不显示某条数据

v-if="item.value !== form.id"文章来源地址https://www.toymoban.com/news/detail-811608.html

<el-option
	v-for="item in options"
	:key="item.value"
	:label="item.label"
	:value="item.value"
	v-if="item.value !== form.id"
>
</el-option>

到了这里,关于【elementUI】el-select相关问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • elementUI --- el-select 下拉框 日历 级联选择

    element UI 组件库中的 select 选择器 中下拉列表的样式,在页面渲染的时候,总是渲染为仅次于body级别的div ,这样子覆盖样子会影响全局其他的select选择器下拉框样式,试图通过给el-select加父标签来覆盖,然而并没有卵用。 控制台看到的渲染结果: 解决方法: 通过 popper-cla

    2024年02月15日
    浏览(52)
  • 【elementUI】el-select选择框位置错位、偏移bug

    在el-select组件中,可能会由于option选项过多而导致下拉框位置错乱、偏移的情况,我个人试验大概是在5-6个option以上时,该bug就会出现。 这个时候需要手动为下拉框设置: popper-append-to-body=\\\"false\\\" 属性,并设置以下CSS样式解决问题:

    2024年02月15日
    浏览(50)
  • elementUI中el-select数据分页懒加载实现

    工作中使用elementUI框架时, 会经常用到下拉框展示数据,如果数据量很大会影响页面的渲染加载速度。遇到这种情况,通常后端代码会将数据做成分页查询,前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。 这样子组件下拉框就实现了检索、

    2024年02月12日
    浏览(52)
  • 基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

    组件:MultipleSelect.vue 使用:index.vue 多选框多选不换行

    2024年01月22日
    浏览(51)
  • Vue+EleMentUI实现el-table-colum表格select下拉框可编辑

    在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑 源码:https://gitee.com/charlinchenlin/store-pos 控制是否显示select下拉框 如果showInput的值与当前的inboundId相同,则显示下拉选项,否则显示数据信息

    2024年02月01日
    浏览(88)
  • vue element 编辑下拉框el-select不能回显的问题

    本人的需求是点击表格里面的编辑按钮,把数据回显到弹窗内,其他的都能回显,但是就下拉框不能正常的回显 本人后端人员,有不对的地方,勿喷 这是因为点击编辑,收集到下拉框的value是一个数字导致的,传值应该是 ‘1’ 而不是 1 解决办法一:,给弹窗子组件传参的时

    2024年02月11日
    浏览(40)
  • Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

    在前两天进行页面全屏时,一切都还好好的,可当使用element-ui中的el-select时,下拉菜单却怎么也显示不出来,但只要退出全屏状态,立马就好。 非全屏时:  全屏时: 开始我以为是层级问题,所以给el-select的下拉菜单加z-index,却发现加到多大都没用。 后来去官方文档里找

    2024年01月17日
    浏览(75)
  • el-select报错:vue.esm.js?5cd5:5105 [Vue warn]: <transition-group> children must be keyed: <ElTag>;无法选中

    目录 一、问题 二、原因及解决方法 三、总结 Tips:嫌麻烦可以直接看总结中有颜色的字体即可! 1. 使用element select控件时有警告(transition-group children must be keyed: ElTag)且无法选中下拉项 vue.esm.js?5cd5:5105 [Vue warn]: transition-group children must be keyed: ElTag found in --- TransitionGroup        

    2024年02月14日
    浏览(45)
  • vue el-select默认值

    情景:在调取接口后渲染数据时需要将选取的select设为默认值,具体案例为调取省份数据后,根据省份获取其对应的城市数据,并将其对应的el-select默认选中该数据的状态 问题:看到网上很多说直接改el-select绑定的v-model的值,这样做就会掉入select框中仅仅是显示相应的文字

    2024年02月13日
    浏览(55)
  • el-select 右侧icon样式问题

    el-select 右侧icon样式问题 样式问题如图: 解决方法: 注意:样式需写在没有scoped的style标签里

    2024年02月15日
    浏览(36)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包