图示

在这里插入图片描述

主要代码

<el-table-column prop="tagNames" label="客户标签" min-width="250">
     <template slot-scope="{ row }"> 
      <div class="tagName"  v-if="row.customerTag">
           <div class="tagList">
               <div  v-if="row.customerTag.businessTagNames">
                     <div  
                      style="background-color: #67c23a"
                      class="div"
                      v-for="(item,index) in row.customerTag.businessTagNames.split(',') "
                      :key="index" >
                          <span
                              class="butColor"
                              style="webkitBoxOrient:vertical"
                          >
                              {{ item }}
                          </span>
                   </div>
               </div>
            </div>
       </div>
   </template> 
</el-table-column>

.tagName {
    display: flex;
    .tagList {
        width: 200px;
        overflow: hidden;
        display: flex;
        // flex-wrap: wrap;
        div{
         display: flex;
            div{
                width: 100px;
                height: 33px;
                border-radius: 15px;
                padding: 2px 10px;
                color: #fff;
                font-size: 12px;
                transform: scale(0.8);
                display:flex;
                align-items:center;
                justify-content: center;
                .butColor {
                    font-size:12px;
                    overflow:hidden;
                    text-overflow:-o-ellipsis-lastline;
                    text-overflow:ellipsis;
                    display:-webkit-box;
                    -webkit-line-clamp:2;
                    line-clamp:2;
                    -webkit-box-orient: vertical;
                    //会编译失败，写成行内样式就行
                    //编译失败原因是：webpack中autoprefixer自动移除老式过时的代码
                    }
            }
        }
        .span {
            align-self: center;
        }
    }
}