JZTXT

element多选下拉框与文本框联动

发布时间 2023-08-10 15:46:41作者: 天才爱抖露嘟嘟鲤鱼
需求
  1. 多选下拉框与文本框联动
  2. 从不同页面跳转，多选框的显示与隐藏
效果图

原始人真的来写代码了

Element UI 可多选下拉框

<template>
	<el-col :span="6">
  <label>工作内容</label>
</el-col>

<el-col :span="18">
  <el-form-item prop="comment">
	<div class="task-sm-main">
	  <el-select
		v-if="isWorkContentSelectorVisible"
		v-model="workContent"
		placeholder="请选择工作内容"
		size="medium"
		style="width: 100%;height: 36px;"
		clearable
		multiple
		collapse-tags
		@change="handlerWorkChange"
		@remove-tag="removeTags"
>
		<el-option
		  v-for="item in workContentList"
		  :key="item.id"
		  :label="item.name"
		  :value="item.name"
		/>
	  </el-select>
	  <el-input
		@blur="handlerCommentClear"
		type="textarea"
		rows="1"
		class="textareaHeight"
		:class="{
		  borderTop: isWorkContentSelectorVisible
		}"
		v-model="param.comment"
></el-input>
	</div>
  </el-form-item>
</el-col>
</template>

export default {
	data() {
		param: {
			comment:""
			// ...
		},
	    workContentList: [], // 后台返回的工作内容下拉框数据
	    workContent: [], // 开启多选后，下拉框选中的tags v-model绑定
	    tagCount: 0, // tags数量
	    isWorkContentSelectorVisible: false //下拉框是否可见
	    // 表单验证
	    rules:{
		   	comment: [
	           { required: true, message: "请输入工作内容", trigger: "blur" }
         ],
         // ...
	   },
	},
	mounted() {
		if() {
		// 下拉框可见，borderTop class 为 true
			this.isWorkContentSelectorVisible = true;
		} else {
		}
	},
	methods: {
		// 选中值发生变化时触发，参数为目前选中的值
	    handlerWorkChange(tag) {
	      // 新增选项
	      if (this.tagCount < tag.length) {
	        this.param.comment += tag[tag.length - 1];
	      } else {
	      // 取消某项
	        let str = this.param.comment;
	        // 未选项数组（不知道怎么获取到取消选中的值，所以多走十年弯路）
	        const unSelectedTag = [];
	        this.workContentList.forEach(ele => {
	          if (!tag.includes(ele.name)) {
	            unSelectedTag.push(ele.name);
	          }
	        });
	        // 其实当前取消选中的项只有一个，但这里只能遍历所有未选项，什么马拉松
	        unSelectedTag.forEach(item => {
	          str = str.split(`${item}`).join("");
	        });
	        this.param.comment = str;
	      }
	      this.tagCount = tag.length;
	    },
		// 多选模式下移除tag时触发，参数为移除的tag值
	    removeTags(tag) {
	      this.param.comment = this.param.comment.split(`${tag}`).join("");
	    },
		// 文本域失焦
	    handlerCommentClear() {
	      const that = this;
	      // 清空文本域 ？ 这个if好像不需要单独写，好叭，能跑就是成功
	      if (this.param.comment === "" || this.param.comment == undefined) {
	        this.workContent = [];
	        this.tagCount = 0;
	      } else {
	      // 遍历下拉框所有数据，是否存在不在comment中的项
	        this.workContentList.forEach(ele => {
	          if (!this.param.comment.includes(ele.name)) {
	          // 过滤掉清除的项后的新数组
	            const tempArr = that.workContent.filter(item => {
	              return item != ele.name;
	            });
	            this.workContent = tempArr;
	            this.tagCount = this.workContent.length;
	          }
	        });
	      }
	    }
    }
}

  .el-textarea__inner {
	border: none !important;
	width: 100%;
	height: 100%;
  }
  
   .task-sm-main {
	display: flex;
	flex-direction: column;
	height: 96px !important;
  }
  
  /* 文本框的上边框 */ 
  .borderTop {
    border-top: 1px solid #9d9898;
  }

  .textareaHeight {
	width: 100%;
	/* selector height 固定 36px，文本域在下拉框存在与否时都自动占满剩余高度 */ 
	flex: 1;
	overflow: hidden;
  }