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 学习笔记(七)字符串的连接
Dec 31 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
微信小程序实现留言板
Oct 31 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
聊聊JS ES6中的解构
Apr 29 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数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
python 实现list或string按指定分段
2019/12/25 Python
香港交友网站:be2香港
2018/07/22 全球购物
自我鉴定范文300字
2013/10/01 职场文书
自荐信格式范文
2013/10/07 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
服务宗旨标语
2014/07/01 职场文书
村班子对照检查材料
2014/08/18 职场文书
大型公益活动策划方案
2014/08/20 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
2014年销售员工作总结
2014/12/01 职场文书
观后感开头
2015/06/19 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android