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]=[];}}

效果

html多选按钮代码(html中checkbox用法)

(0)
小多多的头像小多多创始人

相关推荐

发表回复

登录后才能评论