elementui表格列表里面显示额外内容（例如持续的错误状态提醒）

1.需求：elementui的table表格里显示这单是投诉单（并有动画效果持续提醒）
2.效果 有动态提示效果

//配置代码
  {
    
    
    props: 'orderNo',
    label: '订单编号',
    align: 'center',
    width: 200,
    fixed: 'left',
    langKey: 'orderManage.allOrderList.tableColumns.orderNo',
    formatter: (row) => {
    
    
      let showLow = row.lowSatisfactionFlg == 'Y' ? 'block' : 'none',
        showCom = row.complaintFlg == 'Y' ? 'block' : 'none'
      return `
                <div>
                  <p class="flex-r">
                    <b class="zd-tag" style="display:${
      
      showLow}">满意度低(${
      
      $t('option.satisfaction.lowSatisfaction')})</b>
                    <b class="zd-tag" style="display:${
      
      showCom}">有投诉(${
      
      $t('option.satisfaction.haveComplaints')})</b>
                  </p>
                  <p class="font-14">${
      
      row.orderNo}</p>
                </div>
          `
    },
  },
//css代码
.zd-tag{
    
    
    padding: 0 5px;
    border: 1px solid #e4393c;
    border-radius: 7px;
    font-size:12px;
    color:#e4393c;
    line-height: 18px;
    margin-right: 5px;
    box-shadow: 0 4px 5px rgba(53, 1, 1, .3);
    /* overflow: hidden; */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
    
    
    0% {
    
    
        opacity: .4;
        box-shadow: 0 1px 2px rgba(245, 108, 108, .4), 0 1px 1px rgba(228, 57, 60, 0.1) inset;
    }

    100% {
    
    
        opacity: 1;
        border: 1px solid rgba(228, 57, 60, 0.7);
        box-shadow: 0 1px 20px #f56c6c, 0 1px 20px #e4393c inset;
    }
}