Background management system we use the most should be the table, today and we share a use to use the background system table and with paging components. Table attributes will be sent dynamically, table events will be sent via $emit to the parent component, and table columns that need special operations can be processed via slot. This is just a basic package that can be added to other needs. Welcome to communicate with you.

The current component page

<template> <div class="page-box"> <el-table v-loading="tableLoading" :data="tableData" ref="multipleTable" :height="tableHeight" style="width: 100%" :header-cell-style="{ background: '#F2F4F7', fontSize: '15px', fontWeight: '400', color: '#303133' }" border empty-text @selection-change="handleSelectionChange" > <! - no data hint - > < slot slot = "empty" > {{noData}} < / slot > <! <el-table-column V-if ="selection" type="selection" width="60" fixed :selectable="selectDisableRoom"></el-table-column> <template v-for="(item, index) in tableColumns"> <! -- Operation --> <slot V-if ="item.slot" :name="item.slot"></slot> <el-table-column V-else :key="index" :prop="item.prop" :label="item.label" :min-width="item.minWidth" :width="item.width ? item.width : ''" :align="item.align ? item.align : 'center'" :sortable="item.sortable ? item.sortable : false" :show-overflow-tooltip="item.showTooltip ? item.showTooltip : false" > </el-table-column> </template> </el-table> <div v-if="total > 0"> <! <pagination :pageNum="page" :pageSize="rows" :total="total" @sizechange ="handleSizeChange" @currentChange="handleCurrentChange" > </pagination> </div> </div> </template> <script> import pagination from '@/components/pagination' export default {components: {pagination}, props: {tableData: {/ Array, default: () => {return []}}, tableColumns: {// Header data type: Array, default: [] () = > {return}}, tableHeight: {/ / form highly type: Number | | String, the default: () = > {return null}}, selection: {// Check box type: Boolean, default: () => {return false}}, noData: {type: String, default: Countless according to () = > {return 'temporary'}}, total: {/ / total Number of pages type: Number | | String, the default: () = > {return 0}}, page: {/ / the current page type: Number | | String, the default: () = > {return 1}}, rows: {/ / page type: Number | | String, the default: () => { return 10 } }, tableLoading: { type: Boolean, default: () => { return false } } }, data() { return {} }, mounted() {}, methods: { selectDisableRoom(row) { if (row.select) { return false } return true }, $emit('handleSelectionChange', val) {handleSelectionChange(val)}, HandleSizeChange (val) {this.$emit('handleChange', {pageSize: val, pageNum: $emit('handleChange', {pageNum: val, pageSize: $emit('handleChange', {pageNum: val, pageSize: this.rows }) } } } </script> <style lang="scss" scoped> .page-box { width: 100%; } </style>Copy the code

Parent component

<template> <div> <div> <myTable :tableData="tableData" :tableHeight="400" :selection="true" :tableColumns="tableColumns"  :page="pageInfo.pageNum" :rows="pageInfo.pageSize" :total="total" @handleChange="handleChange" @handlesElectionChange ="handleSelectionChange" > <el-table-column slot="operate" label=" operate" align="center" width=""> <template slot-scope="scope"> <el-button size="small" type="warning" icon="el-icon-edit" @click="edit(scope.row)"> Edit </el-button> </template> </el-table-column> </myTable> </div> </div> </template> <script> import myTable from '@/components/myTable' export default {components: {myTable}, data() {return {// tableData: [{date: '2016-05-02', name: 'Wang Xiaohu ', address:' 1518 Jinshajiang Road, Putuo District, Shanghai ', {date: '2016-05-04', name: 'Wang Xiaohu ', address: }], tableColumns: [{label: 'date', prop: 'date', width: ', sortable: true}, {label: 'address ', prop: 'address', width: ''}, {label: 'operate', width: '', slot: 'operate'}], pageInfo: {pageNum: 1, pageSize: 10 }, total:2 } }, methods: { edit(row) { console.log('row=>>', row) }, handleChange(val) { console.log(val, 'val=>>') this.pageInfo = val }, handleSelectionChange(val) { console.log(val,'val=>>') } } } </script>Copy the code