layui table 动态表头情况下自定义单元格内容

最新推荐文章于 2025-03-29 16:23:32 发布

ishouyong

最新推荐文章于 2025-03-29 16:23:32 发布

阅读量1.5k

点赞数 1

分类专栏：前端/angular/react 文章标签： layui table

本文链接：https://blog.csdn.net/enlangs/article/details/109356062

版权

背景

需求是动态表头情况下根据单元格的值呈现不同的背景色或其他。
官方文档：https://www.layui.com/demo/table/style.html

解决方案

核心是使用 templet 属性，并且把这个取得这个属性中的上下文（this）中的field属性，然后在templet 函数参数中的数据取出value，见下面代码中的custom_cell函数实现和调用；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head