ElementUI的 el-select 多选的样式自我调整

ElementUI的 el-select 多选的样式自我调整

elementUI 中的el-select组件，它的官方提供的多选样式提供了两种，一种是展示每一条，其次是展示一条，后面提示总数，但是昨天遇到一个需求是展示一行，多余的隐藏，之后显示总数，我是在element的基础上进行了修改，具体的就不多说了，直接上下代码,数据什么的就不提供了，这里是我修改了的核心内容：

<template>
	<div class="inputBox" :style="{width : itemCss.width}">
		<label> {{ itemObject.label }} </label>
		<el-select :style="itemCss" v-model="value"  multiple  placeholder="请选择" clearable>
				<el-option label="全选" value="-1" @click.native="selectAll"></el-option>
				<el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id"> </el-option>
		</el-select>
	</div>
</template>

<script>
	export default {
		watch: {
			value: function(n, o) {
				this.$emit("input", n);
				var dom = document.getElementsByClassName("el-select__tags");
				console.log(dom)
				if ( n.length > 0  ){
					dom[0].setAttribute("data-line",  n.length)
				} else {
					dom[0].removeAttribute("data-line")
				}
			}
		},
	}
</script>

<style lang="less">
.el-select__tags{
	&:after{
		content : attr(data-line);
		// margin-left : 15px ; 
		right : 2px;
		top :0;
		// border : 1px solid rgb(233, 233, 235) ; 
		padding : 0px 5px ;
		// background-color : rgb(244, 244, 245); ;
		position : absolute;
		line-height : 22px ;
		border-radius : 3px;
		color : rgb(144, 147, 153); 
		font-size:12px;
		margin : 2px 0 ;
		background-color : rgba(0,0,0,.3) ;
		color : #ffffff
	} 
	padding-right : 30px;
	max-width : 278px!important;
	height :30px;
	overflow:hidden ;
}
</style>

具体的思路是，通过:after伪元素进行效果的显示，之后将展示区域进行宽度的设置，并且设置成overflow，采用显示所有的选项的模式，当数据内容溢出的时候，内容会自当隐藏，只需要事实的将数据条数上传上去就可以，在css中采取了content：attr（data-line)的方式，大家可以看下相关文档，具体的效果如图 ，没有具体的美化。

以上就是这次修改的流程，如果有问题和意见，欢迎提出。