Vue在表格中展示通过和不通过状态

表格

状态列显示通过和不通过状态，通过状态是绿色，不通过状态是黄色。

代码

<template>
    <div>
    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="状态"
        width="100"
        
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === 0 ? 'success' : 'warning'"
            disable-transitions>{{scope.row.tag===0?'通过':'不通过'}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            tag: 0
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            tag: 1
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            tag: 0
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 1
          }]
        }
      },
      methods: {
       
        formatter(row, column) {
          return row.address;
        }
      }
    }
  </script>

核心代码

<el-tag
            :type="scope.row.tag === 0 ? 'success' : 'warning'"
            disable-transitions>{{scope.row.tag===0?'通过':'不通过'}}</el-tag>

通过el-tag展示通过和不通过状态