theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(component): table

Browse Source 
默认加载时有横向滚动条，header 的滚动条占位无法显示

ISSUES CLOSED: https://gitee.com/layui/layui-vue/issues/I5F8R1
This commit is contained in:
dingyongya
2022-07-04 10:20:15 +08:00
parent 6953c530ca
commit 8e45ff5a0d
3 changed files with 136 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package/component/src/component/table/index.vue
View File

@@ -217,13 +217,17 @@ let tableHeader = ref<HTMLElement | null>(null);
let tableBody = ref<HTMLElement | null>(null);
let scrollWidthCell = ref(0);
onMounted(() => {
const scrollWidth: number = tableBody.value?.scrollWidth || 0;
const getScrollWidth = () => {
const clientWidth: number = tableBody.value?.clientWidth || 0;
const offsetWidth: number = tableBody.value?.offsetWidth || 0;
if (scrollWidth < offsetWidth) {
scrollWidthCell.value = offsetWidth - scrollWidth;
if (clientWidth < offsetWidth) {
scrollWidthCell.value = offsetWidth - clientWidth;
}
};
onMounted(() => {
getScrollWidth();
tableBody.value?.addEventListener("scroll", () => {
tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
});