liang14658fox

Appearance

纯前端分页 ​

使用Vue+element-UI，查询数据返回到前端表格，这个表格有分页数据。

当有多个tab栏，每隔tab栏都有一个独立的分页系统，这些分页会出现显示bug：

  • 当切换tab时，分页高亮会不动，而表格数据正确。

需要data里面初始化paginationShow为true，然后使用v-if强制刷新组件即可。

html
<div id="app">
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="border-card">
	<el-tab-pane label="纯前端分页" name="first">
		<!-- 表格数据 -->
		<!-- 这里是纯前端分页代码：slice，当然也可以在method里做这些事 -->
		<!-- 这个表格还可以设置前端排序（:default-sort） -->
		<el-table :data="tableData1.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
			style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
			<el-table-column prop="date" label="日期" sortable width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名" sortable width="180">
			</el-table-column>
			<el-table-column prop="address" label="地址" :formatter="formatter">
			</el-table-column>
		</el-table>
		<!-- 分页数据 -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
				:current-page="currentPage1" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize1"
				layout="total, sizes, prev, pager, next, jumper" :total="this.tableData1.length">
			</el-pagination>
		</div>
	</el-tab-pane>
	<el-tab-pane label="解决分页bug" name="second">
		<el-table :data="tableData2.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)" border
			style="width: 100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="name" label="姓名" sortable width="180">
			</el-table-column>
			<el-table-column prop="date" label="日期"></el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
			:current-page="currentPage2" :page-sizes="[5, 10, 15, 20, 25]" :page-size="pageSize2"
			layout="total, sizes, prev, pager, next, jumper" :total="tableData2.length"
			style="float:right;margin-top:15px;"></el-pagination>
	</el-tab-pane>
</el-tabs>
</div>
<div id="app">
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="border-card">
	<el-tab-pane label="纯前端分页" name="first">
		<!-- 表格数据 -->
		<!-- 这里是纯前端分页代码：slice，当然也可以在method里做这些事 -->
		<!-- 这个表格还可以设置前端排序（:default-sort） -->
		<el-table :data="tableData1.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
			style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
			<el-table-column prop="date" label="日期" sortable width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名" sortable width="180">
			</el-table-column>
			<el-table-column prop="address" label="地址" :formatter="formatter">
			</el-table-column>
		</el-table>
		<!-- 分页数据 -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
				:current-page="currentPage1" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize1"
				layout="total, sizes, prev, pager, next, jumper" :total="this.tableData1.length">
			</el-pagination>
		</div>
	</el-tab-pane>
	<el-tab-pane label="解决分页bug" name="second">
		<el-table :data="tableData2.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)" border
			style="width: 100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="name" label="姓名" sortable width="180">
			</el-table-column>
			<el-table-column prop="date" label="日期"></el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
			:current-page="currentPage2" :page-sizes="[5, 10, 15, 20, 25]" :page-size="pageSize2"
			layout="total, sizes, prev, pager, next, jumper" :total="tableData2.length"
			style="float:right;margin-top:15px;"></el-pagination>
	</el-tab-pane>
</el-tabs>
</div>
  • Script代码

WARNING

vue组件为单文件组件而非vue-cli。·

js
var app = new Vue({
	el: '#app',
	data: {
		// 分页组件，当前页数：z
		currentPage1: 1,
		currentPage2: 1,
		pageSize1: 5,
		pageSize2: 5,
		// tab栏组件：
		activeName: 'first',
		// 表格数据：
		tableData1: [{
			date: '2016-05-02',
			name: '王小虎1',
			address: '上海市普陀区金沙江路 1518 弄'
		}, {
			date: '2016-05-04',
			name: '王小虎2',
			address: '上海市普陀区金沙江路 1517 弄'
		}, {
			date: '2016-05-01',
			name: '王小虎3',
			address: '上海市普陀区金沙江路 1519 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎4',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎5',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎6',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎7',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎8',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎9',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎10',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎11',
			address: '上海市普陀区金沙江路 1516 弄'
		}],

		tableData2: [{
			date: '2016-05-02',
			name: '1',
			address: '上海市普陀区金沙江路 1518 弄'
		}, {
			date: '2016-05-04',
			name: '2',
			address: '上海市普陀区金沙江路 1517 弄'
		}, {
			date: '2016-05-01',
			name: '3',
			address: '上海市普陀区金沙江路 1519 弄'
		}, {
			date: '2016-05-03',
			name: '4',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '5',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '6',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '7',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '8',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '9',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '10',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '11',
			address: '上海市普陀区金沙江路 1516 弄'
		}]
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		},
		formatter(row, column) {
			return row.address;
		},
		handleSizeChange1(val) {
			console.log(`每页 ${val} 条`);
			this.pageSize1 = val;
		},
		handleCurrentChange1(val) {
			console.log(`当前页: ${val}`);
			this.currentPage1 = val;
		},
		// 每页多少条
		handleSizeChange2(val) {
			this.pageSize2 = val;
		},
		// 当前页
		handleCurrentChange2(val) {
			this.currentPage2 = val;
		},
	}
})
var app = new Vue({
	el: '#app',
	data: {
		// 分页组件，当前页数：z
		currentPage1: 1,
		currentPage2: 1,
		pageSize1: 5,
		pageSize2: 5,
		// tab栏组件：
		activeName: 'first',
		// 表格数据：
		tableData1: [{
			date: '2016-05-02',
			name: '王小虎1',
			address: '上海市普陀区金沙江路 1518 弄'
		}, {
			date: '2016-05-04',
			name: '王小虎2',
			address: '上海市普陀区金沙江路 1517 弄'
		}, {
			date: '2016-05-01',
			name: '王小虎3',
			address: '上海市普陀区金沙江路 1519 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎4',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎5',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎6',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎7',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎8',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎9',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎10',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '王小虎11',
			address: '上海市普陀区金沙江路 1516 弄'
		}],

		tableData2: [{
			date: '2016-05-02',
			name: '1',
			address: '上海市普陀区金沙江路 1518 弄'
		}, {
			date: '2016-05-04',
			name: '2',
			address: '上海市普陀区金沙江路 1517 弄'
		}, {
			date: '2016-05-01',
			name: '3',
			address: '上海市普陀区金沙江路 1519 弄'
		}, {
			date: '2016-05-03',
			name: '4',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '5',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '6',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '7',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '8',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '9',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '10',
			address: '上海市普陀区金沙江路 1516 弄'
		}, {
			date: '2016-05-03',
			name: '11',
			address: '上海市普陀区金沙江路 1516 弄'
		}]
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		},
		formatter(row, column) {
			return row.address;
		},
		handleSizeChange1(val) {
			console.log(`每页 ${val} 条`);
			this.pageSize1 = val;
		},
		handleCurrentChange1(val) {
			console.log(`当前页: ${val}`);
			this.currentPage1 = val;
		},
		// 每页多少条
		handleSizeChange2(val) {
			this.pageSize2 = val;
		},
		// 当前页
		handleCurrentChange2(val) {
			this.currentPage2 = val;
		},
	}
})