Layui表格怎么给某一行添加删除线样式

Layui Table行内删除线核心方案：done回调配合CSS类精准控制

Layui Table 如何为指定行添加删除效果（text-decoration: line-through）

许多开发者在尝试通过 rowStyle 或 cellStyle 配置为表格行添加删除线时，常发现样式并未生效。这主要是因为Layui Table的渲染机制决定了样式注入时机与实际DOM生成的差异。要实现稳定可靠的删除线效果，最佳路径是从数据标识出发，在DOM渲染完成后通过CSS类进行批量控制。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

rowStyle 设置 textDecoration 失效的根本原因

样式作用域是关键所在。Layui的 rowStyle 回调函数所返回的CSS样式，仅仅会被应用到 标签的 style 属性中。而 text-decoration 这类文本修饰属性，必须直接作用于包含文字内容的元素（如 或内部的

），浏览器默认不会将父级tr的文本样式自动继承到单元格内部。

• rowStyle 生成的样式仅挂载于 层级，对子元素无强制继承效力。
• cellStyle 虽能控制 ，但Layui默认会在td内包裹一层

  ，文字实际位于该div内部。

• 因此，可靠方案有两种：一是在数据源中标记状态字段，渲染后通过CSS类统一控制样式；二是在表格渲染完成的回调中手动为对应DOM元素添加样式类。

推荐方案：利用 done 回调与CSS类实现精准样式控制

该方法的核心逻辑是在表格数据渲染完毕后，遍历所有行元素，依据数据中的状态字段（例如 isDeleted: true）为对应的 添加特定CSS类名，再通过CSS规则统一定义删除线样式，实现样式与数据的解耦。

table.render({
  elem: '#demo',
  url: '/api/list',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'}
  ]],
  done: function(res, curr, count) {
    // 假设数据中存在 isDeleted 字段标识删除状态
    this.elem.next('.layui-table-box').find('tbody tr').each(function(i, tr) {
      const data = res.data[i];
      if (data && data.isDeleted) {
        $(tr).addClass('deleted-row');
      }
    });
  }
});

对应的CSS样式定义需覆盖单元格及其内部所有元素：

.deleted-row .layui-table-cell,
.deleted-row .layui-table-cell * {
  text-decoration: line-through !important;
}

• 使用 !important 是必要的，因为Layui Table单元格自带内联样式和高优先级类，需确保自定义样式能够覆盖默认样式。
• 选择器 .deleted-row .layui-table-cell * 旨在覆盖单元格内可能存在的嵌套元素（例如图标与文本混合的场景），确保删除线效果完整。
• 删除线通常作为静态状态标识，建议避免与 :hover 等动态伪类混淆，以保持视觉逻辑清晰。

原生JavaScript实现方案：不依赖jQuery的 done 回调操作

若项目中未引入jQuery，可通过原生DOM API在 done 回调中实现相同功能。关键在于通过容器元素及类名选择器准确定位到表格主体与行元素。

done: function(res, curr, count) {
  const tableBox = this.elem.nextElementSibling.querySelector('.layui-table-box');
  const rows = tableBox.querySelectorAll('tbody tr');
  rows.forEach((tr, i) => {
    const data = res.data[i];
    if (data?.isDeleted) {
      tr.classList.add('deleted-row');
    }
  });
}

• 上述代码依赖 res.data[i] 与行索引严格对应，适用于未启用分页、排序等可能导致DOM顺序变动的场景。若启用了这些功能，建议使用数据ID等唯一标识进行关联匹配。
• 对于服务端排序、筛选等动态场景，更健壮的方式是在渲染时通过 tr.dataset.id = data.id 绑定数据标识，再基于此进行状态判断与样式添加。
• 出于性能考虑，在 done 回调中应尽量减少DOM查询频率，使用批量操作（如 classList.add）以获得更佳渲染效率。

总结而言，Layui Table在样式自定义方面提供的直接接口（如 rowStyle、cellStyle）有其使用限制。对于删除线这类精确到行内文本的样式需求，采用“数据标记 + 渲染后CSS类控制”的方案最为稳定可靠。避免在列配置中尝试复杂的内联样式字符串，可显著减少不必要的调试成本，提升开发效率。