✨(component): update

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

@@ -128,18 +128,44 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
     if (column.fixed == "left") {
       var left = 0;
       for (var i = 0; i < columnIndex; i++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "left") {
           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++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "right") {
           right = right + props.columns[i]?.width.replace("px", "");
         }
+      }
       return `right:${right}px`;
     }
   }
 };
+
+const renderFixedClassName = (column: any, columnIndex: number) => {
+  if (column.fixed) {
+    if (column.fixed == "left") {
+      var left = true;
+      for (var i = columnIndex + 1; i < props.columns.length; i++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "left") {
+          left = false;
+        }
+      }
+      return `layui-table-fixed-left-last`;
+    } else {
+      var right = true;
+      for (var i = 0; i < columnIndex; i++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "right") {
+          right = false;
+        }
+      }
+      return `layui-table-fixed-right-first`;
+    }
+  }
+}
 </script>
 
 <template>
@@ -232,6 +258,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
                 renderCellStyle(data, column, index, columnIndex),
               ]"
               :class="[
+                renderFixedClassName(column, columnIndex), 
                 renderCellClassName(data, column, index, columnIndex),
                 column.fixed ? `layui-table-fixed-${column.fixed}` : '',
               ]"

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

@@ -106,7 +106,6 @@
 .layui-table-box {
   position: relative;
   overflow: hidden;
-
 }
 
 .layui-table-view .layui-table {
@@ -397,7 +396,7 @@
 }
 
 .layui-table-header .layui-table-cell {
-  background-color: #FAFAFA;
+  background-color: #fafafa;
 }
 
 .layui-table-fixed-left {
@@ -424,6 +423,33 @@
   border: none !important;
 }
 
+.layui-table-fixed-left-last::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: -1px;
+  width: 30px;
+  transform: translate(100%);
+  transition: box-shadow 0.3s;
+}
+
+.layui-table-fixed-left-last::after {
+  box-shadow: inset 10px 0 8px -8px #00000026;
+}
+
+.layui-table-fixed-right-first::after {
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  left: 0;
+  width: 30px;
+  transform: translate(-100%);
+  transition: box-shadow 0.3s;
+}
+
+.layui-table-fixed-right-first::after {
+  box-shadow: inset -10px 0 8px -8px #00000026;
+}
 
 .layui-table-view .layui-table tr th:last-child,
 .layui-table-view .layui-table tr td:last-child {

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

@@ -255,18 +255,44 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
     if (column.fixed == "left") {
       var left = 0;
       for (var i = 0; i < columnIndex; i++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "left") {
           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++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "right") {
           right = right + props.columns[i]?.width.replace("px", "");
         }
+      }
       return `right:${right}px`;
     }
   }
 };
+
+const renderFixedClassName = (column: any, columnIndex: number) => {
+  if (column.fixed) {
+    if (column.fixed == "left") {
+      var left = true;
+      for (var i = columnIndex + 1; i < props.columns.length; i++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "left") {
+          left = false;
+        }
+      }
+      return left ? `layui-table-fixed-left-last` : '';
+    } else {
+      var right = true;
+      for (var i = 0; i < columnIndex; i++) {
+        if(props.columns[i].fixed && props.columns[i].fixed == "right") {
+          right = false;
+        }
+      }
+      return right ? `layui-table-fixed-right-first` : '';
+    }
+  }
+}
 </script>
 
 <template>
@@ -353,6 +379,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
                     class="layui-table-cell"
                     :class="[
                       column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+                      renderFixedClassName(column, columnIndex)
                     ]"
                     :style="[
                       {