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

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

@@ -265,12 +265,17 @@ const isAutoShow = (
   >
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <template v-if="tableColumnKeys.includes(column.key)">
+        <template v-if="column.type">
           <template v-if="column.type == 'radio'">
             <td
               class="layui-table-cell layui-table-cell-radio"
               v-if="isAutoShow(data, column, index, columnIndex)"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
+              :colspan="
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
               :style="[
                 {
                   textAlign: column.align,
@@ -318,8 +323,12 @@ const isAutoShow = (
             <td
               class="layui-table-cell layui-table-cell-checkbox"
               v-if="isAutoShow(data, column, index, columnIndex)"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
+              :colspan="
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
               :style="[
                 {
                   textAlign: column.align,
@@ -371,8 +380,12 @@ const isAutoShow = (
             <td
               class="layui-table-cell layui-table-cell-number"
               v-if="isAutoShow(data, column, index, columnIndex)"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
+              :colspan="
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
               :style="[
                 {
                   textAlign: column.align,
@@ -415,13 +428,19 @@ const isAutoShow = (
               {{ index + 1 }}
             </td>
           </template>
+        </template>
 
+        <template v-else>
           <template v-if="column.customSlot">
             <td
               class="layui-table-cell"
               v-if="isAutoShow(data, column, index, columnIndex)"
-            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
+              :colspan="
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
               :style="[
                 {
                   textAlign: column.align,
@@ -473,7 +492,6 @@ const isAutoShow = (
           </template>
 
           <template v-else>
-          <template v-if="column.key in data">
             <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/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>