vue+element表格

1. 让表格水平居中

<el-table :data="tableData" border :cell-style="cellStyle" :header-cell-style="rowClass">
 <el-table-column prop="dingtalkId" label="配置编码" show-overflow-tooltip></el-table-column></el-table>
methods: {
    cellStyle() {       return 'text-align:center';    },    rowClass() {      return 'text-align:center';    },}

2. 分页组件化

子组件 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: {    // 分页    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>

父组件

<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();    },  }
}