状态根据后台返回的数值对应渲染成文字与相应图标

一：表格样式（状态根据后台返回的数值对应渲染成文字与相应图标）

<template>
  <div>
    <div class="el-tables">
      <el-table
        class="eltable"
        v-loading="loading"
        element-loading-text="加载中..."
        @row-click="getDataClick"
        :data="datalist"
        ref="datalist"
        :header-cell-style="{
          backgroundColor: '#4778C7',
          color: '#fff',
          fontSize: '15px',
        }"
        tooltip-effect="dark"
      >
        <el-table-column prop="department" label="部门名称"> </el-table-column>
        <el-table-column prop="systemName" label="系统名称"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.statusNum == 1" >
              <svg class="icon" aria-hidden="true">
                 <use xlink:href="#icon-form_icon_normal"></use>
              </svg>
            </span>
            <span v-if="scope.row.statusNum == 0" >
              <svg class="icon" aria-hidden="true">
                 <use xlink:href="#icon-zu"></use>
              </svg>
            </span>
            &nbsp;&nbsp;
            <span class="statustit">{{ scope.row.statusNum == 1 ? "已处理" : "未处理" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template>
            <el-button size="mini" @click="dialogVisible = true"
              >详情</el-button
            >
          </template>
        </el-table-column>

        <template v-slot:empty>
          <span style="color: red">
            <!-- <img
              src="../assets/img.jpg"
            /> -->
            <p style="font-size: 32px; color: #f0f0f0; padding: 30px 0px">
              暂无数据！
            </p>
          </span>
        </template>
      </el-table>
    </div>
  </div>
</template>

二：<script>标签内部分

export default {
  data() {
    return {
      datalist: [], //表格数据（从接口拿到值填充进此数组）
      thisRowData: {}, //当前行数据
    };
  },
};
</script>