layui给数据表格某列添加样式的三种方法

layui给数据表格列添加样式的方式目前我就发现三种方式，如下是给表格的列“类型”添加字体颜色的三种方式。

一、方式一（最简单的方法）

如下给列“类型”添加了字体颜色#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'},
                    ];
                });

二、方式二（利用template）

可以在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代码）

页面不做任何处理

layList.tableList('userList',"{:Url('getlist')}",function () {
                return [
                    {field: 'type', title: '类型'},
                    {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'},
                ];
            });

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

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