LayUI前框框架普及版（二）-阿里云开发者社区

LayUI前框框架普及版（一）https://developer.aliyun.com/article/1433688

3.12.1 与其它元素的搭配

按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PaP5x5IC-1686143517932)(LayUI.assets/image-20210220113234007.png)]

<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

<ul class="layui-nav" style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
</ul

选项卡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hpZ9vh7n-1686143517941)(LayUI.assets/image-20210220113420407.png)]

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理<span class="layui-badge-dot"></span></li>
    <li>最新邮件<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>

3.13 时间线

按照指定设置样式书写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYHlDPQh-1686143517947)(LayUI.assets/image-20210220113515935.png)]

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>

注意：

图标可以任意定义（但并不推荐更改）
标题区域并不意味着一定要加粗
内容区域可自由填充。

四、LayUI内置模块

LayUI提供了很多的内置模块，提供相应的效果与功能，为了减少代码的冗余，默认是不加载所有的模块的，所以需要在使用相应模块时加载对应模块

<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
//可以一次加载多个模块
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg('Hello World');
});
</script>

4.1 日期选择laydate

年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。

4.1.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>

4.1.2 elem 属性

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  laydate.render({ 
    elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
  });
});
</script>

4.1.3 type 属性

类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：

type可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});
//年月选择器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});
//日期选择器
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默认，可不填
});
//时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});
//日期时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});
});
</script>

4.1.4 range 属性

类型：Boolean/String，默认值：false

如果设置 true，将默认采用 “ - ” 分割。你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
//可以一次加载多个模块
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
 //年范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true //或 range: '~' 来自定义分割字符
});
//年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true //或 range: '~' 来自定义分割字符
});
//日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});
//时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true //或 range: '~' 来自定义分割字符
});
//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true //或 range: '~' 来自定义分割字符
});
});
</script>

4.1.5 format 属性

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符	说明
yyyy	年份，至少四位数。如果不足四位，则前面补零
y	年份，不限制位数，即不管年份多少位，前面均不补零
MM	月份，至少两位数。如果不足两位，则前面补零。
M	月份，允许一位数。
dd	日期，至少两位数。如果不足两位，则前面补零。
d	日期，允许一位数。
HH	小时，至少两位数。如果不足两位，则前面补零。
H	小时，允许一位数。
mm	分钟，至少两位数。如果不足两位，则前面补零。
m	分钟，允许一位数。
ss	秒数，至少两位数。如果不足两位，则前面补零。
s	秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式	示例值
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒	2017年08月18日 20时08分08秒
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
yyyy年M月	2017年8月
M月d日	8月18日
北京时间：HH点mm分	北京时间：20点08分
yyyy年的M月某天晚上，大概H点	2017年的8月某天晚上，大概20点

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //自定义日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});
});
</script>

4.1.6 value 属性

类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//传入符合format格式的字符给初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必须遵循format参数设定的格式
});
//传入Date对象给初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});
});
</script>

4.1.7 min/max 属性

类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’

设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
2.如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
3.如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //日期有效范围只限定在：2017年
laydate.render({ 
  elem: '#test'
  ,min: '2017-1-1'
  ,max: '2017-12-31'
});
//日期有效范围限定在：过去一周到未来一周
laydate.render({ 
  elem: '#test'
  ,min: -7 //7天前
  ,max: 7 //7天后
});
//日期时间有效范围的设定: 
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,min: '2017-8-11 12:30:00'
  ,max: '2017-8-18 12:30:00'
});
//时间有效范围设定在: 上午九点半到下午五点半
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
});
});
</script>

4.1.8 showBottom 属性

类型：Boolean，默认值：true

如果设置 false，将不会显示控件的底部栏区域

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//不显示底部栏
laydate.render({
  elem: '#test'
  ,showBottom: false
});
});
</script>

4.1.9 btns 属性

类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]

右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//只显示清空和确认
laydate.render({
  elem: '#test'
  ,btns: ['clear', 'confirm']
});
});
</script>

4.1.10 calendar 属性

类型：Boolean，默认值：false

我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //允许显示公历节日
laydate.render({
  elem: '#test'
  ,calendar: true
});
});
</script>

4.1.11 mark 属性

类型：Object，默认值：无

calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

标注	格式	说明
每年的日期	{‘0-9-18’: ‘国耻’}	0 即代表每一年
每月的日期	{‘0-0-15’: ‘中旬’}	0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期	{‘2017-8-21’: ‘发布’)	-

可同时设定多个，如：

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //标注重要日子
var ins1 = laydate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年12月31日
    ,'0-0-10': '工资' //每个月10号
    ,'2017-8-15': '' //具体日期
    ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
    ,'2017-8-21': '发布'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
      ins1.hint('中国人民抗日战争胜利72周年');
    }
  }
});
});
</script>

4.2 分页laypage

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：

快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layPage快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
<div id="test1"></div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});
</script>
</body>
</html>

4.2.1 基础参数

参数选项	说明	类型	默认值
elem	指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)	String/Object	-
count	数据总数。一般通过服务端得到	Number	-
limit	每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。	Number	10
limits	每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框	Array	[10, 20, 30, 40, 50]
curr	起始页。一般用于刷新类型的跳页以及HASH跳页。	Number	1
groups	连续出现的页码个数	Number	5
prev	自定义“上一页”的内容，支持传入普通文本和HTML	String	上一页
next	自定义“下一页”的内容，同上	String	下一页
first	自定义“首页”的内容，同上	String	1
last	自定义“尾页”的内容，同上	String	总页数值
layout	自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增）、skip（快捷跳页区域）	Array	[‘prev’, ‘page’, ‘next’]
theme	自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题	String	-
hash	开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页	String/Boolean	false

