el-select多选时，显示多个tag后再+n

效果：

实现：

<el-select v-model="agreementVal"
   multiple  filterable placeholder="请选择"
   class="custom-select"
   @change="agreeSelectChangeAdd">
   <el-option  v-for="(item,index) in agreementOptions"
     :key="index"  :label="item" :value="item">
   </el-option>
 </el-select>

export default{
	data(){
	    this.numSpan  = document.createElement('span')  //创建一个span标签 用于显示+n
	    this.numSpan.setAttribute('class','numCounter')  // 设置该span类名为numCounter
		return{
		}
	}
}
methods:{
	agreeSelectChangeAdd(val){
		  //当所选tag标签数大于4个时，+n显示个数
		  if(val.length > 4){
		 	// 找到想要插入的位置，插入刚创建的span标签
	        document.querySelector('.custom-select-edit>.el-select__tags>span').appendChild(this.numSpan) 
	        this.numSpan.setAttribute("style","display:inline-block") //设置样式
	        this.numSpan.innerHTML = `+${val.length - 4}`
	      } else {
	        this.numSpan.setAttribute("style","display:none")
	      }
	}
}

.el-tag.el-tag--info:nth-of-type(n+5){
  display: none;
}
.numCounter{
  margin-left: 5px
  display: none
  top:4px
  right: 35px
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  border-radius: 5px
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
}