Skip to content
On this page

el-select实现全选功能

vue
<template>
    <el-select
      v-model="selected"
      @change="changeSelect"
      @remove-tag="removeTag"
      placeholder="请选择"
      multiple
    >
      <el-option label="全选" value="-1" @click.native="selectAll" />
      <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.name" />
     </el-select>
  </template>
vue
export default {
  data() {
    return {
      selected: [],
      options: []
    }
  },
  methods: {
    selectAll() {
      if (this.selected.length < this.options.length) {
        this.selected = []
        this.options.map((item) => {
          this.selected.push(item.name)
        })
        this.selected.unshift('-1')
      } else {
        this.selected = []
      }
    },
    changeSelect(val) {
      if (!val.includes('-1') && val.length === this.options.length) {
        this.selected.unshift('-1')
      } else if (val.includes('-1') && (val.length - 1) < this.options.length) {
        this.selected = this.selected.filter((item) => {
          return item !== '-1'
        })
      }
    },
    removeTag(val) {
      if (val === '-1') {
        this.selected = []
      }
    }
  }
}

更新时间: