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

你可能感兴趣的:(Vue + ElementUI 动态显示表格某个单元格:值和颜色)