<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">Delete</el-button>
<el-button type="primary">Refresh</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="serial number" width="50px"/>
<el-table-column prop="address" label="title"/>
<el-table-column prop="name" label="Sender"/>
<el-table-column prop="date" label="Send date"/>
</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, //Data per page
tableData: [
{
date: '2016-05-02',
name: 'Wang Xiaohu1',
address: 'Alley 1518, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎2',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎3',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎4',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎5',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎6',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎7',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu 8',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: '王小虎9',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu 10',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu11',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu12',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu13',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu14',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu15',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu16',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Wang Xiaohu17',
address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
},{
date: '2016-05-01',
name: 'Wang Xiaohu18',
address: 'Alley 1519, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu19',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu 20',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu21',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu22',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu23',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu24',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu25',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu26',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu27',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu28',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu29',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-03',
name: 'Wang Xiaohu 30',
address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
}
],
selectRec: [],
}
},
created() {
// this.tableData = []
},
methods: {
delRec(){
if (this.selectRec.length === 0) {
this.$message({type:'warning',message:'Please select a record first'})
return
}
this.$message({type:'error',message:'deleted!'})
},
//Double-click the cell to trigger the event
doubleClick(row, column) {
// Avoid clicking too fast, causing multiple input boxes to be in focus
row[column.property + 'Show'] = false
// Avoid clicking other cells to cause the table to refresh
if (!['address'].includes(column.property)) return
row[column.property + 'Show'] = true
this.updateTable()
},
//update table
updateTable() {
this.key = Math.random()
this.$message({type:'success',message:'dbClick!'})
},
handleSelectionchange(selection) {
console.log(selection);//The current selection process
this.selectRec = selection
// console.log('SELECT: ',this.selectRec)
},
handleSizeChange(val) {
console.log(`${val} items per page`);
this.pageSize = val //Assign a value to the number of pages
},
handleCurrentChange(val) {
console.log(`Current page: ${val}`);
this.currentPage = val //Assign a value to the current page
}
},
}
</script>
<style scoped lang="scss">
.box-card {
height: 100%;
padding: 0.75rem;
margin: 0.75rem;
overflow-y: auto;
//text-align: center; div centered
}
</style>
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepageOverview 39670 people are learning the system