element ui table实现前端分页 及 选择相关
如上图，实现红框里的功能
<template>
<div class="hello">
<p class="title">
<span>已选择{{multipleSelection.length}}条</span>
<el-button @click="clearDate">清空</el-button>
</p>
<el-table
ref="multipleTable"
:data="tableData3.slice((currentPage-1)*pageSize,currentPage*pageSize)"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
@select="selectChange"
@select-all="selectAll"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true">
</el-table-column>
<el-table-column
prop="date"
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
background
:page-size="pageSize"
:current-page="currentPage"
@current-change="handleCurrentChang"
layout="prev, pager, next, total"
:total="tableData3.length">
</el-pagination>
<div style="text-align:left">
<span style="margin-right:20px">已选择{{multipleSelection.length}}</span>
<el-checkbox-group v-model="selectNum" :min="0" :max="1" @change="handleCheckmount(multipleSelection)">
<el-checkbox v-for="item in optionsItem" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script>
const optionsItem = ['50', '100']
export default {
data () {
return {
tableData3: [
{
date: '2016-05-03',
name: '1王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '2王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '3王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '4王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '5王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-06',
name: '6王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '7王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '8王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '9王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '10王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '11王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '12王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '13王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '14王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '15王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
],
multipleSelection: [],
currentPage: 1,
pageSize: 5,
checkedNum: [],
optionsItem: optionsItem,
selectNum: [],
num: 0
}
},
methods: {
// 清除
clearDate () {
this.$refs.multipleTable.clearSelection()
this.multipleSelection = []
this.selectNum = []
},
// 选择条数
handleCheckmount (rows) {
this.num = this.selectNum[0]
if (this.num) {
this.multipleSelection = this.tableData3.slice(0, this.num)
this.multipleSelection.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
// 全选
selectAll (selection) {
// console.log(selection)
this.multipleSelection = selection
console.log(this.multipleSelection)
this.selectNum = []
},
handleSelectionChange (val) {
this.multipleSelection = val
},
// 手动选择
selectChange (selection, rows) {
this.selectNum = []
},
// 分页
handleCurrentChang (currentPage) {
this.currentPage = currentPage
}
}
}
</script>
<style>
.title{
text-align:center
}
.el-checkbox-group{
display: inline-block;
}
.el-checkbox__label{
padding-left: 0px;
}
</style>
