2021-08-08

Layui表格

Table模块作为layui的核心组成之一，它用于对表格进行一些列表格和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求，支持固定表头，固定行，列左列右，支持拖拽改变宽度、排序、支持多级表头、单元格的自定义模板等等。

下面就是三种渲染table的方法

1. 方法渲染
2. 自动渲染
3. 转换静态表格

或者一张图作为印象理解

 

方法渲染，或者是手动渲染的手动模式，它只需一个table标签，而其它的基础参数则通过JS设定

实例：

 

 

代码如下

 <table id="tabBook" lay-filter="tabBook"></table>

 

这样一个简单的方法渲染就完成了

自动渲染，它所需的参数比较多，基本靠HTML配置，无需写入过多JS，只需专注于HTML表头部分

需注意三点

1. 带有class的layui-table的<table>标签
2. 对标签设置属性lay-data= “”用于配置一些基础参数
3. 在<th>标签中设置属性lay-data的“”用于配置表头信息

看下实例吧

‘’ ‘’

‘’转‘’换‘’静‘’态表格,就是赋予一些样式等等

在渲染表格中，并非所有的基础参数都是需要的，可要可不要

在所述的三张方法里面，更推荐方法渲染，它无需写入过多的HTML代码，把更多的代码专注于JS代码上，在对于项目的频繁改动及发布，它的便捷性会体现得更为明显。但是与自动化渲染的方法，两者各有千秋，看编码人员的使用