记录element使用过程中选择多个tag超出文本框样式错乱

最新推荐文章于 2023-07-25 17:08:13 发布

傻瓜傻了个瓜

最新推荐文章于 2023-07-25 17:08:13 发布

阅读量590

点赞数

文章标签： vue.js 前端 javascript

原文链接：https://blog.csdn.net/illa123/article/details/120450000

版权

记录element使用过程中选择多个tag超出文本框

在修改样式时遇到问题描述：页面使用了easyui 和vue+element
使用vue+element 实现下拉选择可以多选并手动输入。
但是会有超出文本框
在这里插入图片描述

在网上也找到很多大佬的写法没有很好的实现，不太稳定
参考如下：

版权声明：本文为CSDN博主「iatkotworld」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40400844/article/details/123132736
这个大佬的方法我这边用了不太稳定。时好时不好。后续又搁置了
过了半个多月又发现一个。

版权声明：本文为CSDN博主「那谁家的菇凉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/illa123/article/details/120450000

此方法解决抖动问题，但是解决我这个问题也非常非常好使
由于太激动了所以记录一下我遇到的问题。
在这里插入图片描述
.my-el-select {
position: relative;
}
.my-el-select .el-select__input.is-mini {
min-height: 20px;
}
.my-el-select .el-select__tags {
position: inherit;
transform: translateY(0);
padding: 3px 0;
min-height: 28px;
max-width: 155px !important;
flex-wrap: wrap;
}
.my-el-select .el-input__inner {
min-height: 30px;
height: 100% !important;
}
.my-el-select .el-select__tags ~ .el-input {
height: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);

}
.my-el-select .el-input__icon {
position: relative;
top: 0px;
line-height: 0;
}

<label for="sel_tea">老师：<span style="color:red;">*</span></label>
  <span id="sel_tea" >
		<el-select style="width:180px" class="my-el-select" v-model="form.tea" ref="selectBox" multiple  filterable allow-create default-first-option placeholder="请选择老师" :disabled="form.disType==='1'?true:false" >
			<el-option v-for="item in teaList" :key="item.id" :label="item.name" :value="item.id">
				<span style="float: left">{{ item.name }}</span>
  				<span style="float: right; color: #8492a6; font-size: 13px">{{ item.off_name }}</span>
			</el-option>
		</el-select>
	</span>

原文链接：https://blog.csdn.net/weixin_40400844/article/details/123132736
原文链接：https://blog.csdn.net/illa123/article/details/120450000