css flex 自动适应... 展示效果

55 阅读1分钟

效果

upload_83c974b6b5c9492c27465e3e8ac1b375.png

实现代码

.info-item {
  display: flex;
  align-items: center;

  .value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  span {
    white-space: nowrap;
  }

  .btn-more {
    color: $-theme;
    cursor: pointer;
    margin-left: 4px;
  }
}
<el-table-column label="跟进记录" min-width="140">
  <template #default="{ row }">
    <div class="info-item">
      <span v-if="row.lastFollowInfo" class="value">{{ row.lastFollowInfo }}</span>
      <span v-else>-</span>
      <span v-show="row.lastFollowInfo" class="btn-more" @click.stop="followMore(row)"> [更多] </span>
    </div>
  </template>
</el-table-column>