tabel里面样式总结

最新推荐文章于 2024-09-09 09:01:46 发布

原创

最新推荐文章于 2024-09-09 09:01:46 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

在这里插入图片描述

 <el-table-column prop="labelList" label="客户标签" min-width="250">
          <template slot-scope="scope">
            <template v-if="scope.row.labels.length">
              <el-row class="row-tag">
                <el-col :span="20" :class="scope.row.showTags?'':'isUnfold'">
                  <span class="span-tag" v-for="(item,index) in scope.row.labels" :key="index" :title="item">
                    <el-tooltip :content="item" placement="top">
                      <span>{
   
   {
   
    item }}</span>
                    </el-tooltip>
                  </span>
                </el-col>
                <el-col :span="4">
                  <a style="border:0;" @click="scope.row.showTags = !scope.row.showTags"><i :class="scope.row.showTags?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                    {
   
   {
   
    scope.row.showTags ? '收起': '展开' }}</a>
                </el-col>
              </el-row>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>




.row-tag {
   
   
  .el-col-4 {
   
   
    width: 100px;
  }
  .el-col-20 {
   
   
    width: calc(100% - 100px);
  }
  .isUnfold {
   
   
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .span-tag {
   
   
    display: inline-block;
    width: 78px;
    height: 28px;
    padding: 0 5px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    color