当前博客:29-快码FOF中文编程layui教学-组件:静态表格

296 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

表格再网页种很是常用,尤其是做后端展示数据,几乎都是用的表格展示,

layui内置了静态表格和动态表格,我们先了解一下静态表格,静态表格很简单,就是在普通的表格上内置了很多样式,通过属性来设置表格样式。

代码示例:

<表格 类名="lay-表格" lay-隔行 lay-风格="行边框风格" lay-尺寸="大尺寸">
	<表格格式列组>
		<表格格式列组值 宽度="150" />
		<表格格式列组值 宽度="200" />
		<表格格式列组值 />
	</表格格式列组>
	<表格头组>
		<表格行>
			<表格头>昵称</表格头>
			<表格头>加入时间</表格头>
			<表格头>签名</表格头>
		</表格行>
	</表格头组>
	<表格内容组>
		<表格行>
			<表格内容>贤心</表格内容>
			<表格内容>2016-11-29</表格内容>
			<表格内容>人生就像是一场修行</表格内容>
		</表格行>
		<表格行>
			<表格内容>许闲心</表格内容>
			<表格内容>2016-11-28</表格内容>
			<表格内容>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</表格内容>
		</表格行>
		<表格行>
			<表格内容>张三</表格内容>
			<表格内容>2022-11-29</表格内容>
			<表格内容>你想进去吗?</表格内容>
		</表格行>
	</表格内容组>
</表格>
Markup

代码效果展示:

除此之外还有更多属性值,大家可以自行更改,组合:

属性名 属性值 备注
lay-隔行 用于表格隔行换色。
lay-风格 行边框风格
列边框风格
无边框风格
若使用默认风格不设置该属性即可
lay-尺寸 大尺寸
小尺寸
若使用默认风格不设置该属性即可

注意:layui的静态表格,一定要用类名 lay-表格 包裹起来。

点击此处跳转案例下载:点击下载lay-表格实例

29-快码FOF中文编程layui教学-组件:静态表格