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 17 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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数据库配置文件一般做法分享
2012/07/07 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js 学习笔记(三)
2009/12/29 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python制作爬虫采集小说
2015/10/25 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
详解Python 函数如何重载?
2019/04/23 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
餐饮业会计岗位职责
2013/12/19 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
六一儿童节主持词
2014/03/21 职场文书
励志演讲稿范文
2014/04/29 职场文书
承诺书格式
2014/06/03 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python