zartui 2.0.30 → 2.0.32

package/es/cell/index.less

@@ -124,8 +124,8 @@
 
 .zt-cell__direction-column {
   flex-direction: column;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: @cell-font-size;
+  line-height: @cell-line-height;
   .zt-cell__title {
     margin-bottom: 8px;
     display: flex;

package/es/dialog/index.css

@@ -1 +1 @@
-.zt-dialog{position:fixed;top:45%;left:50%;width:350px;overflow:hidden;font-size:16px;background-color:#fff;border-radius:12px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.3s;transition:.3s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}.zt-dialog__header{padding-top:24px;font-weight:700;line-height:24px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all;padding-left:16px;padding-right:16px}.zt-dialog__header--isolated{padding:24px 0}.zt-dialog__header--custom-title{height:44px;padding-left:0;padding-right:0;padding-top:0}.zt-dialog__content{text-align:center;word-break:break-all;font-size:0}.zt-dialog__message{max-height:60vh;padding:24px 16px;overflow-y:auto;font-size:16px;line-height:20px;color:rgba(45,75,115,.6);display:inline-block;text-align:left;white-space:pre-wrap;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:8px;font-size:14px}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__footer{overflow:hidden;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px;padding:0 32px 24px;position:relative;box-sizing:content-box}.zt-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}.zt-dialog__cancel{background:#fff}.zt-dialog__confirm--with-cancel.zt-dialog__confirm.zt-button{margin-left:8px}
+.zt-dialog{position:fixed;top:45%;left:50%;width:350px;max-width:90%;overflow:hidden;font-size:16px;background-color:#fff;border-radius:12px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.3s;transition:.3s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}.zt-dialog__header{padding-top:24px;font-weight:700;line-height:24px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all;padding-left:16px;padding-right:16px}.zt-dialog__header--isolated{padding:24px 0}.zt-dialog__header--custom-title{height:44px;padding-left:0;padding-right:0;padding-top:0}.zt-dialog__content{text-align:center;word-break:break-all;font-size:0}.zt-dialog__message{max-height:60vh;padding:24px 16px;overflow-y:auto;font-size:16px;line-height:20px;color:rgba(45,75,115,.6);display:inline-block;text-align:left;white-space:pre-wrap;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:8px;font-size:14px}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__footer{overflow:hidden;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px;padding:0 32px 24px;position:relative;box-sizing:content-box}.zt-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}.zt-dialog__cancel{background:#fff}.zt-dialog__confirm--with-cancel.zt-dialog__confirm.zt-button{margin-left:8px}

package/es/dialog/index.less

@@ -5,6 +5,7 @@
   top: 45%;
   left: 50%;
   width: @dialog-width;
+  max-width: 90%;
   overflow: hidden;
   font-size: @dialog-font-size;
   background-color: @dialog-background-color;

package/es/field/index.js

@@ -100,6 +100,12 @@ export default createComponent({
       this.resetValidation();
       this.validateWithTrigger('onChange');
       this.$nextTick(this.adjustSize);
+    },
+    autosize: {
+      deep: true,
+      handler: function handler() {
+        this.$nextTick(this.adjustSize);
+      }
     }
   },
   mounted: function mounted() {

package/es/index.js

@@ -76,7 +76,7 @@ import Tag from './tag';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.0.30';
+var version = '2.0.32';
 
 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, PdfViewer, PdfViewerV2, 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/popup/index.js

@@ -1,6 +1,7 @@
 import { createNamespace, isDef } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
+import { unitToPx } from "../utils/format/unit";
 
 var _createNamespace = createNamespace('popup'),
     createComponent = _createNamespace[0],
@@ -42,6 +43,15 @@ export default createComponent({
       type: Number,
       default: 60
     },
+    // 控制滑动区域的高度,滑动的最小高
+    minDragHeight: {
+      type: String,
+      default: '40px'
+    },
+    maxDragHeight: {
+      type: String,
+      default: '85vh'
+    },
     sliderShow: {
       type: Boolean,
       default: false
@@ -69,7 +79,6 @@ export default createComponent({
   },
   data: function data() {
     return {
-      positionY: 0,
       timerId: null,
       contentStyle: "height:" + this.sliderContentHeight + "px;",
       touchHeight: 0,
@@ -96,14 +105,15 @@ export default createComponent({
       }
 
       var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-      this.positionY = event.touches[0].clientY;
+      var touchAreaHeight = unitToPx(this.minDragHeight);
+      var positionY = event.touches[0].clientY;
       this.timerId = setTimeout(function () {
-        if (_this2.positionY === 0 || _this2.positionY < h * 0.15) {
+        if (positionY === 0 || positionY < h - unitToPx(_this2.maxDragHeight)) {
           return;
         }
 
-        _this2.touchHeight = _this2.positionY - 40 > h - 40 ? h - 40 + _this2.touchPoint : _this2.positionY;
-        _this2.contentStyle = "height:" + (h - _this2.touchHeight - 40 + _this2.touchPoint) + "px;";
+        _this2.touchHeight = positionY - touchAreaHeight > h - touchAreaHeight ? h - touchAreaHeight + _this2.touchPoint : positionY;
+        _this2.contentStyle = "height:" + (h - _this2.touchHeight - touchAreaHeight + _this2.touchPoint) + "px;";
       }, 10);
     },
     endMove: function endMove() {
@@ -152,7 +162,8 @@ export default createComponent({
           "touchmove": this.move,
           "touchend": this.endMove,
           "touchstart": this.startMove
-        }
+        },
+        "style": "height:" + this.minDragHeight
       }, [h("div", {
         "class": bem('slider-bar')
       })]), h("div", {

package/es/search/index.css

@@ -1 +1 @@
-.zt-search{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;padding:8px 16px;background-color:#f5faff}.zt-search__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;background-color:rgba(45,75,115,.04);border:1px solid transparent;border-radius:2px;box-shadow:inset 4px 4px 8px 0 rgba(45,75,115,.1);background-clip:padding-box;position:relative}.zt-search__content::before{content:'';position:absolute;top:0;right:0;left:0;bottom:0;z-index:-1;margin:-1px;border-radius:inherit;background:-webkit-linear-gradient(#fff,rgba(255,255,255,.4));background:linear-gradient(#fff,rgba(255,255,255,.4))}.zt-search__content--round{border-radius:999px}.zt-search__label{padding:8px 0 8px 12px;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;line-height:20px}.zt-search .zt-field__root{background-color:transparent;padding:0}.zt-search .zt-field__label{margin-right:0}.zt-search .zt-cell__title.zt-field__label{-webkit-box-flex:unset;-webkit-flex:unset;flex:unset}.zt-search .zt-cell{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:8px 12px;background:0 0;line-height:20px;font-size:14px;font-weight:400}.zt-search .zt-cell__left-icon{color:#969799}.zt-search .zt-field{margin:0}.zt-search .zt-field__control{color:#2d4b73}.zt-search--show-action{padding-right:0}.zt-search input{caret-color:#0091fa}.zt-search input::-webkit-search-cancel-button,.zt-search input::-webkit-search-decoration,.zt-search input::-webkit-search-results-button,.zt-search input::-webkit-search-results-decoration{display:none}.zt-search input::-webkit-input-placeholder{color:rgba(45,75,115,.2)}.zt-search input::placeholder{color:rgba(45,75,115,.2)}.zt-search__action{padding:0 16px 0 12px;color:#0091fa;font-size:16px;height:28px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
+.zt-search{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;padding:8px 16px;background-color:#f5faff}.zt-search__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;background-color:rgba(45,75,115,.04);border:1px solid transparent;border-radius:2px;box-shadow:inset 4px 4px 8px 0 rgba(45,75,115,.1);background-clip:padding-box;position:relative}.zt-search__content::before{content:'';position:absolute;top:0;right:0;left:0;bottom:0;z-index:-1;margin:-1px;border-radius:inherit;background:-webkit-linear-gradient(#fff,rgba(255,255,255,.4));background:linear-gradient(#fff,rgba(255,255,255,.4))}.zt-search__content--round{border-radius:999px}.zt-search__label{padding:8px 0 8px 12px;color:rgba(0,0,0,.6);font-weight:400;font-size:14px;line-height:20px}.zt-search .zt-field__root{background-color:transparent;padding:0}.zt-search .zt-field__label{margin-right:0}.zt-search .zt-cell__title.zt-field__label{-webkit-box-flex:unset;-webkit-flex:unset;flex:unset}.zt-search .zt-cell{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:8px 12px;background:0 0;line-height:20px;font-size:14px;font-weight:400}.zt-search .zt-cell__left-icon{color:#969799}.zt-search .zt-field{margin:0}.zt-search .zt-field__control{color:#2d4b73}.zt-search--show-action{padding-right:0}.zt-search input{caret-color:#0091fa}.zt-search input::-webkit-search-cancel-button,.zt-search input::-webkit-search-decoration,.zt-search input::-webkit-search-results-button,.zt-search input::-webkit-search-results-decoration{display:none}.zt-search input::-webkit-input-placeholder{color:rgba(45,75,115,.2)}.zt-search input::placeholder{color:rgba(45,75,115,.2)}.zt-search__action{padding:0 16px 0 12px;color:#0091fa;font-size:14px;height:28px;cursor:pointer;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center}

package/es/search/index.less

@@ -100,7 +100,6 @@
     color: @search-action-text-color;
     font-size: @search-action-font-size;
     height: @search-action-height;
-    font-weight: 600;
     cursor: pointer;
     user-select: none;
     display: flex;

package/es/style/var.less

@@ -282,7 +282,6 @@
 @cell-label-font-size: @font-size-md;
 @cell-label-line-height: @line-height-sm;
 @cell-label-margin-top: 10px;
-@cell-value-color: @black;
 @cell-icon-size: 16px;
 @cell-right-icon-color: @gray-6;
 @cell-large-vertical-padding: @padding-sm;
@@ -785,7 +784,7 @@
 @search-left-icon-color: @gray-6;
 @search-action-padding: 0 @padding-md 0 @padding-sm;
 @search-action-text-color: @blue;
-@search-action-font-size: @font-size-lg;
+@search-action-font-size: @font-size-md;
 @search-action-height: 28px;
 @search-input-caret-color: #0091FA;
 @search-cell-padding: 8px 12px;
@@ -1060,14 +1059,11 @@
 @backtop-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
 
 // Table
+@table-border-radius: @border-radius-lg;
 @table-head-height: 40px;
 @table-head-font-size: 14px;
-@table-head-color: #000;
-@table-head-background: #fafafa;
 @table-row-height: 40px;
 @table-row-font-size: 14px;
-@table-row-color: #000;
-@table-row-background: #fff;
 
 // Fold-Dialog
 @foldDialog-padding: 0 16px 12px 16px;

package/es/table/index.css

@@ -1 +1 @@
-.zt-table{position:relative}.zt-table__normal-box{display:-webkit-box;display:-webkit-flex;display:flex;overflow-x:scroll}.zt-table__normal-box::-webkit-scrollbar{width:unset;background-color:unset;height:4px}.zt-table__normal-box::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.zt-table__fixed-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;left:0;z-index:2}.zt-table__fixed-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%)}.zt-table__head{-webkit-flex-shrink:0;flex-shrink:0}.zt-table__head-item{height:40px;font-weight:600;font-size:14px;color:#000;text-align:center;line-height:40px;background:#fafafa}.zt-table__table-data{height:40px;font-size:14px;color:#000;text-align:center;line-height:40px;background:#fff}
+.zt-table{position:relative;border-radius:8px;scrollbar-width:none;-ms-overflow-style:none}.zt-table::-webkit-scrollbar{display:none;width:0;height:0}.zt-table__normal-box{display:-webkit-box;display:-webkit-flex;display:flex;overflow-x:scroll;position:relative}.zt-table__fixed-left-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;left:-1px;z-index:2}.zt-table__fixed-right-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;right:-1px;z-index:2}.zt-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%)}.zt-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%)}.zt-table__head{-webkit-flex-shrink:0;flex-shrink:0}.zt-table__head-item{height:40px;font-weight:600;font-size:14px;text-align:center;line-height:40px}.zt-table__table-data{height:40px;font-size:14px;text-align:center;line-height:40px}.zt-table.zt-table--no-border .zt-table__fixed-head::after,.zt-table.zt-table--no-border .zt-table__head-item::after,.zt-table.zt-table--no-border .zt-table__head::after,.zt-table.zt-table--no-border .zt-table__normal-box::after,.zt-table.zt-table--no-border .zt-table__table-data::after{border:none}

package/es/table/index.js

@@ -18,22 +18,51 @@ export default createComponent({
     dataList: {
       type: Array,
       default: []
+    },
+    outline: {
+      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: {
+      type: Boolean,
+      default: false
     }
   },
   data: function data() {
     return defaultData();
   },
   computed: {
-    fixedColumn: function fixedColumn() {
+    fixedColumnLeft: function fixedColumnLeft() {
       return this.headList.filter(function (v) {
-        return v.fixed;
+        return v.fixedLeft;
+      });
+    },
+    fixedColumnRight: function fixedColumnRight() {
+      return this.headList.filter(function (v) {
+        return v.fixedRight;
       });
     },
     resortHeadList: function resortHeadList() {
       // 对表头数组重新排序，需要固定的表头向左对齐
-      return this.fixedColumn.concat(this.headList.filter(function (v) {
-        return !v.fixed;
-      }));
+      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) {
@@ -42,23 +71,55 @@ export default createComponent({
     }
   },
   mounted: function mounted() {
-    if (this.fixedColumn && this.fixedColumn.length) {
-      // 当表格横向出现滚动时，给固定列的右侧加一个box-shadow
-      var box = document.getElementById("normalBoxID");
-      box.addEventListener("scroll", function (e) {
-        var fixedBox = document.getElementById("fixedBoxID");
-
-        if (e.target.scrollLeft > 0) {
-          fixedBox.classList.add("shadow");
-        } else {
-          fixedBox.classList.remove("shadow");
-        }
-      });
+    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 fixedIndexList = this.headList.map(function (v, i) {
-      if (v.fixed) {
+    var fixedLeftIndexList = this.headList.map(function (v, i) {
+      if (v.fixedLeft) {
         return "tableHead" + i;
       } else {
         return "";
@@ -67,44 +128,130 @@ export default createComponent({
       return v !== "";
     });
 
-    if (fixedIndexList.length > 0) {
-      fixedIndexList.forEach(function (current, index) {
-        var fixedDom = document.getElementById("fixedHead" + index);
+    if (fixedLeftIndexList.length > 0) {
+      fixedLeftIndexList.forEach(function (current, index) {
+        var fixedDom = document.getElementById("fixedHeadLeft" + index);
         var normalDom = document.getElementById(current);
-        fixedDom.style.width = normalDom.offsetWidth + "px";
+
+        if (fixedDom && normalDom) {
+          fixedDom.style.width = normalDom.offsetWidth + "px";
+        }
       }, 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";
+        }
+      }, 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";
+        }
+      }
     }
   },
   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;
+      }
+
+      if (isFixed === "right") {
+        idName = "fixedHeadRight" + index;
+      }
+
+      var headRender = slots("head" + headObj.id) || headObj.label;
+
+      if ((headObj.fixedLeft || headObj.fixedRight) && !isFixed) {
+        // 被固定列遮住的列不显示内容
+        headRender = "";
+      }
+
       return h("div", {
         "class": [bem(isFixed ? "fixed-head" : "head"), isFixed ? BORDER_SURROUND : BORDER_RIGHT],
         "attrs": {
-          "id": isFixed ? "fixedHead" + index : "tableHead" + index
+          "id": idName
         },
         "style": isFixed ? "" : headObj.width ? "width:" + headObj.width + ";" : ""
       }, [h("div", {
-        "class": [bem("head-item"), BORDER_TOP_BOTTOM]
-      }, [headObj.label]), this.dataList.map(function (data) {
-        return h("div", {
-          "class": [bem("table-data"), BORDER_BOTTOM]
-        }, [data[headObj.key]]);
+        "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;
+
+        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]]);
+        }
       }), this.hasSummary ? headObj.showSummary ? h("div", {
-        "class": [bem("head-item"), BORDER_BOTTOM]
+        "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]
+        "class": [bem("head-item"), BORDER_BOTTOM],
+        "style": headItemStyle
       }, [headObj.summaryLabel || ""]) : ""]);
     }
   },
   render: function render(h) {
     var _this = this;
 
+    var showFixed = this.dataList && this.dataList.length;
     return h("div", {
-      "class": bem()
+      "class": bem(["", this.outline ? "" : "no-border"])
     }, [h("div", {
       "attrs": {
         "id": "normalBoxID"
@@ -113,12 +260,27 @@ export default createComponent({
     }, [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": "fixedBoxID"
+        "id": "fixedRightBoxID"
       },
-      "class": bem("fixed-box")
-    }, [this.fixedColumn.map(function (x, i) {
-      return _this.genColumn(x, i, true);
+      "class": bem("fixed-right-box")
+    }, [this.fixedColumnRight.map(function (x, i) {
+      return _this.genColumn(x, i, "right");
     })])]);
   }
 });

package/es/table/index.less

@@ -1,26 +1,35 @@
 @import '../style/var';
 .zt-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;
+  }
   &__normal-box {
     display: flex;
     overflow-x: scroll;
-    &::-webkit-scrollbar {
-      width: unset;
-      background-color: unset;
-      height: 4px;
-    }
-    &::-webkit-scrollbar-thumb{
-      background-color: rgba(0,0,0,.1);
-    }
+    position: relative;
+    
   }
-  &__fixed-box {
+  &__fixed-left-box {
     display: flex;
     position: absolute;
     top: 0;
-    left: 0;
+    left: -1px;
     z-index: 2;
   }
-  &__fixed-box.shadow::after {
+  &__fixed-right-box {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: -1px;
+    z-index: 2;
+  }
+  &__fixed-left-box.shadow::after {
     content: "";
     position: absolute;
     top: 0;
@@ -30,6 +39,16 @@
     opacity: 0.06;
     background-image: linear-gradient(90deg, #000000 0%, rgba(0,0,0,0.00) 100%);
   }
+  &__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%);
+  }
   &__head {
     flex-shrink: 0;
   }
@@ -37,17 +56,18 @@
     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;
   }
   &__table-data {
     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;
+  }
+  &.zt-table--no-border {
+    .zt-table__normal-box::after, .zt-table__fixed-head::after, .zt-table__head::after, .zt-table__head-item::after, .zt-table__table-data::after {
+        border: none;
+    }
   }
 }