Vue + ElementUI 动态显示表格某个单元格：值和颜色

方法一：直接在template scope 使用v-if判断

<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>

 

方法二：element-ui formatter

 

1. el-table-column 绑定formatter属性

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

 

2. 定义绑定的方法

formatStatus(row, column) {
  return row.status == 'Y' ? '已执行' : '未执行'
},

 

方法三：在data对象中静态绑定属性

 

1. 在data中定义相关值

data () {
  return {
    ASSET_STATUS: {
      '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="name-wrapper" style="text-align: center">
      <el-tag :type="ASSET_STATUS[scope.row.status].type">
        {{ASSET_STATUS[scope.row.status].status}}
      </el-tag>
    </div>
  </template>
</el-table-column>

 

！！！！可以使用element ui 的 e-tag标签来显示不同的背景颜色！

 

 

 

 

 

 

转载于:https://my.oschina.net/u/264284/blog/2872831