1.新建table.vue文件
<template> <div class="TableList"> <el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" :data="tableData" border stripe style="width: 100%;" :size="tableSize" @selection-change="handleSelectionChange" highlight-current-row > <el-table-column type="index" width="50" label="ID" v-if="isId" align="center"></el-table-column> <el-table-column type="selection" width="45" v-if="isSelect" align="center"></el-table-column> <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" align="center" ></el-table-column> <slot name="operation"></slot> </el-table> <!-- 分页 --> <div class="pagination-wrapper" v-if="isPagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :layout="layout" :total="total" :small="small" :page-sizes="pageSizes" :current-page="currentPage" ></el-pagination> </div> </div></template><script>export default { name: 'TableList', props: { isId: Boolean, isSelect: Boolean, isPagination: Boolean, loading: Boolean, tableData: Array, columns: Array, pageSize: Number, currentPage: Number, total: Number, small: Boolean, tableSize: String, pageSizes: { type: Array, default: () => [10, 20, 30, 40] }, layout: { type: String, default: () => 'total, sizes, prev, pager, next, jumper' } }, data () { return { currentRow: null } }, methods: { handleSelectionChange (selection) { this.$emit('selection-change', selection) }, // 分页 // 每页多少条 handleSizeChange (val) { this.$emit('sizeChange', val) }, // 第几页 handleCurrentChange (val) { this.$emit('currentChange', val) } }}</script><style lang="scss" scoped>.pagination-wrapper { padding: 30px 0;}</style>
2.简单使用
<template> <div> <table-list v-bind="{ columns, tableData, loading, pageSize: limit, total: total, currentPage: page, isSelect, isPagination, small, isId }" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" > <el-table-column fixed="right" label="操作" slot="operation" align="center" > <template slot-scope="scope"> <el-button round size="small" type="primary" @click="handleEdit(scope.row)" >编辑</el-button > </template> </el-table-column> </table-list> </div></template><script>import TableList from './table.vue'export default { components: { TableList }, data () { return { // 表格 // 表格是否出现多选框 isSelect: false, // 是否分页 isPagination: true, // 分页大小 small: true, // 是否ID isId: true, columns: [ { prop: 'province', label: '省', width: '' }, { prop: 'city', label: '市', width: '' }, { prop: 'town', label: '区域', width: '' }, { prop: 'remarks', label: '备注', width: '' } ], tableData: [ { province: '汉鑫', city: '2020-03-23' }, { province: '牛逼', city: '2020-03-22' } ], // 分页 limit: 10, page: 1, total: 0, loading: false } }, methods: { // 编辑 handleEdit (row) { console.log(11, row) } }}</script><style lang="scss" scoped></style>
