项目有个表格页面使用了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
    }

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