✨(component): 优化 table 组件 columns 无对应数据时仍保持列占位

package/component/src/component/table/TableRow.vue

@@ -265,215 +265,233 @@ const isAutoShow = (
   >
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <template v-if="tableColumnKeys.includes(column.key)">
-        <template v-if="column.type == 'radio'">
+        <template v-if="column.type">
-          <td
+          <template v-if="column.type == 'radio'">
-            class="layui-table-cell layui-table-cell-radio"
+            <td
-            v-if="isAutoShow(data, column, index, columnIndex)"
+              class="layui-table-cell layui-table-cell-radio"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
+              v-if="isAutoShow(data, column, index, columnIndex)"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
+              :colspan="
-            :style="[
+                spanMethodAttr(data, column, index, columnIndex).colspan
-              {
-                textAlign: column.align,
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              },
-              renderFixedStyle(column, columnIndex),
-              renderCellStyle(data, column, index, columnIndex),
-            ]"
-            :class="[
-              renderFixedClassName(column, columnIndex),
-              renderCellClassName(data, column, index, columnIndex),
-              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-            ]"
-          >
-            <span
-              v-if="expandSpace && columnIndex === expandIndex"
-              :style="{ 'margin-right': currentIndentSize + 'px' }"
-            ></span>
-
-            <span
-              v-if="
-                expandSpace &&
-                !data[childrenColumnName] &&
-                !slot.expand &&
-                columnIndex === expandIndex
               "
-              class="layui-table-cell-expand-icon-spaced"
+              :rowspan="
-            ></span>
+                spanMethodAttr(data, column, index, columnIndex).rowspan
-
-            <lay-icon
-              v-if="
-                (slot.expand || data[childrenColumnName]) &&
-                columnIndex === expandIndex
               "
-              class="layui-table-cell-expand-icon"
+              :style="[
-              :type="expandIconType"
+                {
-              @click="handleExpand"
+                  textAlign: column.align,
-            ></lay-icon>
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-
+                },
-            <lay-radio v-model="tableSelectedKey" :value="data[id]" />
+                renderFixedStyle(column, columnIndex),
-          </td>
+                renderCellStyle(data, column, index, columnIndex),
-        </template>
+              ]"
-
+              :class="[
-        <template v-if="column.type == 'checkbox'">
+                renderFixedClassName(column, columnIndex),
-          <td
+                renderCellClassName(data, column, index, columnIndex),
-            class="layui-table-cell layui-table-cell-checkbox"
+                column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-            v-if="isAutoShow(data, column, index, columnIndex)"
+              ]"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
-            :style="[
-              {
-                textAlign: column.align,
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              },
-              renderFixedStyle(column, columnIndex),
-              renderCellStyle(data, column, index, columnIndex),
-            ]"
-            :class="[
-              renderFixedClassName(column, columnIndex),
-              renderCellClassName(data, column, index, columnIndex),
-              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-            ]"
-          >
-            <span
-              v-if="expandSpace && columnIndex === expandIndex"
-              :style="{ 'margin-right': currentIndentSize + 'px' }"
-            ></span>
-
-            <span
-              v-if="
-                expandSpace &&
-                !data[childrenColumnName] &&
-                !slot.expand &&
-                columnIndex === expandIndex
-              "
-              class="layui-table-cell-expand-icon-spaced"
-            ></span>
-
-            <lay-icon
-              v-if="
-                (slot.expand || data[childrenColumnName]) &&
-                columnIndex === expandIndex
-              "
-              class="layui-table-cell-expand-icon"
-              :type="expandIconType"
-              @click="handleExpand"
-            ></lay-icon>
-
-            <lay-checkbox
-              v-model="tableSelectedKeys"
-              :value="data[id]"
-              skin="primary"
-            />
-          </td>
-        </template>
-
-        <template v-if="column.type == 'number'">
-          <td
-            class="layui-table-cell layui-table-cell-number"
-            v-if="isAutoShow(data, column, index, columnIndex)"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
-            :style="[
-              {
-                textAlign: column.align,
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              },
-              renderFixedStyle(column, columnIndex),
-              renderCellStyle(data, column, index, columnIndex),
-            ]"
-            :class="[
-              renderFixedClassName(column, columnIndex),
-              renderCellClassName(data, column, index, columnIndex),
-              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-            ]"
-          >
-            <span
-              v-if="expandSpace && columnIndex === expandIndex"
-              :style="{ 'margin-right': currentIndentSize + 'px' }"
-            ></span>
-
-            <span
-              v-if="
-                expandSpace &&
-                !data[childrenColumnName] &&
-                !slot.expand &&
-                columnIndex === expandIndex
-              "
-              class="layui-table-cell-expand-icon-spaced"
-            ></span>
-
-            <lay-icon
-              v-if="
-                (slot.expand || data[childrenColumnName]) &&
-                columnIndex === expandIndex
-              "
-              class="layui-table-cell-expand-icon"
-              :type="expandIconType"
-              @click="handleExpand"
-            ></lay-icon>
-
-            {{ index + 1 }}
-          </td>
-        </template>
-
-        <template v-if="column.customSlot">
-          <td
-            class="layui-table-cell"
-            v-if="isAutoShow(data, column, index, columnIndex)"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
-            :style="[
-              {
-                textAlign: column.align,
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              },
-              renderFixedStyle(column, columnIndex),
-              renderCellStyle(data, column, index, columnIndex),
-            ]"
-            :class="[
-              renderFixedClassName(column, columnIndex),
-              renderCellClassName(data, column, index, columnIndex),
-              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-            ]"
-          >
-            <span
-              v-if="expandSpace && columnIndex === expandIndex"
-              :style="{ 'margin-right': currentIndentSize + 'px' }"
-            ></span>
-
-            <span
-              v-if="
-                expandSpace &&
-                !data[childrenColumnName] &&
-                !slot.expand &&
-                columnIndex === expandIndex
-              "
-              class="layui-table-cell-expand-icon-spaced"
-            ></span>
-
-            <lay-icon
-              v-if="
-                (slot.expand || data[childrenColumnName]) &&
-                columnIndex === expandIndex
-              "
-              class="layui-table-cell-expand-icon"
-              :type="expandIconType"
-              @click="handleExpand"
-            ></lay-icon>
-
-            <lay-tooltip
-              v-if="column.ellipsisTooltip"
-              :content="data[column.key]"
-              :isAutoShow="true"
             >
