Vue+elementUI分页后使用splice()删除某一行时出错

Question

项目有个表格页面使用了elementUI来做,且开启了分页.

数据渲染完成后,测试删除功能发现个问题:

点击"删除"后,除了第一页正常外,第二页开始,无论点击的是哪一行的数据,删除的都是第一行(0)的数据...,

我试过将数据直接写在vue里渲染而不是从后端接口拿,结果也是一样的

也试过将要删除的行的scope.$index和数据的id打印出来看过,和点击的是一致的,但删除的依然是第一行的.是不是我的分页没配置好,还是我的删除方式有问题

相关代码

删除方法

delete (rowData) { // 删除文章
      console.log(rowData)
      this.tableData.splice(rowData, 1)
    },

分页代码

<el-table border :data="tableData.slice((currentPage-1)*pagesize, currentPage*pagesize)" :row-class-name="tableRowClassName">
          <el-table-column label="ID" prop="id" width="100"></el-table-column>
          <el-table-column label="标题" prop="title" width="250"></el-table-column>
          <el-table-column label="副标题" prop="stitle" width="250"></el-table-column>
          <el-table-column label="最后修改时间" prop="date" width="180"></el-table-column>
          <el-table-column label="类别" prop="type" width="100"></el-table-column>
          <el-table-column label="标签" prop="tag" width="100"></el-table-column>
          <el-table-column label="发布人" prop="pubilsher" width="100"></el-table-column>
          <el-table-column label="状态" prop="status" width="100"></el-table-column>
          <el-table-column label="操作" width="450">
            <template slot-scope='scope'>
              <el-button size="mini" type="info" @click.native.prevent="delete(scope.$index)">删除</el-button>
              <el-button size="mini" type="primary" @click.native.prevent="edit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
<div id="pages">
      <el-pagination background layout="prev, pager, next" :total="tableData.length" @current-change='currentChange'></el-pagination>
    </div>

data () {
    return {
      pagesize: 10,
      currentPage: 1,
      tableData: [ //表格的数据,从后端拿
      ]
    }
  },
  created: function () {
    this.total = this.tableData.length
  },

currentChange (currentPage) {
      this.currentPage = currentPage
    }

各位路过的老哥们帮小弟看看,跪谢!!

Answer 1

绑定在table上的数据是 tableData.slice((currentPage-1)*pagesize，和 tableData不是同一个数组了。
最好的做法是按分页参数从后端获取，删除一个之后如果要从数据库删除数据，就得重新调用列表的接口。
如果不涉及后端，建议加一个计算属性来截取当前页的数据，可以适当配合watch来实现动态删除

Answer 2

这个问题是列表绑定数据tableData的原因，如果要实现删除功能的话，最好使用id作为删除依据，要用index就需要保持列表数据正确，并且不涉及到浅拷贝。
使用后台分页实现删除功能：vue 表格常见功能
如果要使用前台分页，可以参考我的博客vue实现前台分页。

Answer 3

最后采用了一楼老哥的做法:用分页参数从后端获取