vxe-table设置选中行的样式

需求是用户选中的这行数据的时间a,如果晚于外部定义的时间b,这一行数据设置背景色为红色,否色为绿色,且用户没选的数据不受影响,背景色不变

首选给vxe-table设置行样式需要用到“row-class-name ” 属性


html代码

<vxe-table
        ref="popupTable"
        :data="data"
        border
        resizable
        stripe
        :header-cell-style="{
          'text-align': 'center',
          color: '#000000',
          backgroundColor: '#f2f2f2',
          width: 'auto'
        }"
        height="560px"
        :cell-style="{ 'text-align': 'center', color: '#000000' }"
        :row-class-name="rowDialogClassName"
        :seq-config="{ seqMethod }"
        :row-config="{ isHover: true, keyField: 'id' }"
        :checkbox-config="{ reserve: true }"
      >
        <vxe-column fixed type="checkbox" width="50" />
        <vxe-column type="seq" title="序号" width="60" />
 </vxe-table>

具体方法实现

//弹框内行样式
const rowDialogClassName = ({ row, rowIndex, $rowIndex }) => {
  const aTime = new Date(b)
  let hasMatch = false
  for (const item of state.selectionList) {
    let isEqual = true
    const keys = Object.keys(row)
    for (const key of keys) {
      if (item[key] !== row[key]) {
        isEqual = false
        break
      }
    }
    if (isEqual) {
      hasMatch = true
      const itemTime = new Date(item.a)
      const itemTimeOnlyDate = new Date(
        itemTime.getFullYear(),
        itemTime.getMonth(),
        itemTime.getDate()
      )
      if (aTime < itemTimeOnlyDate) {
        return 'red-row'
      } else if (aTime >= itemTimeOnlyDate) {
        return 'yellow-row'
      }
    }
  }
  return hasMatch ? '' : ''
}

state.selectionList //用户选中的数据


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值