功能 -- 数据表 -- 分页-优快云博客

本文链接：https://blog.youkuaiyun.com/xuyan5228/article/details/134059666

本文详细介绍了如何在Vue项目中使用ElementUI的el-table和el-pagination组件创建数据表，并处理分页和数据大小变化。展示了如何设置列、操作列以及响应式地调整表格内容显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据表用到的标签

1、el-table -- 数据表

2、el-table-column -- 数据表头

<el-table
	:data="data"
	:border="true"
	:height="tableLength"
	:header-cell-style="{ textAlign: 'center' }"
	:cell-style="{ textAlign: 'center' }"
>
	<el-table-column prop="id" label="ID" width="60"></el-table-column>
	<el-table-column prop="name" label="姓名"></el-table-column>
	<el-table-column prop="age" label="年龄" width="60"></el-table-column>
	<el-table-column prop="address" label="地址"></el-table-column>
	<el-table-column prop="sex" label="性别" width="60"></el-table-column>
	<el-table-column prop="phone" label="手机号"></el-table-column>
	<el-table-column fixed="right" label="操作" width="100">
		<template slot-scope="scope">
			<el-button
				@click="handleClick(scope.row)"
				type="text"
				size="small"
				>查看</el-button
			>
			<el-button type="text" size="small">编辑</el-button>
		</template>
	</el-table-column>
</el-table>

分页标签

el-pagination

<el-pagination
	class="pagination"
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:page-sizes="[shownum, 24, 25, 30]"
	:page-size="100"
	layout="total, sizes, prev, pager, next, jumper"
	:total="total"
>
</el-pagination>

分类函数

@size-change="handleSizeChange" -- 当一页显示的数据size改变时触发

@current-change="handleCurrentChange" -- 当切换页数的时候触发

<script>
export default {
	data() {
		return {
			data: [],
			user: [
				{
					id: 1,
					name: "刘伟",
					age: 35,
					address: "杭州",
					sex: "男",
					phone: "12345678928",
				},
			],
			currentPage: 1,
			tableLength: 0,
			shownum: 0,
		};
	},
	methods: {
		//当一页显示的数据size发生改变时触发
		handleSizeChange(index) {
			this.data = this.user.slice(0, index);
		},
		//当切换页数时触发
		handleCurrentChange(index) {
			this.data = this.user.slice(
				(index - 1) * this.shownum,
				index * this.shownum
			);
		},
		//操作列点击触发--获取当前行的所有内容
		handleClick(row) {
			console.log(row);
		},
		// 初始化列表
		initTable() {
			//因为获取到了数据后，el-table还没有渲染完成，所以需要延迟执行
			setTimeout(() => {
				let len = document.getElementsByClassName("el-main");
				let paglen = document.getElementsByClassName("pagination");
				let tr = document.getElementsByTagName("tr");
				// 获取len的高度
				this.tableLength = len[0].offsetHeight - paglen[0].offsetHeight - 40;
				// 初始化当前页面该显示多少条数据
				this.shownum = Math.floor(this.tableLength / tr[0].offsetHeight) - 2;
				this.data = this.user.slice(0, this.shownum);
			}, 0);
		},
	},
	computed: {
		total() {
			return this.user.length;
		},
	},
	mounted() {
		this.initTable();
	},
	created() {},
};
</script>