之前的一次开发中使用到了Bootstrap Table的组件 ,为了固顶表头 给table设置了height ,设置了height后表头固顶ok ,单表头与表格内容的不对齐
参考百度上的文章 解决了这个问题 记录下
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'qingdongams/diytable/alllatitude/index' + location.search,
table: 'alllatitude',
}
});
// 获取表格模板
let table_tmp_data = Config.table_data_tmp;
var table = $("#table");
table.attr('data-height', document.body.offsetHeight - 100);
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'weigh',
fixedColumns : true,
fixedNumber : 2,
columns : table_tmp_data,
commonSearch: false,
// 在表头加载完成后 调用更新表头方法
onPostHeader:function (){
Controller.api.reviseTableHeader();
}
});
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},
// 获取表身的宽度, 重新赋值给表头
reviseTableHeader: function (){
$('.fixed-table-container .fixed-table-header table thead tr th').each(function(i,n){
var width = window.getComputedStyle($('.fixed-table-body table th').eq(i)[0]).width.replace('px','');
$(n).css('width',width+'px');
$(n).find('.fht-cell').css('width',width-1+'px');
})
}
}
};
return Controller;
});
参考文章: https://codeleading.com/article/55673555766/#google_vignette