antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型String类型。
例子：
import styless from './ponent/record.css';--->引入css样式。
css:
.csbsTypes{
font-family:微软雅黑, "Open Sans", "宋体";
font-weight: bold;
}
代码：
}
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) {
    derRowStyleAfterRowClick(val)
  }
  }
highlightCurrentRow为true的时候，才需要渲染新的样式。
renderRowStyleAfterRowClick：
// 选中某一行后，渲染表格行的样式
  renderRowStyleAfterRowClick (currentRow) {
  const elements = ElementsByClassName('ant-table-row')
  const rowSelectionElement = ElementsByClassName('row-selection')
  // 获取上一个选中行，并移除它的选中样式
  if (rowSelectionElement.length > 0) {
    rowSelectionElement[0].ve('row-selection')
  }
  // 给当前选中行选中行的样式
  if (elements.length > 0) {
    const rowList = [...elements]
    rowList.find(t => wKey === currentRow.id).classList.a('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文件最后面的那个注意吗？
这里提醒你，rowKey用来指定数据列的住建，也就每一行的标志，那么好了 。
们引用table组件的时候，将rowKey设置为表格数据源的主键，这样们就能从元素中的dataset中获取到rowKey，然后出当前击行。
rowList.find(t => wKey === 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的变化，就会触发改变样式的方法。
...
rowClick: record => ({
    //
    on: {
    click: () => {
      this.handleCurrentRowChanged(record)
    }
    }
  })
handleCustomerChanged (record) {
  this.selectedCustomer = record
}
这样就可以了。
stripe(斑马纹行)
实现行的stripe功能，还比较简单的。
prop 变量 stripe， 在组件的update函数钩子内，调用实现斑马纹的方法就可以了
updated () {
  if (this.stripe) {
  derStripe()
  }
}
实现斑马纹的有多种，这里只展示期中一种：
// 对表格行进行斑马行格式显示
  renderStripe () {
  const table = ElementsByClassName('ant-table-row')
  if (table.length > 0) {
ant design
    const rowList = [...table]
    rowList.forEach(row => {
    const index = rowList.indexOf(row)
    if (index % 2 !== 0) {
      row.style.backgroundColor = '#f7f7f7'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。