表格渲染功能

页面的表格渲染,表格渲染顾名思义就是将数据库中的数据通过渲染分类将用户需要的数据显示到页面上,渲染包含看新增、修改、查询、删除的知识点而且也非常简单很轻松的就可以上手,页面的布局用主要还是使用layui进行搭建的。
1:表格的制作,首先声明好表格需要的全局变量先var layer,layTable这段用于加载layui中的弹出层模块和table表格在弹出层的时候就需要用到这段的声明操作,还有一个声明就是渲染表格要用到的var TabAirport;表格,表格渲染的方式是用着layui的方法进行渲染的
在这里插入图片描述

首先是elem这个方法的意思指定table的容器来进行渲染这张图里用着id的选择器来进行选择的,而url就是表格的数据来源也就是控制器里的查询方法,data的意思直接赋值数据即适用于只按时一页的数据也非常适用一段已知数据进行多页展示,在渲染里一般是用来加载本地的数据进行调试表格的时候用得到。
在这里插入图片描述

完成以上的操作就要开始填写表题了,title定义一列数据的类型名称,type的话就就是序号这个方法是根据你有多少条数据它就有多少条的序号来进行添加的temolet是用来设置方法的修改和删除的时间是一个按钮的操作。
在表格渲染的时候经常会出现的文件有两个,第一个返回的数据不规范,正确的成功码状态码(code)应为0,这个错误一般要到控制器里面去找首先找到表格使用的控制器方法在方法里面检查封装LayuiTableData的方法是否正确然后就是返回数据里有没有打错或者没有打因为这些问题都是会导致页面的数据不会出来的问题。

在这里插入图片描述
第二点就是数据接口请求异常,数据请求接口异常就要注意了首先要去到页面检查表格的请求的路径是否正确然后就是请求的控制器名称是否存在控制器不存在或者是请求的路径错了都会发生数据请求异常的报错。在这里插入图片描述
在这里插入图片描述

2:页面的数据请求,数据请求配合表格渲染的方法将数据显示到页面上显示到页面上不是就是请求路径就可以得需要在控制器里写查询数据的方法进行封装LayuiTableData的方法才会显示到页面上。
查询的方法有单表查询多表查询,单表查询的意思就是指定一张表里来查询数据多表查询就比较麻烦首先要在控制器建立一个虚拟的表然后进行表与表之间的连接将连接表的数据放在虚拟的表上来查询可以理解为将要查询的五张不同的表房子一张表上来进行查询的操作,回到主题页面使用的是单表查询的方法来查询数据这个方法查询的是机场的数据在数据库里的名称为S_Airport机场表查询完后就是计算数据的总条数了。
在这里插入图片描述

数据计算完成后就是封装的操作封装完成后然后就是设置数据对应的类型设置完成就可以去页面上进行调试看一下数据到底有没有查询并显示到页面上,查询数据的结果如下图。
在这里插入图片描述

查询的操作完成后还有三件功能分别是修改、删除、新增这三样,页面的数据不是自动生成的是用户自己进行添加的操作添加的,添加数据和查询数据的方法差不多区别就在于多了一条判断的操作,新增的操作需要用到页面上的弹出窗体这个窗体的作用就是用来添加数据的。

在这里插入图片描述

布局在页面上还有一个if的判断就是判断数据是否为空的操作防止数据为空占用数据库的空间,在控制器中也有判断它的判断的方式是根据上方图的的顺序来进行判断的首先是三字码的判断,

根据取反判断传递的数据长度(Length)是否等于三如果长度小于三位数或者是大于三位数的话就就执行else的方法必须要长度要等于三位数才会执行下一句的代码,机场名称的判断这个只是单纯的判断数据是否为空直接下一句判断城市名称和拼音码,首先是拼音的拼音码是依靠一句写好的样式直接引用到页面上监听城市名称的输入然后在拼音码里根据文字来生成拼音码,拼音码需要进和城市名称要首先判断是否有重复的数据才会进行添加首先单判断是否有重复的数据如果没有就开始执行新增的代码。
修改和新增的方法差不多一样唯一的不同就是多了一条代码EntityState,修改数据需要用到这一条。
在这里插入图片描述

最后一步删除操作,删除数据要比别的简单实现要完成页面的布局删除数据的判断当用户删除数据的时候跳出提示框提示用户是否删除在用户点击确认按钮的时候就发送post的请求到控制器上进行删除的操作。

在这里插入图片描述

删除数据的时候需要找到要删除数据的那张表查询出后就根据用户要删除的数据判断删除表中的数据

### Element UI 表格组件渲染机制 Element UI 的表格组件通过虚拟 DOM 技术来实现高效的视图更新。每当数据发生变化时,框架会计算新旧虚拟 DOM 之间的差异,并仅应用实际需要的更改到真实 DOM 中[^4]。 为了优化性能并减少不必要的渲染,在设计上采取了几种策略: #### 数据驱动重绘 表格只会在其绑定的数据源发生变更时触发重新绘制操作。这意味着如果开发者能够确保传递给表格的新数据对象与之前的内容相同,则可以避免无意义的刷新过程。 #### 虚拟滚动技术 对于含有大量行记录的大规模表格而言,一次性加载全部内容会导致严重的性能瓶颈。因此,Element UI 实现了基于可见区域的高度模拟滚动条效果——即所谓的“懒加载”。当用户向下拉动滚动条时,只有那些即将进入视野范围内的那一部分数据才会被真正读取出来显示;而超出当前可视窗口之外的部分则暂时不作处理,从而大大降低了每次页面布局所需的时间开销以及内存占用量。 ```javascript // 设置表格高度以启用虚拟滚动功能 <el-table :data="tableData" height="250"> </el-table> ``` #### 列定义静态化 保持列配置不变有助于提高效率。因为一旦表头结构稳定下来之后就不必频繁地去解析模板或者编译新的节点实例了。所以建议尽可能早些确定好各字段对应的展示方式及其样式属性等信息。 --- ### 减少不必要的渲染方法 除了上述提到的技术手段外,还可以考虑以下几个方面来进行进一步调优: - **缓存 AJAX 请求结果**:通过对服务器端返回的数据设置合理的过期时间或采用 `Cache-Control` 头部等方式使得浏览器能够在一定时间内重复利用已获取过的资源副本而不是每次都发起全新的网络请求[^1]。 ```http Cache-Control: max-age=86400 ``` - **压缩传输内容**:开启 Gzip 压缩可有效减小文件体积进而加快下载速度。这不仅适用于 HTML/CSS/JS 文件同样也适合 JSON/XML 格式的 API 接口响应体。 - **合并脚本和样式文件**:将多个外部链接指向同一个域名下的 CSS 或 JS 合并成单个文件上传至 CDN 上供客户端访问,以此降低 DNS 查询次数提升整体载入速率[^2]。 - **预加载关键资源**:提前告知浏览器哪些图片、字体或者其他媒体素材将会在未来某个时刻需要用到,以便于尽早开始异步抓取工作而不影响主线程执行流程[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值