[element-ui]el-table中设置类似标签的样式_elementui <el-rate>标签样式-优快云博客

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/100561195

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

思路与分析

可以直接使用定位做
- 给对应的单元格添加相应的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;
      }
    }
  }
}