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

最新推荐文章于 2024-08-30 16:00:39 发布

小虾米❀

最新推荐文章于 2024-08-30 16:00:39 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_44084713/article/details/131619387

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章展示了在Vue中如何实现一个多选下拉框（el-select），包括设置焦点触发函数、禁用状态、过滤、清除等功能。同时，提供了清空选中项、全选所有选项及反选的JavaScript方法实现，这些方法通过遍历选项并更新v-model绑定的值来达到操作目的。

摘要由CSDN通过智能技术生成

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