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;
    }
  }
}

 

都能達到目的，按需要選擇。