Vue+elementUI实现下拉框多选和反选

news2025/1/3 5:05:00

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
	},