layui使用总结

一，table表格数据，样式设置

1，方法一，直接在对应列上设置好style：

如下给列“类型”添加了字体颜色#f67d06

layList.tableList('userList',"{:Url('getlist')}",function () {
                    return [
                        {field: 'type', title: '类型' ,style:'color: #f67d06;'},
                        {field: 'title', title: '标题' },
                        {field: 'balance', title: '余量',sort:true,event:'balance'},
                        {field: 'number', title: '奖励',sort:true},
                        {field: 'mark', title: '备注'},
                        {field: 'nickname', title: '微信昵称/操作者'},
                        {field: 'add_time', title: '时间',align:'center'},
                    ];
                });
2，方法二，使用templete，

可以在script标签里写html代码，什么a标签，span标签，class和style都可以写。

layList.tableList('userList',"{:Url('getlist')}",function () {
                return [
                    {field:'type',title: '类型',templet: '#typecolor'}",
                    {field: 'title', title: '标题' },
                    {field: 'balance', title: '余量',sort:true,event:'balance'},
                    {field: 'number', title: '奖励',sort:true},
                    {field: 'mark', title: '备注'},
                    {field: 'nickname', title: '微信昵称/操作者'},
                    {field: 'add_time', title: '时间',align:'center'},
                ];
            });

<script type="text/html" id="typecolor">
  <a href="https://blog.csdn.net/weixin_43687896/article/details/84344089" class="background" target="_blank" style="color:#f67d06;">{{ d.username }}</a>
</script>

直接在对应的模板上设置各种结构和样式，较上面一种更加的灵活，不但可以设置样式，还可以更改特别的结构

方法三，（在数据返回前做好处理，也就是写入html代码），直接在后端php拼接好返回数据结构

在模型里处理要返回的数据（在数据上拼接html代码）

$list[$key]['type'] = "<span style='color: #f67d06;'>".$list[$key]['type']."</span>";

参考博客位置：https://blog.csdn.net/weixin_43687896/article/details/84976821