实现点击表格行变色

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

ng-alain组件st表格,实现点击表格行变色,或者渲染变色的更多相关文章

  1. easyui的datagrid组件,如何设置点击某行不会高亮该行的方式

    easyui的datagrid组件,有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式,有好几种方法可以实现,我举几个,可以根据你具体需求灵活应用: 1.修改easyui的css将高 ...

  2. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  3. table表格实现点击修改 PHP同步数据库 排序

    最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...

  4. 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件

    <title>无标题文档</title> <script type="text/javascript" language="javascri ...

  5. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  6. elementUI表格行的点击事件,点击表格,拿到当前行的数据

    1.绑定事件 2.定义事件 3.点击表格某行的时候,拿到数据]

  7. 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  8. 如何将WORD表格转换成EXCEL表格

    WORD和EXCEL都可以制作表格,但WORD表格与EXCEL表格之间有着很明显的差距,所以在办公中经常会需要将WORD转换成EXCEL,今天小编就教大家一招将WORD表格转换成EXCEL表格. 操作 ...

  9. 【JAVA】JSP+layui框架 静态表格转化成数据表格

    <table lay-filter="demo" class="layui-table" id="excTable"> < ...

  10. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

随机推荐

  1. [C++] - GCC和LLVM对方法 warning: non-void function does not return a value [-Wreturn-type] 的处理差异

    最近做一个C++开源项目发现一个奇怪问题,通过clang编译链接执行程序每到有一个就崩溃了,gcc下则没有此问题. 后来通过调试,发现原因是bool返回的方法是没有return语句!问题是为啥还能通过 ...

  2. WPF之MVVM实践中的Command与CommandParameter

    先记录一下,方便以后复习. https://www.cnblogs.com/babietongtianta/p/3474101.html

  3. Vue 基础学习总结

    介绍 Vue.js 中文文档地址:https://cn.vuejs.org/guide/introduction.html#what-is-vue Vue.js 是什么 Vue (读音 /vjuː/, ...

  4. K8s如何启用cgroup2支持?

    什么是 cgroup ️Reference: control groups(控制组),通常被称为cgroup,是Linux内核的一项功能.它允许将进程组织成分层的组,然后限制和监控各种资源的使用. 内 ...

  5. xshell登陆,查看中文日志出现乱码

    看到乱码,首先想到的是编码问题 linux默认编码格式是utf-8,windows默认gbk [root@backup]# echo $LANGen.US.UTF-8 使用fie命令可以查看到文件信息 ...

  6. 随笔——安卓手机调试微信网页,x5错误页

    如果打开debugx5.qq.com提示您使用的不是x5内核 那么先打开debugmm.qq.com/?forcex5=true 再打开http://debugtbs.qq.com 将进入下面这个页面 ...

  7. redisson分布式锁原理剖析

    redisson分布式锁原理剖析 ​ 相信使用过redis的,或者正在做分布式开发的童鞋都知道redisson组件,它的功能很多,但我们使用最频繁的应该还是它的分布式锁功能,少量的代码,却实现了加锁. ...

  8. 前后端结合解决Excel海量公式计算的性能问题

    背景 在数据密集的业务领域,尤其是金融,保险,税务等行业中,经常需要利用Excel模型,来对业务进行分析和处理.例如: 1.金融投资: 根据模型进行估值计算,并对投资风险进行评估,通过测算出投资的内部 ...

  9. Day26:内部类的详解

    内部类 1.1内部类概述 内部类:就是在一个类中定义另外一个类. 例如我们在A类中定义一个B类,那么B类就是A类的内部类,A则是B的外部类. 好比我们的手机是一个类,而手机内部的零件又属于一个类. 内 ...

  10. [.NET学习]EFCore学习之旅 -2 简单的增删改查

    1.实例化创建数据库上下文类 首先实例化一个数据库操作上下文类,注意到DbContext实现了IDisposable接口,所以使用using语句,避免内存泄露. 2.插入 以Person类为例,先生成 ...