Element-ui table中过滤条件变更表格内容和Status 来显示不同颜色

效果图

背景

数据库读取出来的是数字

直接上代码

组件template中：

<el-table-column class-name="status-col" label="状态" width="110" sortable>
      <template slot-scope="scope">
          <el-tag :type="scope.row.state | statusFilter">{{scope.row.state | formatStata}}</el-tag>
      </template>
</el-table-column>

js中

  filters: {
    // el-tag类型转换
    statusFilter(status) {
      const statusMap = {
        2: 'info',
        4: 'danger',
        5: 'success'
      }
      return statusMap[status]
    },
    // 状态显示转换
    formatStata(status) {
      const statusMap = {
        1: '未发布',
        2: '待审核',
        3: '审核通过',
        4: '审核失败',
        5: '发布成功',
        6: '发布失败'
      }
      return statusMap[status]
    }
  },