vxe-table设置选中行的样式

最新推荐文章于 2025-04-25 11:47:52 发布

ivy123456_

最新推荐文章于 2025-04-25 11:47:52 发布

阅读量332

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/wenwen123456_/article/details/145575329

版权

需求是用户选中的这行数据的时间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 //用户选中的数据