关于layui cardtable的一些疑问

各位，想请教一下。layui-card-table项目里为什么单独渲染没问题，但是在同一个页面和其他组件（包括这个组件本身）同时渲染就会出现分页异常。
https://gitee.com/layui-extension/layui-card-table

这种情况可能是因为同一个页面中同时存在多个layui-card-table组件，而这些组件共用了同一个分页器（laypage）的变量，从而造成了分页异常。具体来说，如果在同一个页面中存在多个layui-card-table组件，那么它们会共用同一个laypage变量，而每个组件的分页参数（如页码、每页显示数量等）都会影响这个共用的变量，从而导致分页器的状态出现异常。

为了解决这个问题，您可以尝试在每个layui-card-table组件中使用不同的laypage变量，或者将每个组件包装在不同的Vue组件中，以隔离它们之间的状态。以下是一个使用不同的laypage变量的示例：

<div id="app">
  <div class="layui-card">
    <div class="layui-card-header">Card Table 1</div>
    <div class="layui-card-body">
      <table id="table1" class="layui-table"></table>
    </div>
  </div>

  <div class="layui-card">
    <div class="layui-card-header">Card Table 2</div>
    <div class="layui-card-body">
      <table id="table2" class="layui-table"></table>
    </div>
  </div>
</div>

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

  var table1 = table.render({
    elem: '#table1',
    url: '/api/table1',
    page: true,
    limit: 10,
    cols: [
      // ...
    ]
  });

  var table2 = table.render({
    elem: '#table2',
    url: '/api/table2',
    page: true,
    limit: 10,
    cols: [
      // ...
    ]
  });

  laypage.render({
    elem: 'page',
    count: 50,
    limit: 10,
    jump: function (obj, first) {
      if (!first) {
        table1.reload({
          page: {
            curr: obj.curr,
            limit: obj.limit
          }
        });

        table2.reload({
          page: {
            curr: obj.curr,
            limit: obj.limit
          }
        });
      }
    }
  });
});
</script>

在这个示例中，我们通过在每个layui-card-table组件中使用不同的laypage变量（即分页器的ID），来避免它们之间共用同一个变量的问题。在分页器的回调函数中，我们通过调用每个组件的reload方法来更新它们的数据，并传递当前页码和每页显示数量等参数。这样，即使在同一个页面中存在多个layui-card-table组件，也可以正常地进行分页操作。