返回顶部
首页 > 资讯 > 前端开发 > JavaScript >elementui的select实现多选添加功能
  • 522
分享到

elementui的select实现多选添加功能

elementui的select多选添加elementui的select多选 2023-03-22 17:03:24 522人浏览 安东尼
摘要

select组件 <el-col :span="12"> <el-fORM-item label="成员" prop="person">

select组件

		<el-col :span="12">
          <el-fORM-item label="成员" prop="person">
            <el-select v-model="temp.person" multiple filterable placeholder="请选择" @change="changeSelect">
              <el-option label="全部" value="selectAll"/>
              <el-option v-for="item in options" :key="item.id" :label="item.realname" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>

监听数据变化

watch: {
    partyOrganizations: {
      immediate: true,
      handler(val) {
        this.getPartyList({ organizationId: val })
      }
    }
  },

return 中的定义默认值

      selectAll: false // 用于标识是否全选--默认不全选

累加数据和赋值

getPartyList(data) {
      fetchList(data).then(response => {
        this.options = response.data.data
      })
    },
    changeSelect(value) {
      //  selectAll 为true 的时候,就走全选分支,全选后出现的情况就是取消权限
      if (this.selectAll) {
        this.selectAll = false
        if (value.indexOf('selectAll') > -1) {
          this.options = value.filter(p => p !== 'selectAll')
        } else {
          this.selectValue = []
        }
      } else {
        //   是否点击了‘全选'选项
        if (value.indexOf('selectAll') > -1) {
          if (this.temp.person.length > 1) {
            // 有‘全选'选项,则将‘全部'和其他值放置一块
            const optionsValue = []
            this.options.forEach(item => {
              optionsValue.push(item)
            })
            optionsValue.forEach(i => {
              this.temp.person.push(i.id)
            })
            this.temp.person = [...new Set(this.temp.person)]
            this.selectAll = false
          } else {
            // 有‘全选'选项,则将‘全部'和其他值放置一块
            const optionsValue = []
            this.options.forEach(item => {
              optionsValue.push(item)
            })
            const optionsNew = []
            optionsValue.forEach(i => {
              optionsNew.push(i.id)
            })
            this.temp.person = [...optionsNew]
            this.selectAll = false
          }
        } else {
          // 若是勾选选择的长度和提供的选项长度是一样的,则是 ‘全选'
          if (value.length === this.options.length) {
            const optionsValue = []
            this.options.forEach(item => {
              optionsValue.push(item)
            })
            const optionsNew = []
            optionsValue.forEach(i => {
              optionsNew.push(i.id)
            })
            this.temp.person = [...optionsNew]
            this.selectAll = false
          } else {
            //   都是单选
            this.temp.person = value
          }
        }
      }
      this.selectAll = false
      // // 真实的勾选值
      // const realSelect = this.temp.person.filter(item => item != 'selectAll')
      // const qc = [...new Set(realSelect)]
    }

到此这篇关于elementui的select实现多选添加的文章就介绍到这了,更多相关elementui的select多选添加内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: elementui的select实现多选添加功能

