Vue中使用 ElementUi 的 el-select 实现全选功能(思路详解)

<template>
  <div>
    <el-form ref="searchform" label-width="150px">
      <el-form-item label="select多选demo:">
        <el-select
          v-model="selectValue"
          @change="changeSelect"
          multiple
          clearable
          placeholder="请选择"
        >
          <el-option key="selectAll" label="全部" value="selectAll"></el-option>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      selectValue: [],
      selectAll: false // 用于标识是否全选--默认不全选
    }
  },
  created() {
    console.log(...this.options)
    console.log(this.options.filter(p => p.value != 'selectAll'))
  },
  methods: {
    changeSelect(value) {
      //  selectAll 为true 的时候，就走全选分支，全选后出现的情况就是取消权限
      if (this.selectAll) {
        this.selectAll = false
        if (value.indexOf('selectAll') > -1) {
          this.selectValue = value.filter(p => p != 'selectAll')
        } else {
          this.selectValue = []
        }
      } else {
        //   是否点击了‘全选'选项
        if (value.indexOf('selectAll') > -1) {
          // 有‘全选'选项，则将‘全部'和其他值放置一块
          const optionsValue = []
          this.options.forEach(item => {
            optionsValue.push(item.value)
          })
          this.selectValue = ['selectAll', ...optionsValue]
          this.selectAll = true
        } else {
          // 若是勾选选择的长度和提供的选项长度是一样的，则是 ‘全选'
          if (value.length === this.options.length) {
            const optionsValue = []
            this.options.forEach(item => {
              optionsValue.push(item.value)
            })
            this.selectValue = ['selectAll', ...optionsValue]
            this.selectAll = true
          } else {
            //   都是单选
            this.selectValue = value
          }
        }
      }
      // 真实的勾选值
      const realSelect = this.selectValue.filter(item => item != 'selectAll')
      console.log('realSelect', realSelect)
    }
  }
}
</script>
<style lang="scss" scoped></style>