layui 中 templet的使用：日期、小数、拼接、字体颜色

原创于 2023-08-03 15:26:19 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

文章描述了一个数据表格模板，包含字段如入库日期、报关费总金额（保留两位小数）、尺寸拼接以及状态显示，状态用不同颜色区分（未入库、已入库、已出库、已开账）。

日期展示

{ field: 'LAM_SHIPDT', title: '入库日期', width: 120, align: 'center', 
templet: "<div>{{layui.util.toDateString(d.LAM_SHIPDT, 'yyyy/MM/dd')}}</div>" }

两位小数展示
{

field: 'BG_TOTAL', title: '报关费总金额(￥)', width: 120, align: 'center', templet: function (data) {
return parseFloat(data.BG_TOTAL).toFixed(2);
} },

字符拼接展示

{
field: 'LAM_SIZE', title: '尺寸(mm)', width: 150, halign: 'center', align: 'center', templet: function (data) {
var showdata = data.LAM_LONG + " * " + data.LAM_WIDE + " * " + data.LAM_HIGH;
return showdata;
}
},

添加字体颜色

{
            field: 'LAM_PAY_STATE', title: '状态', width: 120, halign: 'center', align: 'center', sortable: true,
            templet: function (d) {
                if (d.LAM_PAY_STATE == "0") {
                    return '未入库';
                }
                else if (d.LAM_PAY_STATE == "1") {
                    return '<span style="color:#1e9fff">已入库</span>';
                }
                else if (d.LAM_PAY_STATE == "2") {
                    return '<div style="color:#ffb800">已出库</div>';
                } else if (d.LAM_PAY_STATE == "3") {
                    return '<div style="color:#16b777">已开账</div>';
                } else if (d.LAM_PAY_STATE == "4") {
                    return '<div style="color:#16b777">已开账</div>';
                }
            }
        },