el-select 下拉框多选实现全选

Miyang 发布于2019-08-26 10:30 / 611人阅读

摘要：还是看代码吧。。。部分请选择全选全选部分一一二二三三四四五五全选全选全选全选全选全选看看效果图方法二直接添加一个全选复选框，实现的功能跟方法一是一样的部分请选择全选部分一一二二三三四四五五效果图

在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些

方法一：下拉项增加一个【全选】，然后应该有以下几种情况：

下拉选项全都勾选时，【全选】自动勾选；

下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；

下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；

下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；

上面就是我要实现的功能，我好啰嗦。。。还是看代码吧。。。

html部分：

js部分：

export default {
  data() {
    return {
      selectedArray: [],
      options: [
        { name: "一一", label: "one" },
        { name: "二二", label: "tow" },
        { name: "三三", label: "three" },
        { name: "四四", label: "four" },
        { name: "五五", label: "five" }
      ]
    }
  },
  methods: {
    selectAll() {
      if (this.selectedArray.length < this.options.length) {
        this.selectedArray = []
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        })
        this.selectedArray.unshift("全选")
      } else {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      if (!val.includes("全选") && val.length === this.options.length) {
        this.selectedArray.unshift("全选")
      } else if (val.includes("全选") && (val.length - 1) < this.options.length) {
        this.selectedArray = this.selectedArray.filter((item) => {
          return item !== "全选"
        })
      }
    },
    removeTag(val) {
      if (val === "全选") {
        this.selectedArray = []
      }
    }
  }
}

看看效果图：

方法二：直接添加一个【全选】复选框，实现的功能跟方法一是一样的
html部分：

js部分：

export default {
  data() {
    return {
      checked: false,
      selectedArray: [],
      options: [
        { name: "一一", label: "one" },
        { name: "二二", label: "tow" },
        { name: "三三", label: "three" },
        { name: "四四", label: "four" },
        { name: "五五", label: "five" }
      ]
    }
  },
  methods: {
    selectAll() {
      this.selectedArray = []
      if (this.checked) {
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        })
      } else {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      if (val.length === this.options.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
}

css：

.el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
  }

效果图：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106292.html

开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0
UDesign 组件更新 | 近期优化迭代

摘要：一日期时间相关组件改版月初对日期时间相关组件交互上进行了一波大更新，主要是为了减少用户的操作成本，减少展示占用面积。单日期范围选择器中选择日期后，自动跳转至下一个框进行选择，都选择完成后自动确认。单日期范围选择器中使用双面板展示。一、日期时间相关组件改版（DatePicker、TimePicker）6 月初对日期时间相关组件DatePicker、TimePicker交互上进行了一波大更新，主...

ernest.wang 2022-08-12 16:10 评论0 收藏0
el-select数据过多懒加载(loadmore)

摘要：数据过多处理方式在日常项目中组件的使用频率是非常之高的当数据过多时渲染时间非常长这里提供几个处理方式远程搜索组件提供了远程搜索方式也就是按照你输入的结果匹配选项官网提供了参考示例这里不加赘述下拉懒加载下拉懒加载当滚动到底部时你再去请求一 el-select数据过多处理方式在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. ...

elliott_hu 2019-08-02 14:04 评论0 收藏0