ElmentUI select基础多选基础上 增加下拉全选

功能：单选，多选，全选，搜索选择。

html

js

1、vm 理解成this 就好
2、后端传给前端需储存 首条数据为 {0: 全选, …}
3、写的比较粗糙。待有时间在整理（如果博友整理发一份收藏）

data() (
 return {
	form: {
				//companyId: [],
				endTime: '',
				taskContent: '',
				taskName: '',
				companyId: [],
				old_value: '全选',
				old_loabel: '全选',
				options: [],
				value: [],
				all: false, //全选你标志
				flag: false,

			},
},
methods: {
	changeValue(str) { 
			var val = [];
			val = str;
			if (vm.form.all) {
				if (val.length=== vm.form.options.length) {
					if (val.includes(0)) {
						val.shift();
						this.form.companyId = val;
						vm.form.all = false;
						vm.form.flag = true;
					}
				} else {
					if (val.includes(0)) {
						if (vm.form.flag) {
							this.form.companyId = [];
							this.form.value = [];
							vm.form.flag = false;
							var bbb = this.form.value;
							this.form.options.forEach(function (e) { // 开始value长度初始化
								const {
									value
								} = e
								bbb.push(value)
							})
							this.form.companyId = vm.form.value;
						} else {
							vm.form.flag = true;
							if (val.length + 1 == vm.form.options.length) {
								var index = val.indexOf(0);
								if (index > -1) {
									val.splice(index, 1);
								}
								vm.form.flag = true;
							} else {
								this.form.companyId = [];
								this.form.value = [];
								var bbb = this.form.value;
								this.form.options.forEach(function (e) { // 开始value长度初始化
									const {
										value
									} = e
									bbb.push(value)
								})
								this.form.companyId = vm.form.value;
							}
						}

					} else {
						if (val.length + 1 == vm.form.options.length) {
							if (vm.form.flag) {
								
								val.splice(0, 0, 0);
								
								vm.form.flag = false;
							} else {
								this.form.companyId = [];
								this.form.value = [];
								vm.form.all = false;
							}
						}
					}
				}
			} else {
				if (val.includes(0)) {
					var bbb = this.form.value;
					this.form.options.forEach(function (e) { // 开始value长度初始化
						const {
							value
						} = e
						bbb.push(value)
					})
					this.form.companyId = vm.form.value;
					vm.form.all = true;
				}
				if (!val.includes(0) && vm.form.options.length - 2 === val.length) {
					val.unshift(0)
					this.form.companyId = val;
					vm.form.all = true;
				}
			}
		},
		
		add() { // 发布
			// this.dialogFormVisible_add = true;   // 原项目：这里一个弹窗。add 事件在弹窗开启时才会调用
			$.ajax({
				type: 'post',
				dataType: "json",
				url: taskURL + 'task/econimic/selectList',
				success: function (r) {
					if (r.code == 0) {
						vm.form.options = r.select;
					} else {
						vm.$confirm('系统异常', '提示', {
							type: 'warning'
						})
					}
				},
			});
			vm.form.taskContent = "";
			vm.form.taskName = "";
			vm.form.companyId = [];
			this.form.all = false;
			vm.form.value = [];
			vm.form.endTime = "";
			this.fileList = [];
		},
}

css

就找了一点点。样式供参考，

.mipt-wrp .ipt-drop {
    width: 270px;
    height: 34px;
    border-radius: 4px;
    margin-left: 10px;
}
.el-select {
    display: inline-block;
    position: relative;
}

参考图：

完成样式图

数据格式：