封装的表格
<template>
<div class="common-table">
<el-table
ref="tableSortRef"
style="width: 100%; height: 100%"
tooltip-effect="dark"
v-loading="listLoading"
border
:data="tableData"
:height="height"
@selection-change="setSelectRows"
@sort-change="tableSortChange"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
>
<!-- 复选列 -->
<el-table-column
v-if="selectionIsShow"
type="selection"
reserve-selection
width="55"
/>
<!-- 序号 -->
<el-table-column
v-if="indexIsShow"
label="序号"
width="60"
type="index"
></el-table-column>
<el-table-column
v-for="(column, index) in tableOption"
:key="index"
:prop="column.prop"
:label="column.label"
:width="column.width"
:show-overflow-tooltip="overflowTip"
></el-table-column>
<el-table-column
v-if="showHandleButton"
fixed="right"
label="操作"
:width="handleColWidth"
>
<template slot-scope="scope">
<el-button
v-if="showHandleEdit"
type="primary"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
></el-button>
<el-button
v-if="showHandleDelete"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
></el-button>
<el-button
v-if="showHandleDetail"
type="warning"
@click="handleDetail(scope.row)"
>
详情
</el-button>
<slot name="customButton" :row="scope.row"></slot>
</template>
</el-table-column>
<template #empty>
<el-empty class="vab-data-empty" description="暂无数据" />
</template>
</el-table>
<div v-if="total > 0" class="pagination">
<el-pagination
background
:current-page="pageNo"
:page-size="pageSize"
:page-sizes="[10,20, 50, 100]"
:total="parseInt(total)"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</template>
<script>
export default defineComponent({
name: 'ComprehensiveTable',
components: {},
props: {
tableOption: {
type: Array,
default: () => {
return []
},
}, //表头
tableData: {
type: Array,
default: () => {
return []
},
}, //表格数据
showHandleButton: {
type: Boolean,
default: false,
}, //是否显示操作列
handleColWidth: {
type: Number,
default: 200,
}, //操作列列宽
height: {
type: Number,
default: 650,
}, //表格高度
showHandleEdit: {
type: Boolean,
default: false,
}, //编辑按钮
showHandleDelete: {
type: Boolean,
default: false,
}, //编辑按钮
showHandleDetail: {
type: Boolean,
default: false,
}, //详情按钮
selectionIsShow: {
type: Boolean,
default: false,
}, //是否显示多选列
indexIsShow: {
type: Boolean,
default: false,
}, //是否显示索引列
overflowTip: {
type: Boolean,
default: true,
}, //超长时是否显示tooltip
total: {
type: [String, Number],
default: 0,
}, //数据总条数
},
setup(props, { emit }) {
const $baseConfirm = inject('$baseConfirm')
const state = reactive({
pageNo: 1,
pageSize: 10,
})
//每页展示条数
const handleSizeChange = (val) => {
state.pageSize = val
emit('handleSizeChange', val)
}
//页面展示第几页
const handleCurrentChange = (val) => {
state.pageNo = val
emit('handleCurrentChange', val)
}
//删除
const handleDelete = (row) => {
$baseConfirm('你确定要删除当前项吗', null, async () => {
emit('handleDelete', row)
})
}
//详情
const handleDetail = (row) => {
emit('handleDetail', row)
}
// 编辑
const handleEdit = (row) => {
emit('handleEdit', row)
}
onBeforeMount(() => {})
onUnmounted(() => {})
return {
...toRefs(state),
handleSizeChange,
handleCurrentChange,
handleEdit,
handleDelete,
handleDetail,
}
},
})
</script>
<style>
.pagination {
justify-content: right !important;
margin-top: 10px;
}
</style>
调用的页面
<template>
<div class="comprehensive-table-container">
<packageTable
:height="650"
:total="total"
:tableData="tableData"
:overflowTip="true"
:tableOption="tableOption"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
></packageTable>
</div>
</template>
<script>
import { findPage } from '../../api/login'
import packageTable from '../../components/Table/index.vue'
export default defineComponent({
name: 'ComprehensiveTable',
components: { packageTable },
setup() {
//定义页面所需参数
const state = reactive({
tableData: [],
tableOption: [
{
label: 'ID',
prop: 'id',
},
{
label: '方法',
prop: 'method',
},
{
label: '参数',
prop: 'params',
},
{
label: 'IP',
prop: 'ip',
},
{
label: '耗时',
prop: 'time',
},
],
listLoading: true,
total: 0,
queryForm: {
pageNum: 1,
pageSize: 10,
},
})
//获取表格数据
const fetchData = async () => {
const res = await findPage(state.queryForm)
state.tableData = res.data.content
state.total = res.data.totalSize
state.listLoading = false
}
//分页获取页面数据
const handleSizeChange = (val) => {
state.queryForm.pageSize = val
fetchData()
}
const handleCurrentChange = (val) => {
state.queryForm.pageNum = val
fetchData()
}
onBeforeMount(() => {})
onUnmounted(() => {})
onMounted(() => {
fetchData()
})
return {
...toRefs(state),
handleSizeChange,
handleCurrentChange,
fetchData,
}
},
})
</script>
<style>
.el-pagination {
justify-content: right !important;
}
</style>
有问题,及时沟通哈,谢谢大家