4.3 数据表格table

是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能

4.3.1 快速使用

创建一个table实例最简单的方式是，在页面放置一个元素，然后通过 table.render() 方法指定该容器，如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnqiuYw0-1686143517951)(LayUI.assets/image-20210220132051285.png)]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
});
</script>
</body>
</html>

4.3.2 表格渲染

三种初始化渲染方式

方式	机制	适用场景
01.	方法渲染	用JS方法的配置完成渲染	（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02.	自动渲染	HTML配置，自动渲染	无需写过多 JS，可专注于 HTML 表头部分
03.	转换静态表格	转化一段已有的表格元素	无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

4.3.2.1 方法渲染

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});
});
</script>

事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。

备注：*table.render()*方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作

4.3.2.2 自动渲染

即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

带有 class=“layui-table” 的标签。
对标签设置属性 lay-data=“” 用于配置一些基础参数
在标签中设置属性*lay-data=“”*用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

4.3.2.3 静态表格渲染

假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2CHmgVBO-1686143517954)(LayUI.assets/image-20210220133200944.png)]

转换后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDp69cbE-1686143517957)(LayUI.assets/image-20210220133212902.png)]

<table lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:100}">昵称</th>
      <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
      <th lay-data="{field:'sign'}">签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心1</td>
      <td>66</td>
      <td>人生就像是一场修行a</td>
    </tr>
    <tr>
      <td>贤心2</td>
      <td>88</td>
      <td>人生就像是一场修行b</td>
    </tr>
    <tr>
      <td>贤心3</td>
      <td>33</td>
      <td>人生就像是一场修行c</td>
    </tr>
  </tbody>
</table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
  //支持所有基础参数
}); 
});
</script>

4.3.3 基础参数

基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。基础参数一般出现在以下几种场景中：

场景一：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: '/api/data'
});
场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

参数	类型	说明	示例值
elem	String/DOM	指定原始 table 容器的选择器或 DOM，方法渲染方式必填	“#demo”
cols	Array	设置表头。值是一个二维数组。方法渲染方式必填	详见表头参数
url（等）	-	异步数据接口相关参数。其中 url 参数为必填项	详见异步接口
toolbar	String/DOM/Boolean	开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器toolbar: ‘ xxx ’ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default’ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数	false
defaultToolbar	Array	该参数可自由配置头部工具栏右侧的图标按钮	详见头工具栏图标
width	Number	设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。	1000
height	Number/String	设定容器高度	详见height
cellMinWidth	Number	（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth	100
done	Function	数据渲染完的回调。你可以借此做一些其它的操作	详见done回调
data	Array	直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。	[{}, {}, {}, {}, …]
totalRow	Boolean	是否开启合计行区域。layui 2.4.0 新增	false
page	Boolean/Object	开启分页（默认：false）注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）	{theme: ‘#c00’}
limit	Number	每页显示的条数（默认：10）。值务必对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数	30
limits	Array	每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。注意：优先级低于 page 参数中的 limits 参数	[30,60,90]
loading	Boolean	是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式	false
title	String	定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增	“用户表”
text	Object	自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。	详见自定义文本
autoSort	Boolean	默认 true，即直接由 table 组件在前端自动处理排序。若为 false，则需自主排序，通常由服务端直接返回排序好的数据。注意：该参数为 layui 2.4.4 新增	详见监听排序
initSort	Object	初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。	详见初始排序
id	String	设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 ** 中的 id 参数中获取。	test
skin（等）	-	设定表格各种外观、尺寸等	详见表格风格

LayUI前框框架普及版（三）https://developer.aliyun.com/article/1433691

LayUI前框框架普及版（二）

3.12.1 与其它元素的搭配

按钮

导航

选项卡

3.13 时间线

四、LayUI内置模块

4.1 日期选择laydate

4.1.1 快速使用

4.1.2 elem 属性

4.1.3 type 属性

4.1.4 range 属性

4.1.5 format 属性

4.1.6 value 属性

4.1.7 min/max 属性

4.1.8 showBottom 属性

4.1.9 btns 属性

4.1.10 calendar 属性

4.1.11 mark 属性

4.2 分页laypage

4.2.1 基础参数

4.3 数据表格table

4.3.1 快速使用

4.3.2 表格渲染

4.3.2.1 方法渲染

4.3.2.2 自动渲染

4.3.2.3 静态表格渲染

4.3.3 基础参数

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

LayUI前框框架普及版（二）

3.12.1 与其它元素的搭配

按钮

导航

选项卡

3.13 时间线

四、LayUI内置模块

4.1 日期选择laydate

4.1.1 快速使用

4.1.2 elem 属性

4.1.3 type 属性

4.1.4 range 属性

4.1.5 format 属性

4.1.6 value 属性

4.1.7 min/max 属性

4.1.8 showBottom 属性

4.1.9 btns 属性

4.1.10 calendar 属性

4.1.11 mark 属性

4.2 分页laypage

4.2.1 基础参数

4.3 数据表格table

4.3.1 快速使用

4.3.2 表格渲染

4.3.2.1 方法渲染

4.3.2.2 自动渲染

4.3.2.3 静态表格渲染

4.3.3 基础参数

热门文章

最新文章

相关电子书