layui表格使用templet模板。

客官°小女子只卖身不卖艺 2023-07-18 02:48 101阅读 0赞

table.render(\{  
                        elem: '\#test',  
                        data: data,  
                        limit: 20,  
                        cols: \[  
                            \[\{  
                                type: 'checkbox'  
                            \}, \{  
                                title: '题目',  
                                templet: '\#testliblist',  
                                minWidth: 500  
                            \}, \{  
                                field: 'grade',  
                                title: '错因',  
                                minWidth: 80  
                            \}, \{  
                                field: 'subject',  
                                title: '学科',  
                                minWidth: 80  
                            \}, \{  
                                field: 'studysection',  
                                title: '试题来源',  
                                minWidth: 100  
                            \}, \{  
                                field: 'questiontype',  
                                title: '做题时间',  
                                minWidth: 100,  
                               templet: function(res) \{

return res.optime.substring(0, 10);  
                               \}  
                            \}\]  
                        \],

page: false  
                    \});  
                \}

表格中使用templet有两种方式。

1.常见的下面的那种，只是简单的给接口传来的数据转换成我们想要显示的格式。或者是传的图片的src。我们加上img标签修饰。

2。如果是那种样式样式内容并且由好多接口参数组成的一列。就要使用html的模板了，像上面的题目，直接用了模板的id标识。然后在写模板就行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

注意：上述的 \{ \{d.id\}\}、\{ \{d.title\}\} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：  
序号：\{ \{ d.LAY\_INDEX \}\} （该额外字段为 layui 2.2.0 新增）

由于模板遵循 laytpl 语法（建议细读 *laytpl文档* ），因此在模板中你可以写任意脚本语句（如 if else/for等）：

这里的d就是接口数组的一个。他会循环的。所以这里不用你再循环了。

\{ \{\# if(d.id < 100)\{ \}\}

<a href="/detail/\{ \{d.id\}\}" class="layui-table-link">\{ \{d.title\}\}</a>

\{ \{\# \} else \{ \}\}

\{ \{d.title\}\}(普通用户)

\{ \{\# \} \}\}

</script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: /images/20230528/c1d4881d74ef4f30b4b95b8b6970f6e4.png