🐛(component): table

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

ISSUES CLOSED: https://gitee.com/layui/layui-vue/issues/I5F8R1

package/component/src/component/table/index.vue

@@ -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;
   });

package/document-component/src/document/zh-CN/components/table.md

@@ -435,19 +435,20 @@ export default {
     const columns8 = [
       {
         title:"账户",
-        width:"200px",
+        minWidth:"200px",
         key:"username"
       },{
         title:"密码",
-        width: "180px",
+        minWidth: "180px",
         key:"password"
       },{
         title:"年龄",
-        width: "180px",
+        minWidth: "180px",
         key:"age"
       },{
         title:"备注",
         key:"remark",
+				minWidth: "180px",
         ellipsisTooltip: true,
       }
     ]