vue实现分页和删除效果

前言：

　　有些时候前端从后台拿到数据（数据量大，接口没有分页的情况下），需要前端实现分页（接口有分页的忽略），并根据页面的需求删除数据，在传给后台

关键字：

　　分页，数组的批量删除（参考：https://www.cnblogs.com/shun1015/p/12936362.html）

页面效果

 下面是代码，每一步都有注释

<template>
  <div class="home">
    <el-button type="info" size="small" plain @click="removeTabledata">删除</el-button>
    <div class="table">
      <el-table
        :data="showtabledata"
        style=" 100%"
        border
        stripe
        @selection-change="handleChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="activityDate" label="日期"></el-table-column>
        <el-table-column prop="agentId" label="Id"></el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center;"
        background
        @current-change="handleCurrentChange"
        :current-page="person.page"
        :page-size="person.size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Data from "./data.json";
export default {
  name: "home",
  data() {
    return {
      tableData: JSON.parse(JSON.stringify(Data)).data, //获取到全部数据
      showtabledata: [], // 分页展示的数据
      person: { page: 1, size: 10 },
      removeList: [],  // 选中需要删除的数据
      Page: 1,  // 记录当前的页码
    };
  },
  computed: {
    // 总数
    total() {
      return this.tableData.length;
    },
  },
  created() {
    console.log(this.tableData);
    this.ShowData(this.Page);  // 页面初始化，显示第一页的数据
  },
  methods: {
    // 封装 分页方法
    ShowData(e) {
      this.showtabledata = this.tableData.slice(e * 10 - 10, e * 10);
    },
    // 分页效果
    handleCurrentChange(val) {  // 每次页码改变
      this.ShowData(val);
      this.Page = val;
    },
    // table的checkbox事件，选中删除的数据
    handleChange(val) {
      console.log(val);
      this.removeList = val;
    },
    // 删除
    removeTabledata() {
      if (this.removeList.length === 0) {
        return this.$message.warning("请选择要删除的人员");
      }
      this.tableData = this.remove(this.tableData, this.removeList);   // 总数和需要删除的数据
      console.log(this.tableData); // 删除选中之后的总数
      if (this.tableData.length >= 10 && this.tableData.length % 10 === 0) {      // （第一页除外）每次删除可能会把当前这一页的数据删除完，这时候需要请求上一页的数据
        this.ShowData(this.Page - 1);
        this.Page = this.Page - 1;                                               // 记得一定要将页码设置回去
      } else {
        this.ShowData(this.Page);                                                
      }
      this.$message.success("删除成功")
    },
    // 删除封装方法
    remove(arr1, arr2) {
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr2[i].agentId === arr1[j].agentId) {
            let indexs = arr1.indexOf(arr1[j]);
            arr1.splice(indexs, 1);
          }
        }
      }
      return arr1;
    },
  },
};
</script>