el-table表格行取消高亮

qq_44852136

已于 2022-09-14 17:46:09 修改

阅读量4k

点赞数 2

文章标签： javascript vue.js 前端 elementui

于 2022-09-14 17:26:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44852136/article/details/126855962

版权

本文介绍如何在 Vue 中使用 Element UI 的 el-table 组件实现表格行的高亮显示和取消高亮功能。通过设置 highlight-current-row 属性和监听 row-click 与 current-change 事件，结合自定义逻辑实现单选行切换时的高亮效果。同时，提供了取消高亮的代码示例，通过 setCurrentRow 方法将行设置为 -1 实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格行选中高亮 highlight-current-row

 <el-table
      ref="singleTableRef"
      v-loading="loading"
      :data="menuList"
      border
      row-key="menuId"
      :default-expand-all="isExpandAll"
      highlight-current-row // 表格行高亮
      @row-click="handleClick" // 行选择事件
      @current-change="handleCurrentChange" //当前行选择
    >

取消高亮：setCurrentRow（）

proxy.$refs.singleTableRef.setCurrentRow(-1)

由于current-change事件只选中一次，因此需要同时使用row-click

let isFirst = ref(false)
let nowRow = ref(false) //此变量保证进行单选行切换时可以成功高亮
function handleCurrentChange(currentRow,oldCurrentRow) {
  if (oldCurrentRow!== undefined && currentRow.menuId !== oldCurrentRow?.menuId) {
    isFirst.value = true
    nowRow.value = true
  }
}
function handleClick(row, column, event) {
  if (!isFirst.value || nowRow.value) {
    isFirst.value = true
    nowRow.value = false
  }else{
    isFirst.value = false
    proxy.$refs.singleTableRef.setCurrentRow(-1)
  }
}