vue过滤器之样式绑定

需求

 业务有个很常用的场景是渲染一个结果列表页时，后端返回的状态码一般只能是数字
 但我们在table中渲染的时候只渲染数字显然并不能很直观的反馈给使用者，所以结合tag的type属性绑定，就能配合过滤器来实现颜色标识和文本映射，体验明显更好~

vue代码

首先vue实例中定义过滤器~

export default {
  // -1失败 0未启动 1运行中 2运行完成 3记录不存在
  filters: {
    statusFilter(status) {
      const statusMap = {
        '-1': '失败',
        '0': '未启动',
        '1': '运行中',
        '2': '运行完成',
        '3': '记录不存在'
      }
      return statusMap[status]
    },
    typeFilter(status) {
      const statusMap = {
        '-1': 'danger',
        '0': '',
        '1': 'success',
        '2': 'info',
        '3': 'warning'
      }
      return statusMap[status]
    }
  },
  }

模板代码

之后在模板里使用就好啦！

      <el-table-column
        label="状态"
        prop="status"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | typeFilter">
            {{ scope.row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>