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

效果图

思路与分析

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

注意事项

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

实现过程

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;
      }
    }
  }
}