(vue)el-select选择框加全选/清空/反选

这篇具有很好参考价值的文章主要介绍了(vue)el-select选择框加全选/清空/反选。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(vue)el-select选择框加全选/清空/反选


(vue)el-select选择框加全选/清空/反选,VUE,vue.js,javascript,前端


<el-form-item label="批次">
	<el-select
	  v-model="formInline.processBatch"
	  multiple
	  collapse-tags
	  filterable
	  placeholder="请选择"
	  style="width: 250px"
	  no-data-text="请先选择企业、日期、工序"
	  @visible-change="piciSearch" //下拉打开/关闭时 事件
	>
	  <div class="select_up">
	    <el-button type="text" @click="selectAll">
	      <i class="el-icon-document-checked" />
	      全选</el-button>
	    <el-button type="text" @click="removeTag">
	      <i class="el-icon-document-delete" />
	      清空</el-button>
	    <el-button type="text" @click="selectReverse">
	      <i class="el-icon-document-copy" />
	      反选</el-button>
	  </div>
	  <div class="select_list">
	    <el-option
	      v-for="item in piciOptions"
	      :key="item.batchNum"
	      :label="item.batchNum"
	      :value="item.batchNum"
	    />
	  </div>
	</el-select>
</el-form-item>

js


// 清空操作
removeTag() {
  this.formInline.processBatch = []
},
// 全选操作
selectAll(val) {
  val = []
  this.piciOptions.map(item => {
    val.push(item.batchNum)
  })
  this.formInline.processBatch = val
},
// 反选操作
selectReverse(val) {
  val = []
  this.piciOptions.map(item => {
    const index = this.formInline.processBatch.indexOf(item.batchNum)
    // 判断现有选中数据是否包含如果不包含则进行反选数据
    if (index !== -1) {
      // formInline.processBatch.splice(index, 1)
    } else {
      val.push(item.batchNum)
    }
  })
  this.formInline.processBatch = val
},

解决参考

1.全选/清空/反选

(vue)el-select选择框加全选/清空/反选,VUE,vue.js,javascript,前端
2.全选/反选

(vue)el-select选择框加全选/清空/反选,VUE,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-857416.html

到了这里,关于(vue)el-select选择框加全选/清空/反选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue拿到下拉框el-select的选择项的value和label

    1.单独一个下拉框时 2.el-table每行数据都有下拉框时   思路: 1.首先选择下拉框事件拿到选择的这行数据scope.row  2.其次去遍历绑定的下拉框数据,使用find()方法查找item.value === row.value  3.找到则返回对应的row.label   4.最后将label值以键值对形式加到row对象中 代码实例:

    2024年02月11日
    浏览(121)
  • 记录el-select+el-tree复选框,支持模糊查询,懒加载,树父子节点不关联,不全选

    需求:一个机构下拉菜单,一个人员下拉菜单,默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口,模糊查询为一个接口不包含懒加载,默认非模糊查询情况下为一个接口,点击节点懒加载。机构下拉菜单数据变动更新人员下拉菜单数据。日期默认为当天

    2024年01月15日
    浏览(44)
  • 解决Vue中el-select第二次选择选项时才会显示上一个选项的响应结果

    今天在写一个选择器的时候出现一个问题 这个功能需求是:通过选择器选择不同的选项,点击查询按钮发送请求,并将响应结果放到一个div中用v-if控制是否显示。 看似简单的一个功能,却出现一个很搞笑的bug。在我选择一个选项点击查询,本应该显示结果的div没有显示出来

    2024年02月11日
    浏览(45)
  • el-select范围选择框

    仅供参考,具体的实现可能根据自己的需要修改 ,仅供参考!仅供参考!仅供参考!

    2024年02月11日
    浏览(47)
  • element el-select下拉框选择失效

    2023.1.11今天我学习了使用element el-select组件下拉框选择数据失效的原因以及解决办法。 如图:   当我已经选择启用状态的时候,然后点击停用状态没反应。 是因为在配置表单的过程中,重复使用了这个字段。 如: 就是在表单中重复使用了status这个字段,然后导致选择失效。

    2024年02月16日
    浏览(46)
  • vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例(组件封装)

    在项目上常用使用到 el-select 和 el-tree 组合实现,记录下两者结合的实现过程。(代码以及注释清晰明了,代码直接使用即可) 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾

    2024年04月15日
    浏览(67)
  • VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示(下拉框不显示无法选择)问题解决

    问题原因:elemrnt-ui会默认将弹出框插入至 body 元素;当设置了某个元素全屏时,会遮挡住原来的select下拉数据。

    2024年02月14日
    浏览(63)
  • 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)
  • el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

    使用el-select与el-tree,实现如下效果, 代码如下:  注意点:搜索input框的代码一点放在option上面,不要放在option里面,否则一点击搜索框,下拉框就会收起来,不能使用。

    2024年02月13日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包