The filter conditions in the Element-ui table change the table content and Status to display different colors

renderings

background

The database reads numbers

code directly

In the component 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]
    }
  },