zartui 2.0.80-beta.2 → 2.0.81

package/es/index.js

@@ -74,7 +74,7 @@ import Tag from './tag';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.0.80-beta.2';
+var version = '2.0.81';
 
 function install(Vue) {
   var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];

package/es/style/var.less

@@ -1066,11 +1066,16 @@
 @backtop-box-shadow: 0 4px 12px 0 rgba(5,140,230,0.40);
 
 // Table
-@table-border-radius: @border-radius-lg;
 @table-head-height: 40px;
 @table-head-font-size: 14px;
+@table-head-color: @blue;
+@table-head-background: #E6F5FF;
+@table-body-background: #F5FAFF;
 @table-row-height: 40px;
 @table-row-font-size: 14px;
+@table-row-color: #2D4B73;
+@table-row-background: #fff;
+@table-sort-default-color: #c8c9cc;
 
 // Fold-Dialog
 @foldDialog-padding: 0 16px 12px 16px;

package/es/table/index.css

@@ -1 +1 @@
-.zt2-table{position:relative;border-radius:8px;scrollbar-width:none;-ms-overflow-style:none}.zt2-table::-webkit-scrollbar{display:none;width:0;height:0}.zt2-table__normal-box{display:-webkit-box;display:-webkit-flex;display:flex;overflow-x:scroll;position:relative}.zt2-table__fixed-left-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;left:-1px;z-index:2}.zt2-table__fixed-right-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;right:-1px;z-index:2}.zt2-table__fixed-left-box.shadow::after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}.zt2-table__fixed-right-box.shadow::before{content:"";position:absolute;top:0;left:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}.zt2-table__head{-webkit-flex-shrink:0;flex-shrink:0}.zt2-table__head-item{height:40px;font-weight:600;font-size:14px;text-align:center;line-height:40px}.zt2-table__table-data{height:40px;font-size:14px;text-align:center;line-height:40px}.zt2-table.zt2-table--no-border .zt2-table__fixed-head::after,.zt2-table.zt2-table--no-border .zt2-table__head-item::after,.zt2-table.zt2-table--no-border .zt2-table__head::after,.zt2-table.zt2-table--no-border .zt2-table__normal-box::after,.zt2-table.zt2-table--no-border .zt2-table__table-data::after{border:none}
+.zt2-table table{border-collapse:separate;border-spacing:0;width:100%;table-layout:auto;box-sizing:border-box}.zt2-table--fixed{overflow:auto scroll}.zt2-table--fixed::-webkit-scrollbar{width:0;height:0}.zt2-table--fixed table{table-layout:fixed}.zt2-table--thead-fixed{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt2-table--fix-left{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt2-table--bordered{border-left:1px solid #f0f0f0}.zt2-table--bordered>table{border-top:1px solid #f0f0f0}.zt2-table--bordered .zt2-table__thead>tr>th{border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}.zt2-table--bordered .zt2-table__tbody>tr>td{border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0}.zt2-table__thead>tr>th{box-sizing:border-box;overflow-wrap:break-word;height:40px;font-weight:600;font-size:14px;color:#0091fa;text-align:center;line-height:40px;background:#e6f5ff}.zt2-table__head{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.zt2-table__head-sort{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;color:#c8c9cc}.zt2-table__sort-active{color:#0091fa}.zt2-table__tbody>tr>td{box-sizing:border-box;overflow-wrap:break-word;height:40px;font-size:14px;color:#2d4b73;text-align:center;line-height:40px;background:#fff}.zt2-table--striped .zt2-table__tbody>tr:nth-child(even)>td{background:#f5faff}.zt2-table--left-last{border-right:none!important}.zt2-table--left-last::after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}

package/es/table/index.js

@@ -1,14 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createNamespace } from '../utils';
-import { BORDER_LEFT, BORDER_BOTTOM, BORDER_RIGHT, BORDER_SURROUND, BORDER_TOP_BOTTOM } from '../utils/constant';
+import Icon from '../icon/index';
+import { SortOrderEnum } from './type';
 
 var _createNamespace = createNamespace('table'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
-var defaultData = function defaultData() {
-  return {};
-};
-
 export default createComponent({
   props: {
     headList: {
@@ -19,268 +17,198 @@ export default createComponent({
       type: Array,
       default: []
     },
-    outline: {
+    bordered: {
       type: Boolean,
       default: true
     },
-    headColor: {
-      type: String,
-      default: "#000"
-    },
-    headBackground: {
-      type: String,
-      default: "#fafafa"
-    },
-    dataColor: {
-      type: String,
-      default: "#000"
-    },
-    dataBackground: {
-      type: String,
-      default: "#fff"
-    },
-    hideTableHead: {
+    striped: {
       type: Boolean,
       default: false
     }
   },
   data: function data() {
-    return defaultData();
+    return {
+      pingedLeft: false,
+      sortOrder: '',
+      sortKey: ''
+    };
   },
   computed: {
-    fixedColumnLeft: function fixedColumnLeft() {
+    fixedColumn: function fixedColumn() {
       return this.headList.filter(function (v) {
-        return v.fixedLeft;
+        return v.fixed;
       });
     },
-    fixedColumnRight: function fixedColumnRight() {
-      return this.headList.filter(function (v) {
-        return v.fixedRight;
-      });
+    fixed: function fixed() {
+      return this.fixedColumn.length > 0;
     },
-    resortHeadList: function resortHeadList() {
-      // 对表头数组重新排序，需要固定的表头向左对齐
-      return this.fixedColumnLeft.concat(this.headList.filter(function (v) {
-        return !v.fixedLeft && !v.fixedRight;
-      })).concat(this.fixedColumnRight);
-    },
-    hasSummary: function hasSummary() {
-      return this.headList.filter(function (v) {
-        return v.showSummary;
-      }).length > 0;
-    }
-  },
-  mounted: function mounted() {
-    var columnTotalWidth = 0;
-    this.headList.forEach(function (v, i) {
-      var dom = document.getElementById("tableHead" + i);
-
-      if (dom) {
-        columnTotalWidth += dom.clientWidth || 0;
-      }
-    });
-    var box = document.getElementById("normalBoxID");
-    var boxWidth = 0;
-
-    if (box) {
-      boxWidth = box.clientWidth;
-    }
-
-    if (this.fixedColumnLeft && this.fixedColumnLeft.length || this.fixedColumnRight && this.fixedColumnRight.length) {
-      // 当表格横向出现滚动时，给固定列加一个box-shadow
-      var fixedBoxRight = document.getElementById("fixedRightBoxID");
-
-      if (fixedBoxRight && columnTotalWidth > boxWidth) {
-        fixedBoxRight.classList.add("shadow");
-      }
-
-      if (box) {
-        box.addEventListener("scroll", function (e) {
-          var fixedBoxLeft = document.getElementById("fixedLeftBoxID");
-
-          if (fixedBoxLeft) {
-            if (e && e.target && e.target.scrollLeft > 0) {
-              fixedBoxLeft.classList.add("shadow");
-            } else {
-              fixedBoxLeft.classList.remove("shadow");
-            }
-          }
-
-          if (fixedBoxRight) {
-            if (e && e.target && e.target.scrollLeft + e.target.clientWidth >= columnTotalWidth - 1) {
-              fixedBoxRight.classList.remove("shadow");
-            } else {
-              fixedBoxRight.classList.add("shadow");
-            }
-          }
-        });
-      }
-    } // 获取需固定列的实际宽度，用于设置绝对定位元素的宽度
-
-
-    var fixedLeftIndexList = this.headList.map(function (v, i) {
-      if (v.fixedLeft) {
-        return "tableHead" + i;
-      } else {
-        return "";
-      }
-    }).filter(function (v) {
-      return v !== "";
-    });
-
-    if (fixedLeftIndexList.length > 0) {
-      fixedLeftIndexList.forEach(function (current, index) {
-        var fixedDom = document.getElementById("fixedHeadLeft" + index);
-        var normalDom = document.getElementById(current);
-
-        if (fixedDom && normalDom) {
-          fixedDom.style.width = normalDom.offsetWidth + "px";
+    formatColumns: function formatColumns() {
+      var _this = this;
+
+      var columns = [];
+      var left = 0;
+      this.headList.forEach(function (element, index) {
+        var column = {};
+        var preColumn = _this.headList[index - 1];
+        var nextColumn = _this.headList[index + 1];
+
+        if (element.sorter && element.defaultSortOrder) {
+          _this.sortOrder = element.defaultSortOrder || '';
+          _this.sortKey = element.key;
         }
-      }, 0);
-    } // 获取需固定列的实际宽度，用于设置绝对定位元素的宽度
 
-
-    var fixedRightIndexList = this.headList.map(function (v, i) {
-      if (v.fixedRight) {
-        return "tableHead" + i;
-      } else {
-        return "";
-      }
-    }).filter(function (v) {
-      return v !== "";
-    });
-
-    if (fixedRightIndexList.length > 0) {
-      fixedRightIndexList.forEach(function (current, index) {
-        var fixedDom = document.getElementById("fixedHeadRight" + index);
-        var normalDom = document.getElementById(current);
-
-        if (fixedDom && normalDom) {
-          fixedDom.style.width = normalDom.offsetWidth + "px";
+        if (preColumn) {
+          left += Number(preColumn.width.split('px')[0]);
+          column.left = left + "px";
+        } else {
+          column.left = 0;
         }
-      }, 0); // 当存在右侧固定列，且列宽度不足以撑满容器时，将最后一列宽度拉长到填满
-
-      if (columnTotalWidth < boxWidth) {
-        var lastColumn = document.getElementById("tableHead" + (this.headList.length - 1));
 
-        if (lastColumn) {
-          lastColumn.classList.add("widen");
-          lastColumn.style.width = "unset";
-          lastColumn.style.flex = "1";
+        if (element.fixed && !nextColumn.fixed) {
+          column.lastFixLeft = true;
         }
-      }
+
+        columns.push(_extends({}, element, column));
+      });
+      return columns;
     }
   },
-  watch: {},
   methods: {
-    genColumn: function genColumn(headObj, index, isFixed) {
-      var h = this.$createElement;
-
-      var _ref = this,
-          slots = _ref.slots,
-          hideTableHead = _ref.hideTableHead;
-
-      var headItemStyle = {
-        color: this.headColor,
-        background: this.headBackground
-      };
-      var dataStyle = {
-        color: this.dataColor,
-        background: this.dataBackground
-      };
-      var idName = "tableHead" + index;
-
-      if (isFixed === "left") {
-        idName = "fixedHeadLeft" + index;
+    onScroll: function onScroll(_ref) {
+      var currentTarget = _ref.currentTarget,
+          scrollLeft = _ref.scrollLeft;
+      var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
+      this.pingedLeft = mergedScrollLeft > 0;
+    },
+    getNextSortOrder: function getNextSortOrder(type) {
+      if (!type) {
+        return SortOrderEnum.ASCEND;
       }
 
-      if (isFixed === "right") {
-        idName = "fixedHeadRight" + index;
+      if (type === SortOrderEnum.ASCEND) {
+        return SortOrderEnum.DESCEND;
       }
 
-      var headRender = slots("head" + headObj.id) || headObj.label;
+      return '';
+    },
+    onHeaderClick: function onHeaderClick(data) {
+      if (!data.sorter) return;
+      this.sortOrder = this.getNextSortOrder(data.key === this.sortKey ? this.sortOrder : '');
+      this.sortKey = data.key;
+      this.$emit('sort', {
+        order: this.sortOrder,
+        key: data.key
+      });
+    },
+    getHead: function getHead(colData) {
+      var _this2 = this;
+
+      var h = this.$createElement;
 
-      if ((headObj.fixedLeft || headObj.fixedRight) && !isFixed) {
-        // 被固定列遮住的列不显示内容
-        headRender = "";
+      if ((colData == null ? void 0 : colData.colSpan) !== 0) {
+        return h("th", {
+          "class": bem({
+            'fix-left': colData.fixed,
+            'left-last': colData.lastFixLeft && this.pingedLeft
+          }),
+          "style": {
+            left: colData.fixed ? colData.left : ''
+          },
+          "attrs": {
+            "colspan": (colData == null ? void 0 : colData.colSpan) !== 1 ? colData == null ? void 0 : colData.colSpan : null
+          }
+        }, [h("div", {
+          "class": bem('head'),
+          "on": {
+            "click": function click() {
+              return _this2.onHeaderClick(colData);
+            }
+          }
+        }, [h("span", [colData.label]), colData.sorter ? h("span", {
+          "class": bem('head-sort')
+        }, [h(Icon, {
+          "class": [colData.key === this.sortKey && this.sortOrder === SortOrderEnum.ASCEND ? bem('sort-active') : ''],
+          "attrs": {
+            "name": "spinner-shrink",
+            "size": "12"
+          },
+          "style": {
+            marginBottom: '-3px'
+          }
+        }), h(Icon, {
+          "class": [colData.key === this.sortKey && this.sortOrder === SortOrderEnum.DESCEND ? bem('sort-active') : ''],
+          "attrs": {
+            "name": "spinner-expand",
+            "size": "12"
+          },
+          "style": {
+            marginTop: '-3px'
+          }
+        })]) : ''])]);
       }
+    },
+    onClick: function onClick() {},
+    getBody: function getBody(rowData, rowIndex) {
+      var _this3 = this;
+
+      var h = this.$createElement;
+      return h("tr", [this.formatColumns.map(function (colData) {
+        var _additionalCellProps, _additionalCellProps2, _additionalCellProps3, _additionalCellProps4, _additionalCellProps5, _additionalCellProps6;
 
-      return h("div", {
-        "class": [bem(isFixed ? "fixed-head" : "head"), isFixed ? BORDER_SURROUND : BORDER_RIGHT],
-        "attrs": {
-          "id": idName
-        },
-        "style": isFixed ? "" : headObj.width ? "width:" + headObj.width + ";" : ""
-      }, [h("div", {
-        "directives": [{
-          name: "show",
-          value: !hideTableHead
-        }],
-        "class": [bem("head-item"), BORDER_TOP_BOTTOM],
-        "style": headItemStyle
-      }, [headRender]), this.dataList.map(function (data) {
-        var hide = (headObj.fixedLeft || headObj.fixedRight) && !isFixed;
+        var additionalCellProps;
 
-        if (hide) {
-          // 被固定列遮住的列不显示内容
-          return h("div", {
-            "class": [bem("table-data"), BORDER_BOTTOM],
-            "style": dataStyle
-          });
-        } else if (data[headObj.key] && data[headObj.key].id && slots("data" + data[headObj.key].id)) {
-          return slots("data" + data[headObj.key].id);
-        } else {
-          return h("div", {
-            "class": [bem("table-data"), BORDER_BOTTOM],
-            "style": dataStyle
-          }, [data[headObj.key]]);
+        if (colData.customCell) {
+          additionalCellProps = colData.customCell(rowData, rowIndex);
         }
-      }), this.hasSummary ? headObj.showSummary ? h("div", {
-        "class": [bem("head-item"), BORDER_BOTTOM],
-        "style": headItemStyle
-      }, [this.dataList.reduce(function (prev, curr) {
-        return prev + curr[headObj.key];
-      }, 0)]) : h("div", {
-        "class": [bem("head-item"), BORDER_BOTTOM],
-        "style": headItemStyle
-      }, [headObj.summaryLabel || ""]) : ""]);
+
+        var style = _extends({}, colData.style);
+
+        style.left = colData.fixed ? colData.left : '';
+        return ((_additionalCellProps = additionalCellProps) == null ? void 0 : _additionalCellProps.rowSpan) !== 0 && ((_additionalCellProps2 = additionalCellProps) == null ? void 0 : _additionalCellProps2.colSpan) !== 0 && h("td", {
+          "on": {
+            "click": function click() {
+              return colData.onClick && colData.onClick(rowData, rowIndex);
+            }
+          },
+          "class": bem({
+            'fix-left': colData.fixed,
+            'left-last': colData.lastFixLeft && _this3.pingedLeft
+          }),
+          "attrs": {
+            "colspan": ((_additionalCellProps3 = additionalCellProps) == null ? void 0 : _additionalCellProps3.colSpan) !== 1 ? (_additionalCellProps4 = additionalCellProps) == null ? void 0 : _additionalCellProps4.colSpan : null,
+            "rowspan": ((_additionalCellProps5 = additionalCellProps) == null ? void 0 : _additionalCellProps5.rowSpan) !== 1 ? (_additionalCellProps6 = additionalCellProps) == null ? void 0 : _additionalCellProps6.rowSpan : null
+          },
+          "style": style
+        }, [rowData[colData.key]]);
+      })]);
     }
   },
   render: function render(h) {
-    var _this = this;
+    var _this4 = this;
 
-    var showFixed = this.dataList && this.dataList.length;
     return h("div", {
-      "class": bem(["", this.outline ? "" : "no-border"])
-    }, [h("div", {
-      "attrs": {
-        "id": "normalBoxID"
-      },
-      "class": [bem("normal-box"), BORDER_LEFT]
-    }, [this.resortHeadList.map(function (x, i) {
-      return _this.genColumn(x, i);
-    })]), h("div", {
-      "directives": [{
-        name: "show",
-        value: showFixed
-      }],
-      "attrs": {
-        "id": "fixedLeftBoxID"
-      },
-      "class": bem("fixed-left-box")
-    }, [this.fixedColumnLeft.map(function (x, i) {
-      return _this.genColumn(x, i, "left");
-    })]), h("div", {
-      "directives": [{
-        name: "show",
-        value: showFixed
-      }],
-      "attrs": {
-        "id": "fixedRightBoxID"
-      },
-      "class": bem("fixed-right-box")
-    }, [this.fixedColumnRight.map(function (x, i) {
-      return _this.genColumn(x, i, "right");
-    })])]);
+      "class": bem({
+        fixed: this.fixed,
+        bordered: this.bordered,
+        striped: this.striped
+      }),
+      "on": {
+        "scroll": this.onScroll
+      }
+    }, [h("table", [h("colgroup", [this.headList.map(function (item) {
+      return h("col", {
+        "style": {
+          width: item.width
+        }
+      });
+    })]), h("thead", {
+      "class": bem('thead')
+    }, [h("tr", [this.formatColumns.map(function (colData) {
+      return _this4.getHead(colData);
+    })])]), h("tbody", {
+      "class": bem('tbody')
+    }, [this.dataList.map(function (rowData, rowIndex) {
+      return _this4.getBody(rowData, rowIndex);
+    })])])]);
   }
 });

package/es/table/index.less

@@ -1,73 +1,134 @@
 @import '../style/var';
+
 .@{base-prefix}-table {
-  position: relative;
-  border-radius: @table-border-radius;
-  scrollbar-width: none; /* firefox */
-  -ms-overflow-style: none; /* IE 10+ */
-  &::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
+  table {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    table-layout: auto;
+    box-sizing: border-box;
   }
-  &__normal-box {
-    display: flex;
-    overflow-x: scroll;
-    position: relative;
+
+  &--fixed {
+    overflow: auto scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    table {
+      table-layout: fixed;
+    }
 
   }
-  &__fixed-left-box {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: -1px;
+
+  &--thead-fixed {
+    position: sticky !important;
     z-index: 2;
   }
-  &__fixed-right-box {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: -1px;
+
+  &--fix-left {
+    position: sticky !important;
     z-index: 2;
   }
-  &__fixed-left-box.shadow::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: -10px;
-    width: 10px;
-    height: 100%;
-    opacity: 0.06;
-    background-image: linear-gradient(90deg, #000000 0%, rgba(0,0,0,0.00) 100%);
+
+  &--bordered {
+    border-left: 1px solid #f0f0f0;
+
+    >table {
+      border-top: 1px solid #f0f0f0;
+    }
+
+    .@{base-prefix}-table__thead {
+      >tr {
+        >th {
+          border-right: 1px solid #f0f0f0;
+          border-bottom: 1px solid #f0f0f0;
+        }
+      }
+    }
+
+    .@{base-prefix}-table__tbody {
+      >tr {
+        >td {
+          border-bottom: 1px solid #f0f0f0;
+          border-right: 1px solid #f0f0f0;
+        }
+      }
+    }
   }
-  &__fixed-right-box.shadow::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -10px;
-    width: 10px;
-    height: 100%;
-    opacity: 0.06;
-    background-image: linear-gradient(90deg, #000000 0%, rgba(0,0,0,0.00) 100%);
+
+  &__thead {
+    >tr {
+      >th {
+        box-sizing: border-box;
+        overflow-wrap: break-word;
+        height: @table-head-height;
+        font-weight: 600;
+        font-size: @table-head-font-size;
+        color: @table-head-color;
+        text-align: center;
+        line-height: @table-head-height;
+        background: @table-head-background;
+      }
+    }
   }
+
   &__head {
-    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__head-sort {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: @table-sort-default-color;
   }
-  &__head-item {
-    height: @table-head-height;
-    font-weight: 600;
-    font-size: @table-head-font-size;
-    text-align: center;
-    line-height: @table-head-height;
+
+  &__sort-active {
+    color: @blue;
+  }
+
+  &__tbody {
+    >tr {
+      >td {
+        box-sizing: border-box;
+        overflow-wrap: break-word;
+        height: @table-row-height;
+        font-size: @table-row-font-size;
+        color: @table-row-color;
+        text-align: center;
+        line-height: @table-row-height;
+        background: @table-row-background;
+      }
+    }
   }
-  &__table-data {
-    height: @table-row-height;
-    font-size: @table-row-font-size;
-    text-align: center;
-    line-height: @table-row-height;
+
+  &--striped {
+    .@{base-prefix}-table__tbody {
+      >tr:nth-child(even) {
+        >td {
+          background: @table-body-background;
+        }
+      }
+    }
   }
-  &.@{base-prefix}-table--no-border {
-    .@{base-prefix}-table__normal-box::after, .@{base-prefix}-table__fixed-head::after, .@{base-prefix}-table__head::after, .@{base-prefix}-table__head-item::after, .@{base-prefix}-table__table-data::after {
-        border: none;
+
+  &--left-last {
+    border-right: none !important;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: -10px;
+      width: 10px;
+      height: 100%;
+      opacity: 0.06;
+      background-image: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
     }
   }
 }