需求

在select下拉菜单的选项前添加多选框checkbox，并且有一个全选选项

效果如下：

实现方法

在el-option选项中嵌入el-checkbox组件

<el-select
          v-model="selectValueArray"
          multiple
          collapse-tags
          placeholder="请选择分析专题"
          class="select-with-checkbox"
        >
          <el-option
            v-for="item in analysisSubject"
            class="my-select"
            :key="item.value"
            :value="item.value"
            :disabled="item.disabled"
          >
            <el-checkbox
              class="inner-checkbox"
              :disabled="item.disabled"
              v-model="item.checked"
              @change="onSelectChange"
              >{{ item.label }}</el-checkbox
            >
          </el-option>
</el-select>

样式修改

// 屏蔽原有的选中图标
.my-select::after {
  display: none;
}
// 将checkbox的大小覆盖整个选项
.inner-checkbox {
  width: 100%;
  padding: 0 20px;
}
// 原有选项padding置0
.el-select-dropdown__item {
  padding: 0;
}
// 偷懒屏蔽了input中选项的关闭按钮
.select-with-checkbox {
  ::v-deep .el-tag.el-tag--info .el-tag__close {
    display: none;
  }
}

TypeScript代码如下：

export default class ComplianceAudit extends Vue {  
  
  	private selectValueArray: any[] = []; // 已选信息数组
  	private oldSelectValueArray: any[] = []; // 记录上次选择的信息数组
    //analysisSubject数组的格式如下：
    private analysisSubject: any[] = [
        // 选项信息数组
        {
          value: "城镇开发边界",
          label: "城镇开发边界",
          checked: false
        },
        {
          value: "1111",
          label: "2222",
          checked: false
        },
        { value: "ALL_SELECT", label: "全选", checked: false }
    ]
    /**
     * checkbox修改事件onSelectChange：
     */
    private onSelectChange(val: any[]) {
        this.selectValueArray = [];	// 已选信息数组置空
        // allValues为所有选项值的数组
        const allValues = this.analysisSubject.map(item => {
          if (item.checked) {
            // 将checked为true的值放入已选信息数组
            this.selectValueArray.push(item.value);
          }
          return item.value;
        });
        // 上一次选择的值，进行对比
        const oldVal =
          this.oldSelectValueArray.length > 0 ? this.oldSelectValueArray : [];
        // 选择全部，这次含有全选项且上次没有
        if (
          this.selectValueArray.includes("ALL_SELECT") &&
          !oldVal.includes("ALL_SELECT")
        ) {
          this.selectValueArray = allValues;
          this.changeCheckboxStatus(this.analysisSubject, "ALL", true);
        }
        // 取消全部选中，上次存在全选项，当前没有，则取消全选
        if (
          oldVal.includes("ALL_SELECT") &&
          !this.selectValueArray.includes("ALL_SELECT")
        ) {
          this.selectValueArray = [];
          this.changeCheckboxStatus(this.analysisSubject, "ALL", false);
        }
        // 点击非全部选中，需要排除全部选中 以及 当前点击的选项
        // 新老数据都有全部选中
        if (
          oldVal.includes("ALL_SELECT") &&
          this.selectValueArray.includes("ALL_SELECT")
        ) {
          const index = this.selectValueArray.indexOf("ALL_SELECT");
          this.selectValueArray.splice(index, 1); // 排除全选选项
          this.changeCheckboxStatus(this.analysisSubject, "ALL_SELECT", false);
        }
        // 全选未选，但是其他选项都全部选上了，则全选选上
        if (
          !oldVal.includes("ALL_SELECT") &&
          !this.selectValueArray.includes("ALL_SELECT")
        ) {
          if (this.selectValueArray.length === allValues.length - 1) {
            this.selectValueArray.push("ALL_SELECT");
            this.changeCheckboxStatus(this.analysisSubject, "ALL_SELECT", true);
          }
        }
        // 储存当前选择的最后结果 作为下次的老数据
        this.oldSelectValueArray = this.selectValueArray;
      }
    
      /**
       * 修改复选框选中状态
       */
      private changeCheckboxStatus(list: any, value: string, status: boolean) {
        // 全部修改
        if (value == "ALL") {
          list.forEach((item: any) => {
            item.checked = status;
          });
        } else {
          // 指定某个值修改
          list.forEach((item: any) => {
            if (item.value == value) {
              item.checked = status;
            }
          });
        }
    
}