layui給資料表格某列新增樣式的三種方法

• 一、方式一（最簡單的方法）
• 二、方式二（利用template）
• 三、方式三（在資料返回前做好處理，也就是寫入html程式碼）

一、方式一（最簡單的方法）

如下給列“型別”添加了字型顏色#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>";