javascript
复制代码
<template>
<div>
<el-table
ref="myTable"
:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
@select-all="selectAll" >
<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>
<div style="margin-top: 30px">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[5,10,30, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"></el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//是否全选
isAllSelected:false,
//选中的exId集合
selectList:[],
tableData: [{
exId:1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
exId:2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
exId:3,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
exId:4,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
exId:5,
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
exId:6,
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
exId:7,
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
total: 0,
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
}
},
methods: {
selectAll(selection) {
this.isAllSelected=!this.isAllSelected
if((selection.length&&this.isAllSelected) || (!selection.length&&!this.isAllSelected)){
// 全选
this.tableData.forEach(item=>{
if(!this.selectList.some(items => items == item.exId)){
this.selectList.push(item.exId)
}
})
}else{
// 全不选
this.tableData.forEach(item=>{
let index = -1
this.selectList.some((items,i)=>{
if(items == item.exId){
index = i
}
})
if(index > -1) this.selectList.splice(index,1)
})
//清除选中的状态
this.$refs.myTable.clearSelection()
}
},
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
// this.$nextTick这段代码可以写在后端获取列表之后，用来解决切换页面，checkbox没有被选中的问题，如果是全选状态，切换页面checkbox设置为选中状态
this.$nextTick(()=>{
this.tableData.forEach(item=>{
if((!this.selectList.includes(item.exId)&&this.isAllSelected) || (!this.isAllSelected && this.selectList.includes(item.exId))){
this.$refs.myTable.toggleRowSelection(item,true)
}else{
this.$refs.myTable.toggleRowSelection(item,false)
}
})
})
},
handleSelectionChange(val) {
this.selectList = val.map((item) => item.exId);
}
}
}
</script>