antd design table更改某行数据的样式操作


Posted in Javascript onOctober 31, 2020

antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型是String类型。

例子:

import styless from './component/record.css';--->引入css样式。

css:
.csbsTypes{
 font-family:微软雅黑, "Open Sans", "宋体";
 font-weight: bold;
 }

代码:

<Table
 title={()=><div style={{textAlign: 'center',backgroundColor:'#170A29'}}></div>}
 columns={R1columns}
 dataSource={this.state.RateData}
 pagination={false}
 rowClassName={(record, index) => record.csbsType ==='不限范围'?'csbsTypes':''}-->因为rowClassName方法返回的是String类型,所以直接将样式名字填进去,就会自动查找此样式
/>

显示结果就是:在csbsType ===“不限范围“”的这一行字体会被加粗```

补充知识:vue 给ant design table 组件自定义点击行(选中行)样式和斑马纹样式

写在开头:

element-ui的table组件有几个属性很好用,但是ant-design中table组件是没有的。

比如:

stripe: 是否为斑马纹 table。

highlight-current-row: 是否要高亮当前行。

当然,还有好几个其他的属性,但是本文先只讲这两个。既然element-ui有,ant-design没有,那我在用ant-design的table组件时,想要实现这两个功能怎么办?

答案是凉拌。既然它没有,那就自己写,也就是二次封装。

ok,先来实现这个属性的功能:highlight-current-row。

highlight-current-row

首先,当然是给定义prop变量:highlightCurrentRow;再定义一个另外一个prop变量currentRow。

然后在watch中监听currentRow的变化,每次当currentRow变化的时候,渲染一下上一个选中行和当前选中行的样式。

currentRow (val) {
   if (this.highlightCurrentRow) {
    this.renderRowStyleAfterRowClick(val)
   }
  }

highlightCurrentRow为true的时候,才需要渲染新的样式。

renderRowStyleAfterRowClick:

// 选中某一行后,渲染表格行的样式
  renderRowStyleAfterRowClick (currentRow) {
   const elements = document.getElementsByClassName('ant-table-row')
   const rowSelectionElement = document.getElementsByClassName('row-selection')
   // 获取上一个选中行,并移除它的选中样式
   if (rowSelectionElement.length > 0) {
    rowSelectionElement[0].classList.remove('row-selection')
   }
   // 给当前选中行添加选中行的样式
   if (elements.length > 0) {
    const rowList = [...elements]
    rowList.find(t => t.dataset.rowKey === currentRow.id).classList.add('row-selection')
   }
  }

代码其实很简单:

先拿表格当前页的所有row元素(table组件没有提供当前点击行的原生class)和当前选中row元素。

如果当前有选中的行,先移除这个之前添加过的css class 'row-selection'。

然后再给当前选中行添class 'row-selection'。

那个这里就有疑问了,我怎么样才能找到当前行呢?table组件并没有提供当前选中行的class(至少我没有找到),所有我只能t通过class name 'ant-table-row' 拿到所有row, 然后再从中找出你当前点击的那一行。

这个时候需要利用一个很关键的属性: rowKey

还记得ant-design table组件的api文件最后面的那个注意吗?

antd design table更改某行数据的样式操作

这里提醒你,rowKey用来指定数据列的住建,也就是每一行的唯一标志,那么好办了 。

我们引用table组件的时候,将rowKey设置为表格数据源的主键,这样我们就能从元素中的dataset中获取到rowKey,然后找出当前点击行。

rowList.find(t => t.dataset.rowKey === currentRow.id)

然后给这个元素动态添加class ‘'row-selection'。

// 给表格添加悬停样式和当前点击行添加选中样式
.ant-table-row {
 &:hover > td {
  background-color: @background-color !important;
  color: #fff !important;
 }
 &.row-selection {
  background-color: @background-color !important;
  color: #fff !important;
 }
}

这里设置hover时行样式和点击时行样式一样,是为了不让行点击后,该行悬停时,出现其他不一样的样式。如果不想设置成一样,可以单独设置行点击时的hover样式和行点击时的样式一样。

// 给表格添加悬停样式和当前点击行添加选中样式
.ant-table-row {
 &.row-selection {
  background-color: @background-color !important;
  color: #fff !important;
  &:hover > td {
    background-color: @background-color !important;
    color: #fff !important;
   }
 }
}

这样,我们的目的就达到了。

在行点击时,修改currentRow,table组件内部通过watch监测到currentRow的变化,就会触发改变样式的方法。

<s-table
    ref="table"
    size="default"
    rowKey="id"
    :columns="columns"
    :verticalScroll="false"
    :data="loadData"
    :stripe="true"
    :highlightCurrentRow="true"
    :currentRow="selectedCustomer"
    :customRow="rowClick">
...
rowClick: record => ({
    // 事件
    on: {
     click: () => {
      this.handleCurrentRowChanged(record)
     }
    }
   })
handleCustomerChanged (record) {
  this.selectedCustomer = record
}

这样就可以了。

stripe(斑马纹行)

实现行的stripe功能,还是比较简单的。

添加prop 变量 stripe, 在组件的update函数钩子内,调用实现斑马纹的方法就可以了

updated () {
  if (this.stripe) {
   this.renderStripe()
  }
}

实现斑马纹的方式有多种,这里只展示期中一种:

// 对表格行进行斑马行格式显示
  renderStripe () {
   const table = document.getElementsByClassName('ant-table-row')
   if (table.length > 0) {
    const rowList = [...table]
    rowList.forEach(row => {
     const index = rowList.indexOf(row)
     if (index % 2 !== 0) {
      row.style.backgroundColor = '#f7f7f7'
     } else {
      row.style.backgroundColor = '#ffffff'
     }
    })
   }
  },

获取到table的所有行,然后对其进行隔行设置不一样的行背景色,目的就达到了。

有其他更多方式的朋友欢迎补充。

以上这篇antd design table更改某行数据的样式操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
antd配置config-overrides.js文件的操作
Oct 31 #Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 #Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 #Javascript
antd多选下拉框一行展示的实现方式
Oct 31 #Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 #Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 #Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 #Javascript
You might like
php创建、获取cookie及基础要点分析
2015/01/26 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python调用shell的方法
2013/11/20 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
高二地理教学反思
2014/01/24 职场文书
人事专员工作职责
2014/02/22 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015年中秋节主持词
2015/07/30 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP