el-select实现全选多选

需求：下拉框在实现多选的情况下加一个全选，现实全选反选

       <el-select
            v-model="selectData"
            @change="handleSelect"
            collapse-tags
            multiple
            @remove-tag="removeTag"
          >
            <el-option label="全选" :value="0" @click.native="selectAll">el-option>
            <el-option
              v-for="(item, index) of optionBox.equipState"
              :key="'useCompany' + index"
              :label="item.name"
              :value="item.id"
            >el-option>
          el-select>

export default {
  name: 'index',
  data() {
    return {
      selectData: [], //状态多选
      qryForm:{
      	equipState:'' //api参数
      },
      optionBox: {
        equipState: [] // 下拉框数据
      }
    }
  },

  methods: {
  	// 点击全选
    selectAll() {
      let options = this.optionBox.equipState
      if (this.selectData.length < options.length) {
        this.selectData = options.map(item => {
          return item.id
        })
      } else {
        this.selectData = []
      }
    },
    // 改变数据时
    handleSelect(val) {
      let options = this.optionBox.equipState
      this.qryForm.equipState = ''
      if (val.includes('0')) {
        this.selectVal.unshift('0')
      }

      if (val.includes('0') && val.length - 1 < options.length) {
        this.selectVal = this.selectVal.filter(item => {
          return item !== '0'
        })
      }
      let strArr = []
      if (val.length !== 0) {
        this.qryForm.equipState = this.selectVal.join(',')
      }
    },
    // 关闭全选标签
    removeTag(val) {
      if (val === 0) {
        this.selectData = []
      }
    }
  }
}

补充：下拉框数据