el-table列表数据刷新后定位到之前点击的那一行

Distance_123

已于 2024-12-26 10:44:23 修改

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js

于 2020-12-01 17:59:13 首次发布

本文链接：https://blog.youkuaiyun.com/Distance_123/article/details/110423280

博客围绕el-table列表数据刷新后定位到之前点击行的需求展开。需求是点击编辑出现弹框，修改信息关闭弹框后刷新表格并定位到原行。实现步骤包括给el-table绑定事件，在data中定义值记录点击行位置和索引，保存修改更新表格并定位。

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

el-table列表数据刷新后定位到之前点击的那一行：

需求描述：点击表格操作列表中的编辑，会出现点击该行的弹框信息，对信息进行修改后，关闭弹框，刷新表格，并定位到之前点击编辑的那一行，注：我没给表格高度，如果表格设置了高度，需对对应部分进行修改

首先给el-table绑定**@row-click=“clickRow”**事件
在data()中定义一个值记录点击行的位置，windowScroll是我定义的值

clickRow(row, column, event){
    this.windowScroll = event.pageY
},

点击编辑按钮时，记录下表格对应的$index，在data()中定义一个rowIndex去存储这个值

//template部分
<el-button  @click="personAuth(scope.$index,scope.row)">编辑</el-button>
//script部分
toEdit(index,data){
    //index为表格对应的行数
    //data是这一行对应的值，这里不做说明
    this.rowIndex = index;
},

保存弹框中所做的修改，更新到表格中，并定位到之前的位置

 perAutoBack(){
      //关闭弹框
      this.childDetailShow = false;
      //更新数据
      this.getList()
      //浏览器定位
      window.scrollTo(0, this.windowScroll - 150)
 },

关闭弹框，列表数据会更新

//this.list为el-table的数据，multipleTable需给el-table设置ref="multipleTable"
watch: {
    list: function() {
        this.$nextTick(function() {
            this.$refs.multipleTable.setCurrentRow(this.list[this.rowIndex])
        })
    }
},