直接看代码
<template>
<div class="page-content">
<div class="page-header">
<span>自定义分页/element-ui(复选框)type="selection"置灰/批量删除/单个删除</span>
<!--第一种-->
<el-button
class="pull-right m-t m-r"
size="mini"
icon="el-icon-delete"
type="danger"
@click="batchDel()">批量删除
</el-button>
<!--第二种(使用这个表格多选框不能选中,可能自定义分页导致)-->
<!--<el-button
class="pull-right m-t m-r"
size="mini"
icon="el-icon-delete"
type="danger"
:disabled="this.ids.length === 0"
@click="batchDel()">批量删除
</el-button>-->
<!--
selection-change:当选项发生变化时会触发该事件,参数:selection
:data="tableData.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)"
tableData是后台取得数据,currentPage是当前页,初始值0,pagesize当前需要展示的数据,初始值10
slice() 方法可从已有的数组中返回选定的元素(包前不包后)
size-change | pageSize改变时会触发 | 每页条数
current-change | currentPage改变时会触发 | 当前页
:page-sizes="[5, 10, 20, 40]" 这是下拉框可以选择的,每选择一行,要展示多少内容
:page-size="pagination.pageSize" 显示当前行的条数
:current-page="pagination.currentPage" 默认第几页
:total="tableData.length"> 显示总共有多少数据,
-->
</div>
<div class="page-body">
<div class="app-container">
<!-- table数据展示 -->
<el-table @selection-change="handleSelectionChange" :data="tableData.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)" style="width: 100%">
<el-table-column type="selection" :selectable='checkboxT' width="55"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<div class="operate-groups">
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
background
:page-sizes="[5, 10, 20, 40]"
:page-size="pagination.pageSize"
:current-page="pagination.currentPage"
:total="tableData.length"
></el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ids: [],
pagination: {
currentPage: 1,
pageSize: 5,
total: 0,
},
tableData: [
{
id: '1',
status: '0',
date: '2016-08-02',
name: '王明',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: '2',
status: '1',
date: '2018-05-04',
name: '李太',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: '3',
status: '1',
date: '2019-09-01',
name: '王天猫',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: '4',
status: '0',
date: '2013-05-03',
name: '张小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: '5',
status: '0',
date: '2011-05-04',
name: '倒萨分',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: '6',
status: '0',
date: '2081-05-01',
name: '达菲',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: '7',
status: '0',
date: '2020-05-03',
name: '韩国',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: '8',
status: '0',
date: '2014-05-04',
name: '高峰',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: '9',
status: '0',
date: '2078-05-01',
name: '欧热舞',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: '10',
status: '0',
date: '2086-05-03',
name: '李利益',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: '11',
status: '0',
date: '2074-05-04',
name: '天复合',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: '12',
status: '0',
date: '2016-05-01',
name: '范德萨',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: '13',
status: '0',
date: '2015-05-03',
name: '王土木',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
methods: {
checkboxT(row, index){
if(row.status == 0){
return true
}else {
return false
}
},
handleDelete ($index, row) {
this.$confirm('此操作将永久删除该条模板, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice($index, 1)
localStorage.setItem('tableData', JSON.stringify(this.tableData))
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch((err) => {
this.$message({
type: 'error',
message: '操作取消'
})
})
},
batchDel() {
if (this.ids.length === 0) {
this.$message({
message: '请至少勾选一项,再进行操作',
type: 'warning'
});
} else {
this.speedupData();
}
},
speedupData () {
var ids = this.ids.map(item => item.id)
console.log(ids, 'aaaaaaaaaa')
this.$confirm('此操作将多条记录永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$waiting.show()
updatehomeworkrecord({
ids: ids })
.then(() => {
this.successTip('删除成功')
})
}).catch(() => {
})
},
handleSelectionChange(selection) {
this.ids = selection
},
handleSizeChange(pageSize) {
this.pagination.pageSize = pageSize
},
handleCurrentChange(currentPage) {
this.pagination.currentPage = currentPage
}
}
}
</script>
<style lang="scss" scoped>
</style>