【详细解析】ElementUI实现下拉框全选功能

这几天在开发功能时候发现ElemntUI，select组件并不支持下拉框全选操作。于是自己总结方法自己写了一个。

OK，话不多说，代码如下：

首先，html 部分，先用select组件绑定几个用到的方法：

<el-select multiple collapse-tags v-model='selecteProcess' 
  @change='changeSelect' @remove-tag='removeTag' placeholder='请选择工序(必选)'>
            <el-option label='全选' value='' @click.native='selectAll'></el-option>
            <el-option v-for='(item, index) in processList' 
            :key='index' 
            :label='item.label' 
            :value='item.value'>
            </el-option>
        </el-select>

---

selecteProcess 是保存的选择参数

processList 是默认参数

return {
      selecteProcess: [],
      processList: [
        { value: '络筒工序', label: '络筒工序' },
        { value: '细纱工序', label: '细纱工序' },
        { value: '粗纱工序', label: '粗纱工序' },
        { value: '末并工序', label: '末并工序' },
        { value: '初并工序', label: '初并工序' },
        { value: '梳棉工序', label: '梳棉工序' },
        { value: '打包工序', label: '打包工序' },
        { value: '抓棉工序', label: '抓棉工序' },
        { value: '清花工序', label: '清花工序' }
      ],
  },

然后是三个方法：

第一个： selectAll() 根据 selecteProcess 的长度来判断点击 全选 和 取消全选。

第二个： changeSelect(val)是当选项变更时进行监控，当所有选项都选中，添加全选。

第三个： removeTag(val)是点击删除标签的时候是否删除全部选项，我这里两个判断都会删除所有选项。

selectAll() {
      if (this.selecteProcess.length < this.processList.length) {
        // 全选，添加所有项
        this.selecteProcess = this.processList.map(item => item.value);
        this.selecteProcess.unshift('全选'); // 添加“全选”
      } else {
        // 取消全选，清空已选项
        this.selecteProcess = [];
      }
    },
      // 选项变更时的处理
    changeSelect(val) {
      if (val.length === this.processList.length && !val.includes('全选')) {
        // 当所有选项都选中时，添加“全选”
        this.selecteProcess.unshift('全选');
      } else if (val.length - 1 !== this.processList.length && val.includes('全选')) {
        // 如果取消部分选项，则移除“全选”
        this.selecteProcess = this.selecteProcess.filter(item => item !== '全选');
      }
    },
        // 移除标签时的处理
    removeTag(val) {
      if (val === '全选') {
        // 如果移除“全选”，则清空已选项
        this.selecteProcess = []; 
      }else{
        this.selecteProcess = [];
      }
    },