<template>
<div>
<div class="common-wrapper">
<!-- -->
<el-table :data="lists" ref="table" highlight-current-row v-loading="listLoading" style="width: 100%;"
:row-key="getRowKeys" type="selection" @selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable"></el-table-column>
<el-table-column prop="id" label="id"> </el-table-column>
<el-table-column prop="time" label="time"> </el-table-column>
</el-table>
<!-- -->
<el-col :span="24" class="toolbar">
 
<el-checkbox v-model="allCheck" @change="allCheckEvent"> </el-checkbox> 
<el-pagination :current-page="this.page" layout="total , prev, pager, next"
@current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
<div class="clearfix"></div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
lists: [
{ id: '1', time: '2019-09-09 12:12:12' },
{ id: '2', time: '2019-09-09 12:12:12' },
{ id: '3', time: '2019-09-09 12:12:12' },
{ id: '4', time: '2019-09-09 12:12:12' },
{ id: '5', time: '2019-09-09 12:12:12' },
{ id: '6', time: '2019-09-09 12:12:12' },
{ id: '7', time: '2019-09-09 12:12:12' },
{ id: '8', time: '2019-09-09 12:12:12' },
{ id: '9', time: '2019-09-09 12:12:12' },
{ id: '10', time: '2019-09-09 12:12:12' },
],
total: 13,
page: 1,
listLoading: false,
multipleSelectionAll: [],
allCheck: false,
getRowKeys (row) {
return row.id;
},
};
},
methods: {
handleSelectionChange (val) {
this.multipleSelectionAll = this.reduceSame(val);
if (this.multipleSelectionAll.length == this.total) {
this.allCheck = true;
}
this.multipleSelectionAll = this.multipleSelectionAll.map(function (val) {
return val.id;
}).toString();
console.log(this.multipleSelectionAll)
},
allCheckEvent () {
let _this = this;
if (_this.allCheck) {
_this.lists.forEach(row => {
if (row) {
_this.$refs.table.toggleRowSelection(row, true);
}
});
} else {
_this.$refs.table.clearSelection();
}
},
checkSelectable (row, index) {
return !this.allCheck;
},
reduceSame: function (arr) {
let obj = {};
return arr.reduce(function (prev, item) {
obj[item.id] ? "" : (obj[item.id] = 1 && prev.push(item))
return prev
;
}, []);
},
handleCurrentChange (val) {
this.page = val;
if (val == 1) {
this.lists = [
{ id: '1', time: '2019-09-09 12:12:12' },
{ id: '2', time: '2019-09-09 12:12:12' },
{ id: '3', time: '2019-09-09 12:12:12' },
{ id: '4', time: '2019-09-09 12:12:12' },
{ id: '5', time: '2019-09-09 12:12:12' },
{ id: '6', time: '2019-09-09 12:12:12' },
{ id: '7', time: '2019-09-09 12:12:12' },
{ id: '8', time: '2019-09-09 12:12:12' },
{ id: '9', time: '2019-09-09 12:12:12' },
{ id: '10', time: '2019-09-09 12:12:12' },
]
} else {
this.lists = [
{ id: '11', time: '2019-09-09 12:12:12' },
{ id: '12', time: '2019-09-09 12:12:12' },
{ id: '13', time: '2019-09-09 12:12:12' },
]
}
},
},
mounted () {
},
watch: {
lists: {
handler (value) {
if (this.allCheck) {
this.lists.forEach(row => {
if (row) {
this.$refs.table.toggleRowSelection(row, true)
}
});
}
},
deep: true
},
}
}
</script>