<template>
<div>
<el-table
ref="table"
:data="tableData"
border
stripe
:height="tableHeight"
:header-cell-style="{'background':'#F5F4F7'}"
>
<el-table-column
type="index"
label="序号"
width="60"
:index="indexMethod"
align="center"
/>
<el-table-column
prop="stroperationtype"
label="数据操作类别"
width="150"
/>
<el-table-column
prop="stroperationname"
label="操作名称"
min-width="120"
/>
<el-table-column
prop="strrownumber"
label="操作数据条数"
min-width="120"
/>
<el-table-column
prop="strrownumber"
label="已导入条数"
min-width="120"
/>
<el-table-column
prop="strtime"
label="操作时间"
min-width="120"
/>
<el-table-column
prop="stryearperiod"
label="年度期间"
min-width="120"
/>
<el-table-column
label="操作"
width="160"
fixed="right"
align="center"
>
<template v-slot="scope">
<el-button
type="text"
@click="delRow(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="paging.total > 0"
background
:current-page.sync="paging.page"
:page-sizes="[50, 100, 500, 1000]"
:page-size.sync="paging.size"
layout="total, sizes, prev, pager, next, jumper"
:total="paging.total"
@size-change="queryListByPage"
@current-change="queryListByPage"
/>
</div>
</template>
<script>
import calculateCommonTableHeight from '@/layout/mixin/calculateCommonTableHeight'
import { queryList, delData } from '@/api/data-interface/extract-data'
export default {
name: 'TableArea',
mixins: [calculateCommonTableHeight],
props: {
searchForm: {
type: Object,
default: () => {}
}
},
data() {
return {
tableData: [],
paging: {
total: 0,
page: 1,
size: 50
}
}
},
created() {
this.queryListByPage()
},
methods: {
indexMethod(index) {
index = (index + 1) + (this.paging.page - 1) * this.paging.size
return index
},
queryListByPage() {
this.$nextTick(() => {
queryList(
this.searchForm,
this.paging.page,
this.paging.size
).then(res => {
if (res.code === 20000) {
this.paging.total = res.data.total
this.tableData = res.data.rows
}
})
})
},
// 删除
delRow(row) {
console.log(row)
this.$confirm('是否删除该信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delData(row.lnglogid).then(res => {
if (res.code === 20000) {
this.$message({
showClose: true,
message: res.message,
type: 'success'
})
this.queryListByPage()
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style scoped>
</style>
转自：https://www.cnblogs.com/hellofangfang/p/11029585.html