antd-vue中table行高亮效果实现

【方式一】：通过设置customRow达到目的，点击时遍历所有行设置为正常颜色，把当前行设置为特殊颜色（高亮色）

HTML：

<a-table
  ref="table"
  size="small"
  rowKey="id"
  bordered
  :columns="physicalSurveyColumns"
  :data-source="physicalSurveyData"
  :pagination="pagination"
  :customRow="customRow"
>
a-table>

JS -> methods：

// 自定义行
customRow(record) {
  return {
    on: {
      click: (e) => {
        const oldList = document.querySelectorAll('.checked-td-of-add-table')
        if (oldList) {
          for (let j = 0; j < oldList.length; j++) {
            oldList[j].classList.remove('checked-td-of-add-table')
          }
        }

        const children = e.target.parentNode.children
        for (let i = 0; i < children.length; i++) {
          children[i].classList.add('checked-td-of-add-table')
        }
      }
    }
  }
}

CSS：

/deep/ .checked-td-of-add-table {
  background-color: rgba(24, 144, 255, 0.5);
}

 

【方式二】：通过设置customRow达到目的，点击时记录ID，每一行就会自动加载style的样式，这里可以使用条件来达到加载不同样式的目的，比如设置行背景色：'background-color': record.id === this.physicalSurveyCurrRowId ? '#FFFF99' : 'white'

HTML：

<a-table
  ref="table"
  size="small" rowKey="id" bordered :columns="physicalSurveyColumns" :data-source="physicalSurveyData" :pagination="pagination" :customRow="customRow" > a-table>

JS -> methods：

// 自定义行
customRow(record, index) {
  return {
    // 自定义属性，也就是官方文档中的props，可通过条件来控制样式
    style: {
      // 字体颜色
      'color': record.id === this.physicalSurveyCurrRowId ? 'orange' : 'rgba(0, 0, 0, 0.65)',
      // 行背景色
      'background-color': record.id === this.physicalSurveyCurrRowId ? '#FFFF99' : 'white'
      // // 字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体样式-斜体
      // 'font-weight': 'bolder'
    },
    on: {
      // 鼠标单击行
      click: event => {
        // 记录当前点击的行标识
        this.physicalSurveyCurrRowId = record.id
      }
    }
  }
}

 

【方式三】：与方式一类似，只是代码实现方式不同，通过设置customRow达到目的，点击时遍历所有行设置为正常颜色，把当前行设置为特殊颜色（高亮色）

HTML：

<a-table
  ref="table"
  size="small" rowKey="id" bordered :columns="physicalSurveyColumns" :data-source="physicalSurveyData" :pagination="pagination" :customRow="customRow" > a-table>

JS -> methods：

// 自定义行
customRow(record, index) {
  return {
    on: {
      // 鼠标单击行
      click: event => {
        event.currentTarget.parentNode.querySelectorAll('tr').forEach(item => {
          item.style.background = 'white'
        })
        event.currentTarget.style.background = 'green'
      }
    }
  }
}

 

【方式四】：通过设置customRow与rowClassName达到目的，点击时记录ID，rowClass就会根据是否是点击时的ID来加载指定的样式

HTML：

<a-table
  ref="table"
  size="small"
  rowKey="id"
  bordered
  :columns="physicalSurveyColumns"
  :data-source="physicalSurveyData"
  :pagination="pagination"
  :customRow="customRow"
  :rowClassName="setRowClassName"
>
a-table>

JS -> methods：

// 选中行
customRow(record, index) {
  return {
    on: {
      click: () => {
        this.physicalSurveyCurrRowId = record.id
      }
    }
  }
},
setRowClassName(record) {
  return record.id === this.physicalSurveyCurrRowId ? 'clickRowStyl' : ''
}

CSS：设置自定义行的悬浮样式

.ant-table-tbody {
  .clickRowStyl:hover {
    td {
      background-color: #00b4ed;
    }
  }
}

 

都能达到目的，按需要选择。