Vue+ElementUI动态显示el-table某列（值和颜色）的方法

方法一：结合 template scope组件和 v-if 语法判断
例1：值

<el-table-column prop="status" label="车辆状态">
  <template scope="scope">
    <span v-if="scope.row.status=== 1">在线</span>
    <span v-else-if="scope.row.status=== 0">离线</span>
  </template>
</el-table-column>

例2：值和颜色

<el-table-column prop="breakdownGrade" label="故障等级">
     <template scope="scope">
         <span v-if="scope.row.breakdownGrade=== '0'" style="color: #909399">轻微故障(一级)</span>
         <span v-else-if="scope.row.breakdownGrade=== '1'" style="color: #e6a23c">⼀般故障(⼆级)</span>
         <span v-else-if="scope.row.breakdownGrade=== '2'" style="color: #f56c6c ">严重故障(三级)</span>
     </template>
</el-table-column>

方法二：使用 Element-ui formatter属性 v-bind 绑定

<el-table-column 
  prop="status"
  align='center'
  label="车辆状态"
  :formatter="formatStatus">
</el-table-column>

formatStatus(row, column) {
  return row.status == '0' ? '在线' : '离线'
}

方法三：在 data 对象中绑定属性并结合 el-tag 标签

1. 在 data 中定义相关值

data () {
  return {
    carStatus: {
      'used': { 'status': '使用中', 'type': 'primary' },
      'noused': { 'status': '未使用', 'type': 'info' },
      'broken': { 'status': '故障', 'type': 'danger' },
      'trash': { 'status': '废弃', 'type': 'warning' }
    }
  }
}

2. 在 template 中使用

<el-table-column prop='status' label='车辆使用状态'>
  <template slot-scope="scope">
    <div slot="reference" class="carUsedCondition">
      <el-tag :type="carStatus[scope.row.status].type">
        {{carStatus[scope.row.status].status}}
      </el-tag>
    </div>
  </template>
</el-table-column>

新手学习，如有不妥之处，欢迎指正！

标签：status,动态显示,Vue,el,data,离线,故障,type,row
来源： https://www.cnblogs.com/arek/p/16572726.html