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

最新推荐文章于 2025-05-09 12:05:35 发布

原创最新推荐文章于 2025-05-09 12:05:35 发布 · 2.7w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#layui #layui数据表格 #layui表格列样式

PHP 同时被 3 个专栏收录

23 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

layui

3 篇文章

订阅专栏

本文介绍了使用layui框架为数据表格列添加样式的三种方法：直接设置样式、使用template模板和在数据返回前处理。每种方法都有其适用场景，帮助开发者灵活美化表格展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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>";