1. Center the table horizontally

<el-table :data="tableData" border :cell-style="cellStyle" :header-cell-style="rowClass"> <el-table-column Prop ="dingtalkId" label=" config "show-overflow-tooltip></el-table-column></el-table> methods: { cellStyle() { return 'text-align:center'; }, rowClass() { return 'text-align:center'; }},Copy the code

2. Componentization of pages

Subcomponents pagination

<template > <div class="pagination-wrap"> <el-pagination background @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" :current-page="copyPageData.page" :page-sizes="[10, 20, 50, 100]" :page-size="copyPageData.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" ></el-pagination> </div></template><script>import _ from 'lodash'export default { name: 'Pagination', props: { total: { required: true, type: Number, }, pageData: { required: true, type: Object, }, }, data() { return { // copyPageData:this.pageData } }, computed: { copyPageData() { return this.pageData }, }, methods: {// paging handlePageSizeChange(val) {this.copypageData. limit = val this.$emit('refresh', this.copypagedata)}, handleCurrentPageChange(val) { this.copyPageData.page = val this.$emit('refresh', this.copyPageData) }, },}</script><style scoped lang="scss">.pagination-wrap { text-align: right; padding: 10px 0; }</style>Copy the code

The parent component

<template> <pagination @refresh="refreshList" :pageData="pageData" :total="total"></pagination></template> import Pagination from '@/components/Pagination'; export default { name: 'parent', data() { tableData: [], pageData: { page: 1, limit: 10, }, total: 0, } methods: {// refreshList(pageData) {this.pageData = pageData; this.getlist(); }}},Copy the code