el-select多选设置v-model选中的数据拼接显示

问题描述

el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，如下

现有需求不使用tag展现，将选中数据以“,”拼接展示，此时v-model的值为字符串形式。如下所示

解决方案：

修改样式:

.el-select{
    .el-select__tags {
      flex-wrap: nowrap;
      overflow: overlay;  //当选中数据多于输入框时可设置滚动
    }
     .el-tag {
	background-color: transparent;
	border: none;
	color: #fff;
	font-size: 14px;
	padding-right: 0;
       & ~ .el-tag {
         margin-left: 0;
       }
       &:not(:last-child)::after {
         content: ',';
       }
     }
  .el-tag__close{
	display:none;
  }
}
//下面三个设置滚动效果
 ::-webkit-scrollbar {  
	height:1px;   //表示横向滚动高度

}
//设置滑块样式
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	width: 6px;
	background: #b4bccc
}
//设置滚动条样式
::-webkit-scrollbar-track {
	background: #fff
}