[element-ui]el-table中设置类似标签的样式

最新推荐文章于 2024-06-21 10:52:39 发布

原创最新推荐文章于 2024-06-21 10:52:39 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#el-table的类似标签

element-ui 同时被 2 个专栏收录

28 篇文章

订阅专栏

el-talbe

6 篇文章

订阅专栏

本文介绍如何在Element-UI的el-table组件中实现类似标签的样式。通过定位、添加class以及利用CSS3伪类绘制白色三角形，避免使用图片。注意设置容器高度、宽度、padding-bottom，以及正确计算三角形尺寸。实现过程中，js部分无操作，主要在HTML和CSS上下功夫。

效果图

在这里插入图片描述

思路与分析

可以直接使用定位做
- 给对应的单元格添加相应的class类
不能使用图片做,要使用背景和css3的伪类(画白色的三角)

注意事项

自身容器高度的限定及宽度的限定,
自身padding-bottom的设定,避免字过长时压住白色三角,
白色三角的高度不能过长,效果图上是0.05rem;且border宽是父级容器宽的一半,底部的border高度是border宽的一半
父级高度的限定,要留距离标签的空白

实现过程

1. js 部分

无

2.html 部分

<el-table-column prop="syncErpDate" label="" width="100" class-name="options pending2" align="center" show-overflow-tooltip>
  <template slot-scope="scope">
    <div class="pending-wrap" v-if="scope.row.status === 1">
      <span class="pending-txt">已完成收款单</span>
    </div>
  </template>
</el-table-column>

3.css部分

.pending2 {
  position: relative;
  .pending-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width:.18rem;
    height:.50rem;
    line-height: 1;
    //font-size: 0.12rem;
    background-color: #C1272D;
    color:#fff;
    .pending-txt{
      box-sizing: border-box;
      padding-top:.05rem;
      position: relative;
      display: inline-block;
      height:.50rem;
      &::before{
        position: absolute;
        display: inline-block;
        content: '';
        bottom: 0;
        right: 0;
        width:0;
        height:0;
        border:.09rem solid transparent;
        border-bottom:0.045rem solid #fff;
      }
    }
  }
}