element-ui 表格动态改变某一格样式

用到cell-style方法:

        <el-table ref="table" :cell-style="tableRowStyle" :data="tableData" border >

js 注意:与平时表格数据不同,举例数据需要循环

重点!!:foreach失效,需要用for in !!
tableRowStyle({ row, column, rowIndex, columnIndex }) {
      if (row.ceshi.length) {
        if (columnIndex !== 0) {
          console.log(row.ceshi, column, rowIndex, columnIndex, 'val.....')
          columnIndex = columnIndex - 1
          for (let index = 0; index < row.ceshi.length; index++) {
            if (this.postList[columnIndex].value === row.ceshi[index].postId) {
              return 'background:#F5F7FA;!important;'
            }
          }
        }
      }
    },

简单数据举例:

tableRowStyle({ row, column, rowIndex, columnIndex }) {
  
 if (columnIndex == 0) {
        
    return 'background:#F5F7FA;!important;'

 },

ht背景色

<style lang='scss'>
.quiry{
 .el-table th.el-table__cell{
    background-color:rgb(128,100,162);
    color: #fff;
  }
}
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容