vue項目中表格中的某一列使用Tag標簽來展示不同的狀態

描述：在table中使用Tag標簽來展示不同的狀態（Tag標簽是不同的顏色），后台獲取到狀態的id。通過id來設置不同的顏色。

<div class="table-changes-column-color">
  <!-- 表格的有關於狀態的那一列根據不同的狀態使用不同的顏色 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="狀態" width="200">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.textColor == 1 ? 'success' : scope.row.textColor == 2?'danger': scope.row.textColor == 3?'info':'warning'"
          >{{scope.row.statusText}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</div>

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄',
        textColor: 1,
        statusText: '啟用'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄',
        textColor: 2,
        statusText: '報廢'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄',
        textColor: 3,
        statusText: '停用'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄',
        textColor: 4,
        statusText: '未歸還'
      }]
    }
  }
}