![](https://i-blog.csdnimg.cn/blog_migrate/81de3ae27a8c55a087f1d66503795381.png)
<template>
<div style="margin-bottom: 3.75rem;">
<el-card class="box-card" :body-style="{ padding: '0px' }" style="height: 100%;">
<div style="margin: 1rem;">
<el-button type="danger" @click="delRec">删除</el-button>
<el-button type="primary">刷新</el-button>
</div>
<el-table highlight-current-row :key="key" @cell-dblclick="doubleClick"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
style="width: 100%;margin: 0.25rem;"
:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
@selection-change="handleSelectionchange" border>
<el-table-column type="selection" width="50px"/>
<el-table-column type="index" label="序号" width="50px"/>
<el-table-column prop="address" label="标题"/>
<el-table-column prop="name" label="发件人"/>
<el-table-column prop="date" label="发送日期"/>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
name: 'receiveBox',
data() {
return {
key: Math.random(),
currentPage: 1,
pageSize: 5, // 每页的数据
tableData: [
{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎3',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎4',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎5',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎6',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎7',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎8',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎9',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎10',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎11',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎12',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎13',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎14',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎15',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎16',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎17',
address: '上海市普陀区金沙江路 1517 弄'
},{
date: '2016-05-01',
name: '王小虎18',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎19',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎20',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎21',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎22',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎23',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎24',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎25',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎26',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎27',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎28',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎29',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎30',
address: '上海市普陀区金沙江路 1516 弄'
}
],
selectRec: [],
}
},
created() {
// this.tableData = []
},
methods: {
delRec(){
if (this.selectRec.length === 0) {
this.$message({type:'warning',message:'请先选择记录'})
return
}
this.$message({type:'error',message:'deleted!'})
},
// 双击单元格触发事件
doubleClick(row, column) {
// 避免点击过快导致多个输入框处于焦点状态
row[column.property + 'Show'] = false
// 避免点击其他单元格导致表格刷新
if (!['address'].includes(column.property)) return
row[column.property + 'Show'] = true
this.updateTable()
},
//更新表格
updateTable() {
this.key = Math.random()
this.$message({type:'success',message:'dbClick!'})
},
handleSelectionchange(selection) {
console.log(selection);//当前途中的行撒据
this.selectRec = selection
// console.log('SELECT: ',this.selectRec)
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val // 给页面数量赋值
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val // 给当前页赋值
}
},
}
</script>
<style scoped lang="scss">
.box-card {
height: 100%;
padding: 0.75rem;
margin: 0.75rem;
overflow-y: auto;
//text-align: center; div居中
}
</style>