在列表中，如果列表字段很多，并且每页数量很多，往下拉的时候就不好辨别数据是哪个字段的，对用户造成不好的浏览体验。

通过以下方法，可以实现将列表的第一行，也就是头部，固定在第一行显示，这样就能轻松辨别每个数据对应是哪个字段的，增加用户的使用体验。

打开项目的 public/assets/js/require-table.js 文件，在如下位置添加代码：

define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-export', 'bootstrap-table-commonsearch', 'bootstrap-table-template', 'bootstrap-table-jumpto', 'bootstrap-table-fixed-columns'], function ($, undefined, Moment) {var Table = {......api: {......// 固定列表头部(固定列表第一行)fixedheader: function ($table) {var $sourceTableHead = $table.find('thead tr');var $tableContainer = $table.parents('.fixed-table-container');// 固定表头 htmlvar fixed_html = `<div class="fixed-table-header-mg" style="display:none;"><table class="fixed_table_header"  border="0" cellpadding="4" cellspacing="0" class="table table-hover"><thead></thead></table></div>`$tableContainer.prepend(fixed_html);var $fixedTableHeaderMg = $tableContainer.find(".fixed-table-header-mg");var $fixedTableHeader = $tableContainer.find('.fixed-table-header-mg .fixed_table_header')// 设置固定表头样式$tableContainer.find('.fixed-table-header-mg').css({'background-color': 'white','white-space': 'nowrap','overflow-x': 'scroll','overflow-y': 'hidden',});$fixedTableHeader.css('max-width', 'inherit')// 设置固定头部的宽度等于表格宽度var setFixedWidth = function(){var sourceTableWidth = $table.outerWidth();$fixedTableHeaderMg.css('width', $tableContainer.outerWidth() + 'px');$fixedTableHeader.css('width', sourceTableWidth+"px");}setFixedWidth()setInterval(setFixedWidth, 1500);// 复制表头var targetHead = $sourceTableHead.clone();targetHead.appendTo($fixedTableHeader.find('thead'));// 同步复制的表头列宽var setFixedColsWidth = function(){$("#table thead tr th").each(function(index,value){var tempWidth = $(value).width();var tempHeight = $(value).height();$fixedTableHeader.find('thead th').eq(index).css({'width':(tempWidth)+"px",'height':tempHeight+"px"})});}setFixedColsWidth()setInterval(setFixedColsWidth, 1500);// 窗口滚动监听，设置固定表头位置const header = $fixedTableHeaderMg[0];const tableBody = document.querySelector('.fixed-table-body');window.addEventListener('scroll', () => {const tableBodyRect = tableBody.getBoundingClientRect();// 检查表格是否在视窗内if (tableBodyRect.top < 0 && tableBodyRect.bottom > 0) {// 设置表头的固定位置header.style.position = 'fixed';header.style.top = 0;header.style.left = tableBodyRect.left + 'px';header.style.display = 'block'} else {// 隐藏表头header.style.display = 'none';}});// 处理表格和固定表头的横向同步滚动tableBody.addEventListener('scroll', function() {header.scrollLeft = tableBody.scrollLeft;});header.addEventListener('scroll', function() {tableBody.scrollLeft = header.scrollLeft;});// 固定表头全选按钮事件$fixedTableHeader.find("input[name='btSelectAll']").click(function(){if ($(this).is(":checked")){$("input[name='btSelectItem']").prop("checked", "checked");}else{$("input[name='btSelectItem']").prop("checked", false);}});}},};return Table;
});

即以下方法为新增的固定列表第一行的代码，这段代码中，我们首先获取表头和表格容器的 jQuery 对象，然后使用字符串模板创建了一个固定表头的 HTML 结构，接着设置了一些样式，如背景色、文本溢出处理和宽度等属性。

我们将创建的固定表头插入到表格容器中，并通过 setInterval 定时调用 setFixedWidth() 和 setFixedColsWidth() 方法来同步表头和表格的宽度和列宽。

在窗口滚动时，我们使用事件监听来实现表头的固定和隐藏，并使用滚动条的 scroll 事件来同步表格和固定表头的滚动位置。

此外，我们还处理了固定表头全选按钮的事件，当固定表头的全选按钮被选中时，表格中的所有复选框也被选中。

// 固定列表头部(固定列表第一行)
fixedheader: function ($table) {
var $sourceTableHead = $table.find('thead tr');
var $tableContainer = $table.parents('.fixed-table-container');// 固定表头 html
var fixed_html = `<div class="fixed-table-header-mg" style="display:none;"><table class="fixed_table_header"  border="0" cellpadding="4" cellspacing="0" class="table table-hover"><thead></thead></table></div>
`
$tableContainer.prepend(fixed_html);
var $fixedTableHeaderMg = $tableContainer.find(".fixed-table-header-mg");
var $fixedTableHeader = $tableContainer.find('.fixed-table-header-mg .fixed_table_header')// 设置固定表头样式
$tableContainer.find('.fixed-table-header-mg').css({'background-color': 'white','white-space': 'nowrap','overflow-x': 'scroll','overflow-y': 'hidden',
});
$fixedTableHeader.css('max-width', 'inherit')// 设置固定头部的宽度等于表格宽度
var setFixedWidth = function(){var sourceTableWidth = $table.outerWidth();$fixedTableHeaderMg.css('width', $tableContainer.outerWidth() + 'px');$fixedTableHeader.css('width', sourceTableWidth+"px");
}
setFixedWidth()
setInterval(setFixedWidth, 1500);// 复制表头
var targetHead = $sourceTableHead.clone();
targetHead.appendTo($fixedTableHeader.find('thead'));// 同步复制的表头列宽
var setFixedColsWidth = function(){$("#table thead tr th").each(function(index,value){var tempWidth = $(value).width();var tempHeight = $(value).height();$fixedTableHeader.find('thead th').eq(index).css({'width':(tempWidth)+"px",'height':tempHeight+"px"})});
}
setFixedColsWidth()
setInterval(setFixedColsWidth, 1500);// 窗口滚动监听，设置固定表头位置
const header = $fixedTableHeaderMg[0];
const tableBody = document.querySelector('.fixed-table-body');
window.addEventListener('scroll', () => {const tableBodyRect = tableBody.getBoundingClientRect();// 检查表格是否在视窗内if (tableBodyRect.top < 0 && tableBodyRect.bottom > 0) {// 设置表头的固定位置header.style.position = 'fixed';header.style.top = 0;header.style.left = tableBodyRect.left + 'px';header.style.display = 'block'} else {// 隐藏表头header.style.display = 'none';}
});// 处理表格和固定表头的横向同步滚动
tableBody.addEventListener('scroll', function() {header.scrollLeft = tableBody.scrollLeft;
});
header.addEventListener('scroll', function() {tableBody.scrollLeft = header.scrollLeft;
});// 固定表头全选按钮事件
$fixedTableHeader.find("input[name='btSelectAll']").click(function(){if ($(this).is(":checked")){$("input[name='btSelectItem']").prop("checked", "checked");}else{$("input[name='btSelectItem']").prop("checked", false);}
});
}

当我们需要固定表头时调用 fixedheader 方法即可：

// 固定列表头部(固定列表第一行)
Table.api.fixedheader(table);

 还需要一键压缩打包前台和后台的JS：

php think min -m all -r js

至此，在列表中往下滚动鼠标时，列表头部则会一直固定在第一行。