html多选按钮代码（html中checkbox用法）

背景

默认的el-select可以实现多选，模糊查询等功能，但是没有全选按钮，话不多说，咱们加一个。

html部分

<el-select v-model="search[item.col_name]" multiple collapse-tags filterable :placeholder="'请选择'+item.col_cn_name" > <el-checkbox v-model="checkbox[item.col_name]" style="height: 24px;line-height: 24px;padding-left: 5px;" @change="selectAll(item,index)" >全选</el-checkbox> <el-option v-for="(option) in item.datas" :key="option.value" :label="option.label" :value="option.value" ></el-option></el-select>

data定义

checkbox: {}

js部分

selectAll(item, index) {      //我这里是针对循环的多个下拉框增加多选。如果是单个，直接判断v-model绑定的值即可。      if (this.checkbox[item.col_name]) {        item.datas.forEach(item1 => {         //按照自己的需求push就可以啦。          this.search[item.col_name].push(item1.value);        });      } else {        this.search[item.col_name] = [];      }    }

效果