✨(component): 实现 table 行列固定, 待完善

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

@@ -158,7 +158,7 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
               },
               renderCellStyle(data, column, index, columnIndex),
             ]"
-            :class="[renderCellClassName(data, column, index, columnIndex)]"
+            :class="[renderCellClassName(data, column, index, columnIndex),column.fixed ? `layui-table-fixed-${column.fixed}` : '']"
           >
             <!-- 树表占位与缩进 -->
             <span
@@ -208,7 +208,7 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                 },
                 renderCellStyle(data, column, index, columnIndex),
               ]"
-              :class="[renderCellClassName(data, column, index, columnIndex)]"
+             :class="[renderCellClassName(data, column, index, columnIndex),column.fixed ? `layui-table-fixed-${column.fixed}` : '']"
             >
               <!-- 树表占位与缩进 -->
               <span

package/component/src/component/table/index.less

@@ -419,20 +419,28 @@
   overflow: hidden;
 }
 
-.layui-table-fixed-l {
+.layui-table-fixed-left {
+  left: 0;
+  z-index: 2;
+  display: block;
+  position: sticky!important;
   box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
 }
 
-.layui-table-fixed-r {
+.layui-table-fixed-right {
-  left: auto;
+  right: 0;
-  right: -1px;
+  z-index: 2;
-  border-width: 0 0 0 1px;
+  display: block;
+  position: sticky!important;
   box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
 }
 
-.layui-table-fixed-r .layui-table-header {
+.layui-table-header .layui-table-cell {
-  position: relative;
+  background: #FAFAFA;
-  overflow: visible;
+}
+
+.layui-table-body .layui-table-cell {
+  background: white;
 }
 
 .layui-table-mend {

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

@@ -327,6 +327,7 @@ props.dataSource.map((value: any) => {
                   <th
                     v-if="tableColumnKeys.includes(column.key)"
                     class="layui-table-cell"
+                    :class="[column.fixed ? `layui-table-fixed-${column.fixed}` : '']"
                     :style="{
                       textAlign: column.align,
                     }"

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

@@ -606,7 +606,6 @@ export default {
 <template>
   <lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table>
   <lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table>
-  <lay-table :columns="columns1" :dataSource="dataSource1" skin="nob" even></lay-table>
 </template>
 
 <script>
@@ -632,7 +631,7 @@ export default {
         title:"备注",
         width: "180px",
         key:"remark",
-        ellipsisTooltip: true,
+        ellipsisTooltip: true
       }
     ]
 
@@ -654,6 +653,66 @@ export default {
 
 :::
 
+::: title 固定行列
+:::
+
+::: demo 通过 `skin` 属性, 切换 table 风格。
+
+<template>
+  <lay-table :columns="columns20" :dataSource="dataSource20"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns20 = [
+      {
+        fixed:"left",
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        width: "300px",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        fixed:"right",
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource20 = [
+      {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    return {
+      columns20,
+      dataSource20,
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Table 属性
 :::