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

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

 

方法二：element-ui formatter

 

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

 

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中使用

 

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

 

 

 

 

 

 

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