Vue代码如下:
<el-form-item label="下拉框名称:"><el-select size="mini" v-model="testModelName" @focus="getSelectInfo" :disabled="SelectStyle"
filterable clearable placeholder="" multiple collapse-tags>
<el-button type="text" v-on:click="selectAll(1)"><i class="el-icon-circle-check" />全选</el-button><el-button type="text" v-on:click="removeTag(1)"><i class="el-icon-close" />清空</el-button><el-button type="text" v-on:click="selectReverse(1)"><i class="el-icon-copy-document" />反选</el-button>
<el-option v-for="code in currentOptions" :key="code.value" :label="code.label":value="code.value">
</el-option></el-select>
</el-form-item>
其中,multiple:是否多选
collapse-tags:多选时是否将选中值按文字的形式展示
script代码如下:
//清空操作removeTag(type) {this.testModelName = [];},//全选操作selectAll(type) {this.currentOptions.map(item => {if(!this.testModelName.includes(item.value)){this.testModelName.push(item.value)}})},//反选操作selectReverse(type) {let val = [];this.currentOptions.map(item => {let index = this.testModelName.indexOf(item.value);//判断现有选中数据是否包含如果不包含则进行反选数据if (index != -1) {} else {val.push(item.value)}})this.testModelName = val},
最终呈现的效果: