Layui怎么实现根据table行数据显示不同按钮

在官方文档中,提供了templet 自定义列模板来完成对某列的单元格添加链接等其它元素。实现操作列显示不同按钮也需要通过这个模板来做。

templet 提供了三种使用方式,请结合实际场景选择最合适的一种:如果自定义模版的字符量太大,我们推荐你采用【方式一】;
如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】;
如果自定义模板的字符量很小,我们推荐你采用【方式三】
方式一:绑定模版选择器
在这里插入图片描述
在这里插入图片描述
注意:上述的 {{d.id}}、{{d.title}} 是动态内容,它对应数据接口返回的字段名。除此之外,你还可以读取到以下额外字段: 序号:{{ d.LAY_INDEX }} (该额外字段为 layui 2.2.0 新增)

如果要实现动态根据列的值显示按钮,方法一可以用以下方式实现:
在这里插入图片描述
由于模板遵循 laytpl 语法(建议细读 laytpl文档),因此在模板中你可以写任意脚本语句(如 if else/for等)

这种方式在只需要实现根据某列值显示按钮时,推荐用这种方式更加方便。

方式二:函数转义

自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:
在这里插入图片描述
在这里插入图片描述
方法三:直接赋值模版字符
事实上,templet 也可以直接是一段 html 内容,如:在这里插入图片描述
注意:这里一定要被一层

包裹,否则无法读取到模板

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值