<template>
<div id="app">
<!-- <router-view /> -->
<!-- <Footer v-show="$route.meta.showFooter" /> -->
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@select-all="selectAll"
@select="select"
row-key="id"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{
{
scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[4, 8]"
:page-size="4"
layout="total, sizes, prev, pager, next, jumper"
:total="8"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
tableData: [
{
page: 1,
id: 1,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 1,
id: 2,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 1,
id: 3,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 1,
id: 4,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
multipleSelection: [],
checkAll: {
},
};
},
methods: {
selectAll(val) {
if (val.length === this.tableData.length) {
this.checkAll = {
[this.currentPage]: true };
val.forEach((item) => {
let index = this.multipleSelection.findIndex(
(el) => el.id === item.id
);
if (index === -1) {
this.multipleSelection.push(item);
}
});
} else {
this.checkAll = {
[this.currentPage]: false };
this.multipleSelection = this.multipleSelection.filter(
(item) => item.page !== this.currentPage
);
}
},
select(rows, row) {
if (this.checkAll[this.currentPage]) {
this.multipleSelection = this.multipleSelection.filter(
(item) => item.id !== row.id
);
} else {
let index = this.multipleSelection.findIndex(
(item) => item.id === row.id
);
if (index !== -1) {
this.multipleSelection.splice(index, 1);
} else {
this.multipleSelection.push(row);
}
}
if (rows.length === this.tableData.length) {
this.checkAll = {
[this.currentPage]: true };
} else {
this.checkAll = {
[this.currentPage]: false };
}
},
handleSizeChange(val) {
this.checkAll = {
[this.currentPage]: false };
console.log(`每页 ${
val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
if (val === 1) {
this.tableData = [
{
page: 1,
id: 1,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 1,
id: 2,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 1,
id: 3,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 1,
id: 4,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
];
} else {
this.tableData = [
{
page: 2,
id: 5,
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 2,
id: 6,
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
page: 2,
id: 7,
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
];
}
if (this.checkAll[this.currentPage]) {
this.$refs.multipleTable.toggleAllSelection();
} else {
this.multipleSelection.forEach((item) => {
this.tableData.forEach((el) => {
if (item.id === el.id) {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(el);
});
}
});
});
}
},
},
// components: {
// Footer
// }
};
</script>
<style lang="scss"></style>
element select all
Guess you like
Origin blog.csdn.net/qq_45846359/article/details/114665367
Recommended
Ranking