layui table 鼠标滚动监听事件

你可以使用 layuitable 的 onScroll 事件来监听鼠标滚动。具体实现方法如下：

1. 给 table 元素添加 id 用于获取 DOM 节点。

<table id="demo" lay-filter="test"></table>

2. 在 JavaScript 中获取 table 元素并绑定 onScroll 事件。

layui.use('table', function(){
  var table = layui.table;

  // 监听表格滚动事件
  document.getElementById('demo').onscroll = function(event) {
    console.log('滚动了');
  }
});

这样就可以监听到表格的滚动事件了。你可以在 onscroll 事件中编写自己的业务逻辑。

相关问题

layui table 没有滚动条

可以尝试在 table 的配置项中设置 height 属性，例如：

table.render({
  elem: '#demo',
  height: 400, //设定容器高度
  url: '/demo/table/user/',
  cols: [[
    {field:'id', title: 'ID', width:80},
    {field:'username', title: '用户名', width:80},
    {field:'sex', title: '性别', width:80, sort: true},
    {field:'city', title: '城市', width:80},
    {field:'sign', title: '签名', width: 177},
    {field:'experience', title: '积分', width: 80, sort: true},
    {field:'score', title: '评分', width: 80, sort: true},
    {field:'classify', title: '职业', width: 80},
    {field:'wealth', title: '财富', width: 135, sort: true},
  ]]
});

如果表格数据超过了设定的高度，就会出现滚动条。

layui table 鼠标悬浮事件，在行上显示，移开消失 完整示例

以下是一个完整的 layui 表格中鼠标悬浮事件的示例：

HTML：

<table class="layui-table" id="demo">
  <thead>
    <tr>
      <th>姓名</th>
      <th>城市</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>北京</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>上海</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>广州</td>
      <td>销售</td>
    </tr>
  </tbody>
</table>

JavaScript:

layui.use(['table'], function() {
  var table = layui.table;

  //监听表格鼠标悬浮事件
  table.on('tool(test)', function(obj) {
    var data = obj.data;
    var tr = obj.tr;

    //鼠标悬浮事件
    tr.on('mouseenter', function() {
      layer.tips('姓名：' + data.name + '<br>城市：' + data.city + '<br>职业：' + data.job, tr, {
        tips: [1, '#3595CC'],
        time: 0
      });
    });

    //鼠标移开事件
    tr.on('mouseleave', function() {
      layer.closeAll('tips');
    });
  });
});

在该示例中，我们使用了 layui 的 table 模块来创建表格，并且监听了表格的鼠标悬浮事件。当鼠标悬浮在某一行上时，会弹出一个提示框显示该行的数据信息；当鼠标移开时，提示框会消失。