✨(component): table

新增table 固定表头属性，通过配置height 和maxHeight 属性来实现重新处理表格width minWidth
2022-06-12 19:04:43 +08:00
parent 787b5b22ff
commit f3d393a9f3
5 changed files with 175 additions and 87 deletions
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@@ -102,8 +102,6 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
            class="layui-table-cell"
            :style="{
              textAlign: column.align,
-              width: column.width ? column.width : '0',
-              minWidth: column.minWidth ? column.minWidth : '47px',
              whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
            }"
          >
@@ -148,8 +146,6 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
              class="layui-table-cell"
              :style="{
                textAlign: column.align,
-                width: column.width ? column.width : '0',
-                minWidth: column.minWidth ? column.minWidth : '47px',
                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
              }"
            >
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@@ -15,6 +15,7 @@ import LayTooltip from "../tooltip/index.vue";
 import { LayIcon } from "@layui/icons-vue";
 import LayPage from "../page/index.vue";
 import TableRow from "./TableRow.vue";
+import number from "async-validator/dist-types/validator/number";

 export interface LayTableProps {
  id?: string;
@@ -28,6 +29,8 @@ export interface LayTableProps {
  selectedKeys?: Recordable[];
  indentSize?: number;
  childrenColumnName: string;
+  height?: number;
+  maxHeight?: string;
 }

 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -37,6 +40,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
  childrenColumnName: "children",
  dataSource: () => [],
  selectedKeys: () => [],
+  maxHeight: "auto",
 });

 const tableId = uuidv4();
@@ -197,8 +201,19 @@ const sortTable = (e: any, key: string, sort: string) => {

 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 offsetWidth: number = tableBody.value?.offsetWidth || 0;
+
+  console.dir(tableBody.value);
+  console.log(scrollWidth < offsetWidth);
+  console.log(scrollWidth, offsetWidth);
+  if (scrollWidth < offsetWidth) {
+    scrollWidthCell.value = offsetWidth - scrollWidth;
+  }
+  console.log(props.columns);
  tableBody.value?.addEventListener("scroll", () => {
    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
  });
@@ -272,6 +287,16 @@ props.dataSource.map((value: any) => {
        <!-- 表头 -->
        <div class="layui-table-header" ref="tableHeader">
          <table class="layui-table" :lay-size="size">
+            <colgroup>
+              <template v-for="column in columns" :key="column">
+                <col
+                  :width="column.width"
+                  :style="{
+                    minWidth: column.minWidth ? column.minWidth : '100px',
+                  }"
+                />
+              </template>
+            </colgroup>
            <thead>
              <tr>
                <th v-if="checkbox" class="layui-table-col-special">
@@ -290,8 +315,6 @@ props.dataSource.map((value: any) => {
                    class="layui-table-cell"
                    :style="{
                      textAlign: column.align,
-                      width: column.width ? column.width : '0',
-                      minWidth: column.minWidth ? column.minWidth : '47px',
                    }"
                  >
                    <span>
@@ -321,13 +344,34 @@ props.dataSource.map((value: any) => {
                    </span>
                  </th>
                </template>
+                <th
+                  v-if="scrollWidthCell > 0"
+                  :style="{
+                    padding: 0,
+                    width: `${scrollWidthCell}px`,
+                  }"
+                ></th>
              </tr>
            </thead>
          </table>
        </div>
        <!-- 表身 -->
-        <div class="layui-table-body layui-table-main" ref="tableBody">
+        <div
+          class="layui-table-body layui-table-main"
+          :style="{ height: height, maxHeight: maxHeight }"
+          ref="tableBody"
+        >
          <table class="layui-table" :lay-size="size">
+            <colgroup>
+              <template v-for="column in columns" :key="column">
+                <col
+                  :width="column.width"
+                  :style="{
+                    minWidth: column.minWidth ? column.minWidth : '100px',
+                  }"
+                />
+              </template>
+            </colgroup>
            <tbody>
              <!-- 渲染 -->
              <template v-for="data in tableDataSource" :key="data">
--- a/package/document/src/document/zh-CN/components/table.md
+++ b/package/document/src/document/zh-CN/components/table.md
@@ -44,6 +44,7 @@ export default {
    ]

    const dataSource1 = [
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
    ]
@@ -416,6 +417,65 @@ export default {

 :::

+::: title 固定表头
+:::
+
+::: demo 设置 `height` 或者 `max-height` 即可实现
+
+<template>
+  <lay-table :columns="columns8" :dataSource="dataSource8" max-height="300px"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns8 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "180px",
+        key:"password"
+      },{
+        title:"年龄",
+        width: "180px",
+        key:"age"
+      },{
+        title:"备注",
+        key:"remark",
+        ellipsisTooltip: true,
+      }
+    ]
+
+    const dataSource8 = [
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+    ]
+
+    return {
+      columns8,
+      dataSource8
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Table 属性
 :::

@@ -432,6 +492,8 @@ export default {
 | size                 | 尺寸                          | `string`  | `md`    | `lg` `md` `sm` |
 | children-column-name | 树节点字段                    | `string` | `children`| --            |
 | indent-size          | 树表行级缩进                   | `number`  | `30`    | -- |
+| height          | 表格高度                   | `number`  | --   | -- |
+| maxHeight          | 表格最大高度                   | `number`  | --   | -- |

 :::

@@ -471,7 +533,7 @@ export default {
 | key             | 数据字段                       | --        | --      | --                      |
 | customSlot      | 自定义插槽                     | --        | --      | --                      |
 | width           | 宽度                           | --        | --      | --                      |
-| minWidth        | 最小宽度                       | --        | --      | --                      |
+| minWidth        | 最小宽度                       | --        | `100px`      | --                      |
 | sort            | 排序                           | --        | --      | --                      |
 | titleSlot       | 标题插槽                       | --        | --      | --                      |
 | align           | 对齐方式                       | `string`  | `left`  | `left` `right` `center` |
--- a/package/document/src/document/zh-CN/components/tooltip.md
+++ b/package/document/src/document/zh-CN/components/tooltip.md
@@ -1,7 +1,7 @@
 ::: anchor
 :::

-::: title 基础使用
+::: title 字体使用
 :::

 ::: demo