ng-alain组件st表格，实现点击表格行变色，或者渲染变色

Posted 2021-02-22 sugartang

实现点击表格行变色

html文件

<st #st  [data]="data" (change)="changeClick($event)" [columns]="columns" [page]="page"
                [widthMode]="STWidthMode" [scroll]="{ x: ‘350px‘, y: ‘400px‘ }">
              </st>

ts文件函数

 // 點擊表格行改變事件1
  changeClick(e: STChange) {
    if(this.lastItem){
      this.lastItem[‘_rowClassName‘] = ‘‘;
    }
    this.setSelectEdit(true);
    // console.log(e)
    e.click.item[‘_rowClassName‘] = ‘sign-tr‘;
    this.lastItem = e.click.item;
  }
  // 點擊表格行改變事件2

less文件

::ng-deep{
  .sign-tr{
      background-color: #93cafe !important; 
  }
}

恕我直言，这玩意感觉有点慢

也很少有这种需求吧？？？？？

渲染变色；

下面的内容参考来自：https://blog.csdn.net/sinat_41806435/article/details/101534744

html中，增加 rowClassName属性

<st #st [rowClassName]="rowClassName" [data]="url" [columns]="columns" [page]="page"></st>

根据某条件，返回类名

rowClassName(record: STData, index: number) {
  if(record.leftDay < 0) {
    return ‘sign-tr‘;
  }
}

 css中

::ng-deep{
    .sign-tr{
        background-color: #fabeb9 !important; 
    }
}