让Layui的table模块支持动态表头

Hailin 发表于 2020-11-26 09:33:39 来源于CMS插件网 评论 0 点击 1132
摘要:相信大家在使用Layui前端框架时,会遇到有些场景需要根据条件动态更改表格的表头,这篇文章我们来自己解决这个问题。

本文章是基于layui-v2.5.6版本做的介绍,如果你用的是其它版本,应该也大同小异;

像我们在做一个项目,尤其是企业一些定制的模块,经常会在界面中添加一个Tab模块用于切换查看不同状态下的内容,如下图:

1.png

但要求在不同的状态显示的表头又不一样,如下图:

2.jpg

但是Larui自带的table.js插件是不支持的,这里我们简单的加几个字符进去,就可以支持了;

1、打开插件目录下的layui/lay/modules目录,用文本文件打开table.js,然后搜索:item2.title,

3.png

将{{item2.title||""}}替换成{{(typeof(item2.title)==="function")?item2.title():(item2.title||"")}},然后记得保存;如下图

4.png

2、打开项目中,表单定义脚本,在定义表头参数时,把Title字段改成方法,如下图:

5.png

table.render({
	elem: '#content-list'
	,url: '接口'
	,method: 'post'
	,where: { status: 0 }
	,limit: 10
	,page: true
	,cols: [[
		{type:'numbers'}
		,{type: 'checkbox'}
		,{field: 'title', title: '标题', minWidth: 200}
		....(自己的字段)
		,{field: 'entertime', title: function(){
				if(authFlag == 2 || authFlag == 4){
					return '受理时间';
				}else if(authFlag == 3){
					return '完成时间';
				}else{
					return '登记时间';
				}
			}, width: 170, templet: function(d){
				if(authFlag == 2 || authFlag == 4){
					return d.accepttime;
				}else if(authFlag == 3){
					return d.endtime;
				}else{
					return d.enterdate;
				}
			}
		}
	]]
});

改造完成,是不是有一种简单到超乎你的想象。



预告:下一期我们根据不同状态显示不同按钮:如下图

6.png

  • 上一条:没有了
  • 下一条:没有了