layui动态改变数据表格状态

您可以使用 layui 的表格渲染方法 `table.render()` 来渲染数据表格，并通过该方法的回调函数 `done` 来动态改变表格状态。

以下是一个示例代码，其中数据表格初始化时默认显示“未审核”状态的数据，点击“审核”按钮后，将数据状态改为“已审核”，并重新渲染表格。

<div class="layui-btn-group">
  <button class="layui-btn layui-btn-sm" id="audit-btn">审核</button>
</div>

<table id="data-table" lay-filter="data-table"></table>

<script>
layui.use(['table', 'jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;

  // 初始化数据表格
  table.render({
    elem: '#data-table',
    url: '/api/getData',
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '名称'},
      {field: 'status', title: '状态'}
    ]],
    where: {status: 'unaudited'}, // 默认显示未审核状态的数据
    done: function(res, curr, count) {
      // 渲染完表格后的回调函数
      if (res.code === 0) {
        // 数据加载成功
        if (curr === 1) {
          // 第一页的数据已加载完成，可以进行状态处理
          handleStatus();
        }
      } else {
        // 数据加载失败
        layer.msg(res.msg, {icon: 2});
      }
    }
  });

  // 处理数据状态
  function handleStatus() {
    $('#data-table tbody tr').each(function(){
      var tr = $(this);
      var rowData = table.cache['data-table'][tr.data('index')];
      if (rowData.status === 'unaudited') {
        tr.addClass('unaudited');
      } else {
        tr.addClass('audited');
      }
    });
  }

  // 监听审核按钮点击事件
  $('#audit-btn').on('click', function(){
    // 手动修改数据状态
    $('#data-table tbody tr.unaudited').each(function(){
      var tr = $(this);
      var rowData = table.cache['data-table'][tr.data('index')];
      rowData.status = 'audited';
    });
    // 重新渲染表格
    table.reload('data-table', {where: {status: 'audited'}});
  });
});
</script>

<style>
.audited td {color: #aaa; text-decoration: line-through;}
.unaudited td {background-color: #f2dede;}
</style>

在上述示例中，我们通过添加 `.unaudited` 和 `.audited` 两个 CSS 类来改变表格行的样式，以便区分已审核和未审核数据。同时，我们还使用了 layui 的分页功能，只对当前页的数据进行状态处理，以避免性能问题。