解决el-table加上多选功能之后与分页产生冲突

1.html部分

<template>
  <div>
    <el-table :data="tableData">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="日期">
            <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="address" label="地址"/>
    </el-table>

    <!-- 分页 -->

    <el-pagination
      v-show="tableData.length>0"
      :layout="layout"
      :total="tableDataTotal"
      :page-sizes="pageSizes"
      @current-change="currentChange"
      @size-change="sizeChange" />
  </div>
</template>

2.js部分

<script>
import fetchList from '@/api/article'
export default {
  props: {
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 50, 100]
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableDataArr: [],
      tableDataTotal: 0,
      pagecount: 0 // 每页的数据条
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // 向后台发送请求获取数据
      fetchList().then(response => {
        this.tableData = response.data.message
        this.tableDataTotal = this.tableData.length // 分页的total为table中的数据条数
        this.tableDataArr = this.tableData // 把table中的数据暂存到一个空数组中
        this.pagecount = this.pageSizes[0]
        // 如果table中的数据条数大于分页中设置的每页数据条
        if (this.pagecount < this.tableDataTotal) {
          this.tableData = this.tableDataArr.slice(0, this.pagecount)
        }
      }).catch(error => {
        loading.close()
        this.$message({
          message: error.message,
          type: 'error'
        })
      })
  },
  currentChange(currentPage) {
    const startData = (currentPage - 1) * this.pagecount
    const endData = this.pagecount + (currentPage - 1) * this.pagecount
    if (currentPage === 1) { // 点击第一页时
      this.tableData = this.tableDataArr.slice(0, this.pagecount)
    } else {
      this.tableData = this.tableDataArr.slice(startData, endData)
    }
  },
  sizeChange(val) {
    this.pagecount = val
    this.tableData = this.tableDataArr.slice(0, val)
  }
}
</script>