✨(component): table 多列固定

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

@@ -122,6 +122,24 @@ const renderRowClassName = (data: any, index: number) => {
 };
 
 const childrenIndentSize = props.currentIndentSize + props.indentSize;
+
+const renderFixedStyle = (column: any, columnIndex: number) => {
+  if(column.fixed) {
+    if(column.fixed == 'left') {
+      var left = 0;
+      for(var i = 0;i< columnIndex;i ++) {
+        left = left + props.columns[i]?.width.replace("px","");
+      }
+      return `left:${left}px`;
+    } else {
+      var right = 0;
+      for(var i = columnIndex + 1;i< props.columns.length;i ++) {
+        right = right +  props.columns[i]?.width.replace("px","");
+      }
+      return `right:${right}px`;
+    }
+  }
+}
 </script>
 
 <template>
@@ -156,6 +174,7 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                 textAlign: column.align,
                 whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
               },
+              renderFixedStyle(column,columnIndex),
               renderCellStyle(data, column, index, columnIndex),
             ]"
             :class="[
@@ -209,6 +228,7 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                   textAlign: column.align,
                   whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
                 },
+                renderFixedStyle(column,columnIndex),
                 renderCellStyle(data, column, index, columnIndex),
               ]"
               :class="[

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

@@ -403,7 +403,6 @@
 .layui-table-fixed-left {
   left: 0;
   z-index: 2;
-  display: block;
   background: white;
   position: sticky!important;
 }
@@ -411,13 +410,21 @@
 .layui-table-fixed-right {
   right: 0;
   z-index: 2;
-  display: block;
   background: white;
   position: sticky!important;
   border-left: 1px solid #eee!important;
   border-right: none!important;
 }
 
+.layui-table-fixed-left,
+.layui-table-fixed-right {
+  outline-width: 1px;
+  outline-style: solid;
+  outline-color: #eee;
+  border: none!important;
+}
+
+
 .layui-table-view .layui-table tr th:last-child,
 .layui-table-view .layui-table tr td:last-child {
   border-right: none!important;

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

@@ -249,6 +249,24 @@ props.dataSource.map((value: any) => {
     childrenExpandSpace.value = true;
   }
 });
+
+const renderFixedStyle = (column: any, columnIndex: number) => {
+  if(column.fixed) {
+    if(column.fixed == 'left') {
+      var left = 0;
+      for(var i = 0;i< columnIndex;i ++) {
+        left = left +  props.columns[i]?.width.replace("px","");
+      }
+      return `left:${left}px`;
+    } else {
+      var right = 0;
+      for(var i = columnIndex + 1;i< props.columns.length;i ++) {
+        right = right +  props.columns[i]?.width.replace("px","");
+      }
+      return `right:${right}px`;
+    }
+  }
+}
 </script>
 
 <template>
@@ -326,16 +344,16 @@ props.dataSource.map((value: any) => {
                     />
                   </div>
                 </th>
-                <template v-for="column in columns" :key="column">
+                <template v-for="(column, columnIndex) in columns" :key="column">
                   <th
                     v-if="tableColumnKeys.includes(column.key)"
                     class="layui-table-cell"
                     :class="[
                       column.fixed ? `layui-table-fixed-${column.fixed}` : '',
                     ]"
-                    :style="{
+                    :style="[{
                       textAlign: column.align,
-                    }"
+                    },renderFixedStyle(column,columnIndex)]"
                   >
                     <span>
                       <template v-if="column.titleSlot">

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

@@ -678,6 +678,7 @@ export default {
         width:"200px",
         key:"username"
       },{
+        fixed:"left",
         title:"密码",
         width: "300px",
         key:"password"