el-select和el-checkbox实现下拉框多选及全选

现需求要求把原有的el-select下拉框变为带有el-checkbox复选框的下拉框，实现效果如图：

<el-form-item label="午饭" prop="businessTypeList">
        <el-select v-model="queryParams.businessTypeList" collapse-tags multiple placeholder="请选择" @change="handleClick()">
          <el-option :value="''">
            <el-checkbox :indeterminate="isIndeterminate" :value="checkAll" @change="handleCheckAllChange">
              全选
            </el-checkbox>
          </el-option>
          <el-option v-for="(dict,index) in businessTypeOptions"  :key="index" :label="dict.dictLabel" :value="dict.dictValue" >
            <el-checkbox style="pointer-events: none" :value="queryParams.businessTypeList.includes(dict.dictValue)" > {{ dict.dictLabel }} </el-checkbox>
          </el-option>
        </el-select>
</el-form-item>

data() {
    return {
      queryParams: this.queryParamsInit(),
      checkAll: false,
      isIndeterminate: false,
      showCheckAll: false,
      businessTypeOptions: [{
        dictLabel: '肉蟹煲',
        dictValue: '1'
      },{
        dictLabel: '烤鱼',
        dictValue: '2'
      },{
        dictLabel: '火锅',
        dictValue: '3'
      }]
    }
  },
methods:{
    // 午饭全选按钮
    handleCheckAllChange(value) {
      this.checkAll = !this.checkAll
      this.isIndeterminate = false
      if (this.checkAll) {
        this.queryParams.businessTypeList = this.businessTypeOptions.map(item => item.dictValue)
      } else {
        this.queryParams.businessTypeList = []
      }
    },
    // 午饭点击事件
    handleClick(){
      if (this.queryParams.businessTypeList.length === this.businessTypeOptions.length){
        this.checkAll = true
      }else {
        this.checkAll = false
      }
    }
}

可以实现多选，全选，取消功能，点击全选会全部选中，取消其中某选项会取消全选，不足之处请指正。