vue+element 表格formatter数据格式化并且插入html标签 ;

发布时间 2023-12-20 16:23:14作者: 以后。h

formatter的用法:

 

 
列表内容回显, orderStatus  0  是未处理, 1是已处理等,不能直接展示,所以需要 formatter
 <el-table-column label="订单状态" prop="orderStatus" :formatter="statusFormatter"> </el-table-column>   
methods:
/ 审核状态
    statusFormatter(row){
      if(row.orderStatus == 0){
        return <span style="color:red">未处理</span>
      }else if(row.orderStatus == 1){
        return <span style="color:#2fc171">已处理</span>
      }
    },
 
或者:
 <el-table-column label="状态" min-width="120">
          <template v-slot="{ row }">
            <span v-if="row.orderStatus == 0" style="color: #db8709"
              >未提交</span
            >
            <span v-else-if="row.orderStatus == 1" style="color: #098ddb"
              >已提交</span
            >
            <span v-else-if="row.orderStatus == 2" style="color: green"
              >审核通过</span
            >
            <span v-else-if="row.orderStatus == 3" style="color: #f00"
              >审核未通过</span
            >
          </template>