-              <slot :name="column.customSlot" :data="data"></slot>
+              <span
-            </lay-tooltip>
+                v-if="expandSpace && columnIndex === expandIndex"
-            <slot v-else :name="column.customSlot" :data="data"></slot>
+                :style="{ 'margin-right': currentIndentSize + 'px' }"
-          </td>
+              ></span>
+
+              <span
+                v-if="
+                  expandSpace &&
+                  !data[childrenColumnName] &&
+                  !slot.expand &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon-spaced"
+              ></span>
+
+              <lay-icon
+                v-if="
+                  (slot.expand || data[childrenColumnName]) &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon"
+                :type="expandIconType"
+                @click="handleExpand"
+              ></lay-icon>
+
+              <lay-radio v-model="tableSelectedKey" :value="data[id]" />
+            </td>
+          </template>
+
+          <template v-if="column.type == 'checkbox'">
+            <td
+              class="layui-table-cell layui-table-cell-checkbox"
+              v-if="isAutoShow(data, column, index, columnIndex)"
+              :colspan="
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
+              :style="[
+                {
+                  textAlign: column.align,
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                },
+                renderFixedStyle(column, columnIndex),
+                renderCellStyle(data, column, index, columnIndex),
+              ]"
+              :class="[
+                renderFixedClassName(column, columnIndex),
+                renderCellClassName(data, column, index, columnIndex),
+                column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+              ]"
+            >
+              <span
+                v-if="expandSpace && columnIndex === expandIndex"
+                :style="{ 'margin-right': currentIndentSize + 'px' }"
+              ></span>
+
+              <span
+                v-if="
+                  expandSpace &&
+                  !data[childrenColumnName] &&
+                  !slot.expand &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon-spaced"
+              ></span>
+
+              <lay-icon
+                v-if="
+                  (slot.expand || data[childrenColumnName]) &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon"
+                :type="expandIconType"
+                @click="handleExpand"
+              ></lay-icon>
+
+              <lay-checkbox
+                v-model="tableSelectedKeys"
+                :value="data[id]"
+                skin="primary"
+              />
+            </td>
+          </template>
+
+          <template v-if="column.type == 'number'">
+            <td
+              class="layui-table-cell layui-table-cell-number"
+              v-if="isAutoShow(data, column, index, columnIndex)"
+              :colspan="
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
+              :style="[
+                {
+                  textAlign: column.align,
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                },
+                renderFixedStyle(column, columnIndex),
+                renderCellStyle(data, column, index, columnIndex),
+              ]"
+              :class="[
+                renderFixedClassName(column, columnIndex),
+                renderCellClassName(data, column, index, columnIndex),
+                column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+              ]"
+            >
+              <span
+                v-if="expandSpace && columnIndex === expandIndex"
+                :style="{ 'margin-right': currentIndentSize + 'px' }"
+              ></span>
+
+              <span
+                v-if="
+                  expandSpace &&
+                  !data[childrenColumnName] &&
+                  !slot.expand &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon-spaced"
+              ></span>
+
+              <lay-icon
+                v-if="
+                  (slot.expand || data[childrenColumnName]) &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon"
+                :type="expandIconType"
+                @click="handleExpand"
+              ></lay-icon>
+
+              {{ index + 1 }}
+            </td>
+          </template>
         </template>
 
         <template v-else>