本文链接: https://lsjlt.com/news/200892.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • elementui的select实现多选添加功能
    select组件 <el-col :span="12"> <el-form-item label="成员" prop="person">...
    99+
    2023-03-22
    elementui的select多选添加 elementui的select多选
  • 怎么使用elementui的select实现多选添加功能
    今天小编给大家分享一下怎么使用elementui的select实现多选添加功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2023-07-05
  • vue+elementui实现选项卡功能
    本文实例为大家分享了vue+elementui实现选项卡功的具体代码,供大家参考,具体内容如下 用法: 首先自己先在项目中定义三个组件(顶部TopNav,左侧LeftAside,中间...
    99+
    2024-04-02
  • vue+elementui实现下拉表格多选和搜索功能
    本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下 在elementui的基础上对下拉框和表格进行组合 template ...
    99+
    2024-04-02
  • elementUI实现下拉选项加多选框的示例代码
    目录下拉加多选框升级—添加全部选项需求改版完善因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下: 下拉加多选框 效果如下图: 封装如下: &...
    99+
    2024-04-02
  • ElementUI年份范围选择器功能实现
    目录ElementUI 年份范围选择器实现效果依赖组件代码调用组件代码总结ElementUI 年份范围选择器 Element的日期选择器组件没有提供选择年份范围的功能。由于项目需要,...
    99+
    2023-02-10
    elementui日期选择器范围 element选择年度范围 element日期选择器
  • vue+elementui如何实现下拉表格多选和搜索功能
    这篇文章主要介绍“vue+elementui如何实现下拉表格多选和搜索功能”,在日常操作中,相信很多人在vue+elementui如何实现下拉表格多选和搜索功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”v...
    99+
    2023-06-21
  • java怎么实现添加功能
    要实现添加功能,你需要在Java中编写代码来处理添加操作。以下是一些实现添加功能的步骤:1. 创建一个类或方法来处理添加操作。这个类...
    99+
    2023-08-15
    java
  • 前端elementUI select选择器实现远程搜索
    目录elementUI select选择器远程搜索测试背景菜鸟用法官方参考elementUI select选择器远程搜索 测试背景 先提下背景:就是在测试的过程中,经常需要用到收货这...
    99+
    2024-04-02
  • elementUI select组件默认选中效果怎么实现
    这篇文章主要介绍了elementUI select组件默认选中效果怎么实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先,v-model...
    99+
    2024-04-02
  • SpringBoot+Vue实现数据添加功能
    一、添加代码生成器 用来自动为数据库映射类建立:mapper、service、controller 注:代码生成器的写法,参考官方文档:https://mp.baomidou.co...
    99+
    2024-04-02
  • 如何用Vue.js实现动态添加、删除选题功能
    这篇“如何用Vue.js实现动态添加、删除选题功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何用Vue.js实现动态添...
    99+
    2023-07-04
  • vue后台管理添加多语言功能的实现示例
    目录1.首先是main.js页面做配置2.配置相应路径下的语言包,在这儿只显示部分代码,需要什么在这儿添加什么即可3.页面中使用,不同的地方使用,写法略有不同在这家公司一个项目, 需...
    99+
    2024-04-02
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现
    在使用无选择框的el-tree时遇到的坑以及如何使用el-tree 最后附全部代码 ref="tree" ----> 必须写 accordion ---->...
    99+
    2024-04-02
  • ElementUI中如何实现Message功能
    这篇文章给大家分享的是有关ElementUI中如何实现Message功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在最近项目开发中,接口错误信息是在拦截器统一处理,在一次产品...
    99+
    2024-04-02
  • vue实现商品多选功能
    本文实例为大家分享了vue实现商品多选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <he...
    99+
    2024-04-02
  • 前端elementUI select选择器怎么实现远程搜索
    这篇文章主要介绍“前端elementUI select选择器怎么实现远程搜索”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“前端elementUI select选择器怎么实现远程搜...
    99+
    2023-06-30
  • SpringMVC实战案例RESTFul实现添加功能
    目录RESTFul实现添加功能一、前端改动1. 修改列表页,增加一个【添加】按钮2. 配置 view-controller3. 编写添加页面二、后端处理三、测试效果RESTFul实现...
    99+
    2024-04-02
  • Python实现为pdf添加水印功能
    目录创建需要的水印模板wps创建输出pdf水印pdf实现步骤安装依赖代码问题使用pypdf2出现编码问题解决方法感悟创建需要的水印模板 wps创建 输出pdf 水印pdf 实现...
    99+
    2024-04-02
  • SpringSecurity实现添加图片验证功能
    目录本章内容思路方案怎么将字符串变成图片验证码kaptcha这么玩hutool这么玩传统web项目过滤器方式认证器方式总结下前后端分离项目基于过滤器方式基于认证器方式本章内容 Spr...
    99+
    2023-01-04
    Spring Security添加图片验证 Spring Security图片验证
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作