el-table-column 规定超过多少个文本才显示。。。

北海军

于 2018-10-26 10:49:16 发布

阅读量5.8k

点赞数 2

分类专栏： element

本文链接：https://blog.youkuaiyun.com/qq_39237755/article/details/83411477

版权

element 专栏收录该内容

23 篇文章

订阅专栏

<el-table-column
  prop="carOwner" label="车主"
  header-align="center" align="center">
  <template slot-scope="scope">
    <div style="position: relative">
      <div class="hiddenOverText" :title="scope.row.carOwner">{{scope.row.carOwner}}</div>
      <span v-if="JSON.stringify(scope.row.carOwner).length > 36" class="overText">...</span>
    </div>
  </template>
</el-table-column>

// 样式

.hiddenOverText {
  max-height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  line-height: 23px;
}
.overText {
  position: absolute;
  bottom: 0px;
  content: '...';
  right: -8px;
}
.noText {
  width: 100% !important;
}

// 效果图