-          <template v-if="column.key in data">
+          <template v-if="column.customSlot">
+            <td
+              class="layui-table-cell"
+              v-if="isAutoShow(data, column, index, columnIndex)"
+              :colspan="
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
+              :style="[
+                {
+                  textAlign: column.align,
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                },
+                renderFixedStyle(column, columnIndex),
+                renderCellStyle(data, column, index, columnIndex),
+              ]"
+              :class="[
+                renderFixedClassName(column, columnIndex),
+                renderCellClassName(data, column, index, columnIndex),
+                column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+              ]"
+            >
+              <span
+                v-if="expandSpace && columnIndex === expandIndex"
+                :style="{ 'margin-right': currentIndentSize + 'px' }"
+              ></span>
+
+              <span
+                v-if="
+                  expandSpace &&
+                  !data[childrenColumnName] &&
+                  !slot.expand &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon-spaced"
+              ></span>
+
+              <lay-icon
+                v-if="
+                  (slot.expand || data[childrenColumnName]) &&
+                  columnIndex === expandIndex
+                "
+                class="layui-table-cell-expand-icon"
+                :type="expandIconType"
+                @click="handleExpand"
+              ></lay-icon>
+
+              <lay-tooltip
+                v-if="column.ellipsisTooltip"
+                :content="data[column.key]"
+                :isAutoShow="true"
+              >
+                <slot :name="column.customSlot" :data="data"></slot>
+              </lay-tooltip>
+              <slot v-else :name="column.customSlot" :data="data"></slot>
+            </td>
+          </template>
+
+          <template v-else>
             <td
               class="layui-table-cell"
               v-if="isAutoShow(data, column, index, columnIndex)"

package/component/src/component/treeSelect/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

package/component/src/component/treeSelect/index.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+export default {
+    name: "treeSelect"
+}
+</script>
+
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    
+</template>

package/component/src/index.ts

@@ -61,6 +61,7 @@ import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
 import LayTab from "./component/tab/index";
 import LayTabItem from "./component/tabItem/index";
 import LayTree from "./component/tree/index";
+import LayTreeSelect from "./component/treeSelect/index";
 import LayTable from "./component/table/index";
 import LayPage from "./component/page/index";
 import LayTransfer from "./component/transfer/index";
@@ -148,6 +149,7 @@ const components: Record<string, Plugin> = {
   LayTabItem,
   LayIconPicker,
   LayTree,
+  LayTreeSelect,
   LayTable,
   LayPage,
   LayTransfer,
@@ -243,6 +245,7 @@ export {
   LayTabItem,
   LayIconPicker,
   LayTree,
+  LayTreeSelect,
   LayTable,
   LayPage,
   LayTransfer,

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

@@ -1163,6 +1163,65 @@ export default {
 
 :::
 
+::: title 复杂表头
+:::
+
+::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
+
+<template>
+  <lay-table :columns="columns27" :data-source="dataSource27"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns27 = [
+      {
+        title:"名称",
+        width:"200px",
+        key:"username"
+      },{
+        title:"地址",
+        children: [
+          { title: "省", key: "province", width: "300px", },
+          { title: "市", key: "city", width: "300px", },
+        ]
+      },{
+        title:"性别",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource27 = [
+      {id:"1",username:"root",province:"山东",city:"济南", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"2",username:"root",province:"山东",city:"济南", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"3",username:"woow",province:"山东",city:"济南", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"4",username:"woow",province:"山东",city:"济南", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"5",username:"woow",province:"山东",city:"济南", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    return {
+      columns27,
+      dataSource27,
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 完整表格
 :::
 
@@ -1237,12 +1296,12 @@ export default {
     ]
 
     const dataSource5 = [
-      {id:"1", name:"小明",birthday: '2022-02-09', hide: "你看不见我", age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {id:"1", name:"小明", age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
-      {id:"2", name:"小红",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {id:"2", name:"小红", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
-      {id:"3", name:"小刚",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {id:"3", name:"小刚", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
-      {id:"4", name:"小李",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {id:"4", name:"小李", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
-      {id:"5", name:"小柏",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
+      {id:"5", name:"小柏", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
-      {id:"6", name:"小吉",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
+      {id:"6", name:"小吉", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
     ]
 
     const rowClick5 = function(data) {

package/document-component/src/view/component.vue

@@ -85,4 +85,4 @@ export default {
     };
   },
 };
-</script>
+</script>

package/document-component/src/view/resource.vue

@@ -4,8 +4,7 @@
       class="layui-quote layui-text"
       style="margin: 30px 0; letter-spacing: 1px"
     >
-      以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程,
+      以创造性的行为实践于人世。若能以写作为工具，为道途，先帮助自己一程，再以领悟帮助他人一程。这是一种服务 - 庆山
-      这是一种服务 - 庆山
     </blockquote>
     <fieldset class="layui-field layui-field-title">
       <legend style="margin-bottom: 20px; text-align: center">独立组件</legend>