<template> <div> <div v-if="title"> {{title}} </div> <div :class="[title?'com-table-content':'com-table-content-nottitle']"> <el-table v-loading="loading" ref="multipleTable" stripe :data="tableData" border @selection-change="handleSelectionChange" @row-click="rowClick" @row-dblclick='rowDblclick' @cell-dblclick="celldblclick"> <slot></slot> </el-table> </div> <div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageIndex" :page-sizes="page_sizes" :page-size="Size" :layout="layout" :total="total"> </el-pagination> </div> </div> </template> <script> import commomway from '../../common/commonway.js' //分页 export default { name: 'com-table', props: { value: {//数据 type: [Array, Object], default: () => { return []; } }, PageSize: {//当前一页显示多少条数据 type: Number, default: 20 }, page_sizes: {//分页规则 type: Array, default: () => { return [1, 20, 40, 60, 80] } }, current_page: {//当前所在页 type: Number, default: () => { return 1; } }, layout: { type: String, default: () => { return 'total, sizes, prev, pager, next, jumper'; } }, title: {//表格title type: String, default: () => { return ''; } }, loading: { type: Boolean, default: false } }, data() { return { tableData: [], //页数索引 PageIndex: this.current_page, //每页显示的数量 Size: this.PageSize, oldmultipleSelection: [],//旧的选中值 multipleSelection: []//当前选中数据 } }, watch: { value(val) { this.getpagedata(); }, tableData(val) { // console.log(val); }, multipleSelection(val, old) { this.oldmultipleSelection = old; } }, mounted() { this.getpagedata(); }, computed: { total() { return this.value.length; } }, methods: { //获得分页后的数据 getpagedata() { var common = new commomway(); this.tableData = common.pagination(this.PageIndex, this.Size, this.value, false); this.$emit("input", this.value); setTimeout(() => {//由于表格重新渲染延迟执行勾选 this.toggleSelection(this.oldmultipleSelection) }, 20) }, //点击每页显示数量时触发 handleSizeChange: function (val) { this.Size = val; this.getpagedata(); this.$emit('handleSizeChange', val); }, //翻页的时候触发 handleCurrentChange: function (val) { this.PageIndex = val; this.getpagedata(); this.$emit('handleCurrentChange', val); }, handleSelectionChange(val) { this.multipleSelection = val; this.$emit('selection-change', val); }, toggleSelection(rows) {//勾选值 if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, rowClick(row, event, column){ this.$emit('row-click', row, event, column); }, celldblclick(row, column, cell, event){ this.$emit('cell-dblclick', row, column, cell, event); }, rowDblclick(row,enent){ //console.log(row,enent) } } } </script> <style lang="sass"> @import "./com-table.scss"; </style>
commonway.js
class CommonWay { /** * description：对数组的分页处理 * author:bilimumu * date:2017-10-28 * @param {number} [pageNo=1] 页码 * @param {number} [pageSize=10] 每页显示条数 * @param {any} [obj=[]] 待分页的数组 * @param {Boolean} [iscreateNewdata=true] 是否创建新的数据 * @returns 返回新的数组 * @memberof CommonWay */ pagination(pageNo = 1, pageSize = 10, obj = [], iscreateNewdata = true) { var array = []; if (iscreateNewdata) { array = JSON.parse(JSON.stringify(obj)); } else { array = obj; } var offset = (pageNo - 1) * pageSize; return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize); } } export default CommonWay
com-table.scss
.com-table { height: 100%; width: 100%; &-title { color: #FFF; background: #42A2F5; padding: 0; font-size: 15px; height: 40px; line-height: 40px; text-indent: 8px; } &-content { width: 100%; height: calc(100% - 40px - 55px); } &-content-nottitle { width: 100%; height: calc(100% - 55px); } &-page { height: 55px; width: 100%; background: #EFF3F8; display: flex; align-items: center; justify-content: center; } }