<template>
<div class="home">
<el-button type="info" size="small" plain @click="removeTabledata">删除</el-button>
<div class="table">
<el-table
:data="showtabledata"
style="width: 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>
