elementUI表格数据懒加载，以及动态调整表格高度

最新推荐文章于 2024-07-21 21:41:29 发布

hyfadd

最新推荐文章于 2024-07-21 21:41:29 发布

阅读量451

点赞数

分类专栏： vue+elementui 文章标签： vue

本文链接：https://blog.csdn.net/zhengyun1568/article/details/108325961

版权

本文介绍了如何在Vue项目中使用Element UI实现表格数据的懒加载，即按需加载大量数据，提高应用性能。同时，讨论了如何动态调整表格的高度以适应不同场景的需求，确保用户体验流畅。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	</head>
	<body>
		<div id="app" style="padding: 20px;">
			<el-table ref="table" :data="dataList" style="width: 100%" :max-height="height">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="age" label="年龄"></el-table-column>
				<el-table-column prop="sex" label="性别"></el-table-column>
				<el-table-column prop="height" label="身高"></el-table-column>
			</el-table>
		</div>
		<script type="text/javascript">
			var app = new Vue({
    
				el: '#app',
				data() {
    
					return {
    
						height: 0,
						currentPage: 1,
						dom: '',
						len: '',
						dataList: