el-table 编辑后即使刷新列表也保持先前编辑行高亮状态

最新推荐文章于 2025-03-02 20:53:31 发布

jiaoのpan

最新推荐文章于 2025-03-02 20:53:31 发布

阅读量1.5k

点赞数 2

分类专栏： Vue 工作

原文链接：https://blog.youkuaiyun.com/liny000/article/details/89029516

版权

工作同时被 2 个专栏收录

18 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

本文介绍如何在Element UI的el-table组件中实现点击行高亮，并在数据刷新后仍保持该状态。通过使用row-key属性及getRowKeys方法，可以为每一行设置唯一标识，从而在数据更新时保留用户的选中状态。

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

问题:

el-table 有个highlight-current-row属性,使用该属性后,当我们点击某行时,该行高亮显示.但是当table表数据进行刷新时，之前的高亮状态就消失了。因此仅仅使用highlight-current-row属性,满足不了我的需求。

解决方案

a.使用row-key属性绑定方法

b.在js或者Vue文件中添加row-key属性绑定的方法getRowKeys()，返回唯一标识的一个值

在这里插入图片描述

<el-table :data="tabledata" :row-key="getRowKeys"  highlight-current-row>

    //methods 添加函数
    getRowKeys(row){
        return row.id;
    }
    //data数据增加一个id用于唯一标识
          tableData: [{
            id:0,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id:1,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
             id:2,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id:3,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]