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