centaline-data-driven 1.1.55 → 1.1.59

package/src/centaline/dynamicSearchList/src/dynamicSearchTable.vue

@@ -1,1069 +1,1082 @@
-<template>
-  <div style="width:100%;" class="ct-searchtable" ref="searchTable">
-    <ct-tableStatistics ref="listHeader" class="ct-search-table-list-header" :tip="model.listHeader" v-if="!isLoading && searchDataStatisticsApi"></ct-tableStatistics>
-    <ct-tabletoolbar ref="toolbar" v-if="!isLoading" :buttons="model.buttons"
-                     @click="toolbarClickHandler($event)"
-                     @importComplete="importComplete"
-                     :optionApi="model.optionApi"
-                     :searchModel="model.searchModel"></ct-tabletoolbar>
-    <ct-tabletip ref="listHeader" class="ct-search-table-list-header" :tip="model.listHeader" v-if="!isLoading"></ct-tabletip>
-    <div v-loading="tableLoading" v-if="!isLoading" :style="{'height':'0px','top':model.tableHeight*0.55+'px'}">
-    </div>
-    <div v-loading="operationLoading">
-    </div>
-    <div class="ct-tableParent" ref="tableParent" v-bind="model.attrs" v-if="!isLoading"
-         :style="{'height':model.tableHeight+'px'}"
-         @scroll="scrollHandle($event)" v-focus="true"
-         @keydown.up="rowKeyDownHandle($event,0)" @keydown.down="rowKeyDownHandle($event,1)"
-         tabindex="-1">
-      <div class="ct-table-content">
-        <table border="0" cellpadding="0" cellspacing="0"
-               :class="['ct-table',model.attrs.size?'ct-table-'+model.attrs.size:'']">
-          <!--表头-->
-          <thead ref="tableHead">
-            <tr class="ct-tr" ref="headTr" v-for="(columns,columnsIndex) in model.columnsArr">
-              <th v-if="model.isMulti && columnsIndex === 0" ref="headLeftThs" class="ct-td left-fixation-th checkbox-td">
-                <input type="checkbox" @click="selectAll($event)" v-model="model.selectAll" class="checkbox-td-1" />
-              </th>
-              <th :ref="column.fixed?(column.fixed==='left'?'headLeftThs':'headRightThs'):'headThs'" v-for="(column,colIndex) in columns"
-                  v-if="column.show" class="ct-td ct-searchtable-th"
-                  :rowspan="column.rowspan"
-                  :colspan="column.colspan"
-                  :class="[colHasWidth[colIndex],column.sortAction,
-                  colIndex === leftShadow?'shadowLeft':null,
-                  colIndex === rightShadow?'shadowRight':null,
-                  column.fixed === 'left'?'left-fixation-th':null,
-                  column.fixed === 'right'?'right-fixation-th':null,
-                  typeof column.fixed === 'undefined'?'right-no-fixation-th':null]"
-                  @mousemove="thMouseMoveHandle($event)" @mousedown="thMouseDownHandle($event,colIndex)"
-                  v-bind="column.attrs">
-
-                <span>{{column.name}}</span>
-                <span class="caret-wrapper" v-if="column.sort" @click="toSort($event,column);" @contextmenu.prevent="clearSort($event,column);">
-                  <i class="sort-caret ascending" @click.left="toSort($event,column,'asc')" @contextmenu.prevent="clearSort($event,column);"></i>
-                  <i class="sort-caret descending" @click.left="toSort($event,column,'desc')" @contextmenu.prevent="clearSort($event,column);"></i>
-                </span>
-              </th>
-
-              <!--<th v-if="model.rowRouter.length > 0" class="ct-td tdFiexd" :class="[-1 === rightShadow?'shadowRight':null]" :style="{'min-width':'20px','transform':'translate('+scrollRight+'px, '+scrollTop+'px)'}">
-                操作
-              </th>-->
-            </tr>
-          </thead>
-          <!--表体-->
-          <tbody>
-            <!--这一行仅用于设置未加载数据时的列宽-->
-            <!--<tr v-if="model.listData.length === 0" class="ct-tr" style="visibility: hidden;">
-              <td v-if="model.isMulti">
-              </td>
-              <td v-for="(column,colIndex) in model.dataFieldcolumns" class="ct-td" v-if="column.show">
-                <div :style="{'width': column.width + 'px'}">
-                </div>
-              </td>
-            </tr>-->
-            <!--可视区域的行数据-->
-            <tr v-for="(row,rowindex) in model.listData"
-                v-if="pageRowMin <= rowindex && rowindex <= pageRowMax"
-                :ref="'rows.'+rowindex" @click="rowClickHandle($event,rowindex)"
-                class="ct-tr"
-                :style="row.$style">
-              <td v-if="model.isMulti" class="ct-td tdFiexd left-fixation checkbox-td" align="center">
-                <input v-if="!model.rightMulti || row[model.rightMulti] == 1" type="checkbox" v-model="row.$select" @change="selectOne($event)" class="checkbox-td-1" />
-              </td>
-              <td :ref="column.fixed?(column.fixed==='left'?'headLeftTds':'headRightTds'):null"
-                  v-for="(column,colIndex) in model.dataFieldcolumns"
-                  v-if="tdShow(column, row)"
-                  :rowspan="tdRowspan(column, row)"
-                  class="ct-td"
-                  :class="[colHasWidth[colIndex],
-                  colIndex === leftShadow?'shadowLeft':null,
-                  colIndex === rightShadow?'shadowRight':null,
-                  column.fixed === 'left'?'left-fixation':null,
-                  column.fixed === 'right'?'right-fixation':null]"
-                  v-bind="column.attrs">
-                <!--操作列-->
-                <div v-if="column.id==='operation'" class="div_allinline" :class="column.autoRowHeight ? 'lineFeedCell':'cell'">
-                  <ct-tablecurrency v-for="(router,rowRouterIndex) in model.rowRouter" :key="rowRouterIndex" v-if="!router.rightField || row[router.rightField] == 1" :isOperationalColumn="true"
-                                    :router="router" :colValue="router.label" :rowData="row" @click="rolRouterClickHandler">
-                  </ct-tablecurrency>
-                </div>
-
-                <!--可点击的列-->
-                <ct-tablecurrency v-else-if="column.router" :align="column.attrs.align" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :router="column.router" :colValue="row[column.id]" :rowData="row"
-                                  @click="rolRouterClickHandler">
-                </ct-tablecurrency>
-
-                <!--正常的列-->
-                <div v-else-if="typeof column.template === 'undefined'" :class="column.autoRowHeight ? 'lineFeedCell':'cell'">
-                  {{row[column.id]}}
-                </div>
-
-                <!--模版列(启用)-->
-                <!--<component v-else :is="column.template(row).component" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :vmodel="column.template(row)" :style="{'width': column.width + 'px'}">
-                  <template slot="value">
-                    {{row[column.id]}}
-                  </template>
-                </component>-->
-              </td>
-            </tr>
-
-
-
-            <!--适配滚动条-->
-            <tr v-else v-bind:style="{ height: row.$heigth + 'px' }"></tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <ct-tabletip ref="listFooter" class="ct-search-table-list-footer" :tip="model.listFooter" v-if="!isLoading"></ct-tabletip>
-    <ct-tabletip ref="footer" class="ct-search-table-footer" :tip="model.footer" v-if="!isLoading"></ct-tabletip>
-    <div v-if="isLoading && searchLoading" v-loading="isLoading" style="top:30px;">
-    </div>
-  </div>
-</template>
-<script>
-  import dynamicElement from '../../mixins/dynamicElement';
-  import dynamicTableTip from './dynamicTableTip.vue';
-  import dynamicTableToolbar from './dynamicTableToolbar.vue';
-  import dynamicTableStatistics from './dynamicTableStatistics.vue';
-  export default {
-    name: 'ct-searchtable',
-    mixins: [dynamicElement],
-    components: {
-      'ct-tabletip': dynamicTableTip,
-      'ct-tabletoolbar': dynamicTableToolbar,
-      'ct-tableStatistics': dynamicTableStatistics
-    },
-    props: {
-      vmodel: Object,
-      api: String,
-      searchDataStatisticsApi: String
-    },
-    computed: {
-    },
-    data() {
-      return {
-        currentTh: null,
-        isLoading: true,
-        searchLoading: true,
-        tableLoading: false,//表格等待
-        operationLoading: false,//操作等待
-        tempSearchModel: null,
-        isBusy: false,
-        screenComplate: false,
-        tableComplate: false,
-        scrollTop: 0,
-        scrollLeft: 0,
-        scrollRight: 0,
-        leftShadow: -1,//左阴影个数
-        rightShadow: -1,//右阴影个数
-        currentRow: null,
-        colHasWidth: {},//有无列宽集合
-        test: true,
-        firstRow: 0,//展示出来可视的第一行号
-        pageRowMin: 0,//页面实际的第一行号
-        pageRowMax: 100,//页面实际的第后行号
-        displayRowNumber: 30
-      }
-    },
-    activated() {
-      this.$nextTick(() => {
-        // this.calculatingRowHeight();
-        this.setTableHeight();
-      })
-    },
-    methods: {
-      load(data) {
-        var self = this;
-        self.model = data;
-        self.model.$vue = self;
-        self.model.columns.forEach((v, vi) => {
-          if (v.fixed === 'left') {
-            self.leftShadow = vi;
-          }
-          if (v.fixed === 'right' && self.rightShadow < 0) {
-            self.rightShadow = vi;
-          }
-          if (typeof v.width !== 'undefined') {
-            self.colHasWidth[vi] = '';
-          }
-          else {
-            self.colHasWidth[vi] = 'nowidth';
-          }
-        });
-        
-        self.isLoading = false;
-        self.$forceUpdate();
-        this.model.scripts.formData = this.model.formData;
-        this.model.scripts.formData.formTable = this.model;
-
-        self.$emit('loaded');
-        self.$emit('showTitle');
-        if (this.tempSearchModel !== null) {
-          self.model.searchModel = this.tempSearchModel;
-        }
-        //自动查询 调用合并列
-        if (self.model.rowMergedColumns.length > 0 && self.model.listData.length > 0) {
-          self.model.setRow(self.model.listData);
-        }
-        self.tableComplate = true;
-        this.setTableHeight();
-        this.$nextTick(() => {
-          window.addEventListener("resize", (ev) => {
-            self.setTableHeight();
-          });
-          //self.rowColorChange();
-          self.fiexdHead();
-
-          //当表格没有占满表格框时，主动请求下一页
-          var next = function (rtn) {
-            if (rtn) {
-              self.$forceUpdate();
-              self.$nextTick(() => {
-                if (self.$refs.tableParent.scrollHeight <= self.$refs.tableParent.offsetHeight) {
-                  self.tableLoading = true;
-                  self.model.nextPage(next);
-                }
-                else {
-                  self.tableLoading = false;
-                  self.rowColorChange();
-
-                  self.calculatingRowHeight();
-                }
-              });
-            }
-            else {
-              self.tableLoading = false;
-            }
-          }
-          next(true);
-
-          self.setfixedSize();
-        });
-      },
-      thMouseMoveHandle(ev) {
-        if (ev.offsetX > ev.currentTarget.offsetWidth - 10) {
-          ev.currentTarget.style.cursor = 'col-resize';
-          ev.currentTarget.canResize = true;
-        }
-        else {
-          ev.currentTarget.style.cursor = 'default';
-          ev.currentTarget.canResize = false;
-        }
-      },
-      thMouseDownHandle(ev, colIndex) {
-        var self = this;
-        var col = self.model.columns[colIndex];
-        if (ev.currentTarget.canResize) {
-          ev.currentTarget.isDown = true;
-          ev.currentTarget.oldX = ev.x;
-          ev.currentTarget.oldWidth = ev.currentTarget.offsetWidth;
-          this.currentTh = ev.currentTarget;
-          var MouseUpHandle = function () {
-            self.currentTh.isDown = false;
-            self.currentTh = null;
-            document.removeEventListener("mouseup", MouseUpHandle, false);
-            document.removeEventListener("mousemove", MouseMoveHandle, false);
-
-            //如果是高度可变的列，重新计算整个表的高度
-            if (col.autoRowHeight) {
-              self.model.listData.forEach(v => {
-                v.$heigth = undefined;
-              });
-              self.$nextTick(() => {
-                self.calculatingRowHeight();
-              })
-            }
-          }
-          var MouseMoveHandle = function () {
-            var ev1 = event || e;
-            if (self.currentTh.isDown) {
-              if (self.currentTh) {
-                if (typeof col.width === 'undefined') {
-                  self.colHasWidth[colIndex] = '';
-                  self.$forceUpdate();
-                  self.$nextTick(() => {
-                    var index = self.model.selectIndex;
-                    for (var j = 0; j < self.$refs['rows.' + index][0].children.length; j++) {
-                      self.$refs['rows.' + index][0].children[j].classList.add('select');
-                    }
-                  });
-                }
-
-                //col.width = (self.currentTh.oldWidth + (ev1.x - self.currentTh.oldX));
-                self.$set(col, "width", (self.currentTh.oldWidth + (ev1.x - self.currentTh.oldX)));
-                if (typeof self.$refs.headTr !== 'undefined' && self.$refs.headTr.length > 0) {
-                  self.currentTh.style.minWidth = col.width + 'px';
-                  self.currentTh.style.width = col.width + 'px';
-                  self.getScrollAttr();
-                }
-              }
-            }
-          }
-          document.addEventListener("mouseup", MouseUpHandle, false);
-          document.addEventListener("mousemove", MouseMoveHandle, false);
-        }
-      },
-      getPage(index) {
-        var self = this;
-        if (typeof self.$refs.tableParent !== 'undefined') {
-          self.$refs.tableParent.scrollTop = 0;
-          self.$refs.tableParent.scrollLeft = 0;
-          self.scrollTop = 0;
-          self.scrollLeft = 0;
-        }
-        var next = function (rtn) {
-          if (rtn) {
-            self.$forceUpdate();
-            self.$nextTick(() => {
-              if (self.$refs.tableParent.scrollHeight <= self.$refs.tableParent.offsetHeight) {
-                self.tableLoading = true;
-                self.model.nextPage(next);
-              }
-              else {
-                self.tableLoading = false;
-                self.rowColorChange();
-                self.resetScroll();
-                self.calculatingRowHeight();
-                self.getScrollAttr();
-              }
-              self.setfixedSize();
-            });
-          }
-          else {
-            self.tableLoading = false;
-            self.rowColorChange();
-          }
-          self.$emit('searchComplate');
-        }
-        self.tableLoading = true;
-        this.model.getPage(index, next);
-      },
-      toSort(ev, col, action) {
-        var self = this;
-        this.model.toSort(col, action, () => {
-          self.$forceUpdate();
-          self.getScrollAttr();
-        });
-        ev.cancelBubble = true;
-        ev.stopPropagation();
-      },
-      clearSort(ev, col) {
-        var self = this;
-        this.model.clearSort(col, () => {
-          self.$forceUpdate();
-          self.getScrollAttr();
-        });
-        ev.cancelBubble = true;
-        ev.stopPropagation();
-      },
-      fiexdHead() {
-        this.$nextTick(() => {
-          var self = this;
-          var tableCont = this.$refs.tableParent;
-          function scrollHandle(e) {
-            self.getScrollAttr();
-          }
-          tableCont.addEventListener('scroll', self.getScrollAttr);
-        });
-      },
-      removeScrollEvent() {
-        var tableCont = this.$refs.tableParent;
-        //移除事件监听器
-        tableCont.removeEventListener("scroll", this.getScrollAttr, false);
-        //tableCont.removeEventListener("scroll", this.scrollHandle, false);
-      },
-      addScrollEvent() {
-        var tableCont = this.$refs.tableParent;
-        //添加事件监听器
-        tableCont.addEventListener("scroll", this.getScrollAttr, false);
-      },
-      freezeData() {
-        Object.freeze(this.model.listData);
-      },
-      setfixedSize() {
-        if (typeof this.$refs.headTr !== 'undefined' && this.$refs.headTr.length > 0) {
-          let fixedSize = 0;
-          let j = 0;
-          let fixationThArr = this.$refs.headTr[0].getElementsByClassName('left-fixation-th');
-          if (fixationThArr.length > 0) {
-            if (this.model.isMulti) {
-              fixedSize = fixationThArr[j++].offsetWidth
-            }
-            for (let i = 0; i < this.model.columns.length; i++) {
-              if (this.model.columns[i].fixed === 'left' && this.model.columns[i].show) {
-                this.model.columns[i].fixedSize = fixedSize;
-                fixedSize = fixedSize + fixationThArr[j++].offsetWidth;
-              }
-            }
-
-            fixedSize = 0;
-            fixationThArr = this.$refs.headTr[0].getElementsByClassName('right-fixation-th');
-            j = fixationThArr.length - 1;
-            for (let i = this.model.columns.length - 1; i > 0; i--) {
-              if (this.model.columns[i].fixed === 'right' && this.model.columns[i].show) {
-                this.model.columns[i].fixedSize = fixedSize;
-                fixedSize = fixedSize + fixationThArr[j--].offsetWidth;
-              }
-            }
-          }
-        }
-      },
-      getScrollAttr(e) {
-        if (typeof this.$refs.tableParent !== 'undefined' && typeof this.$refs.headThs !== 'undefined') {
-
-          this.calculatingRowHeight();
-
-          var scrollTop = this.$refs.tableParent.scrollTop;
-          var scrollLeft = this.$refs.tableParent.scrollLeft;
-          var scrollRight = this.$refs.tableParent.scrollWidth - scrollLeft - this.$refs.tableParent.clientWidth;
-
-          //计算可视范围的第一条数据
-          let index = 0;
-          let topHeigth = 0;
-          for (; index < this.model.listData.length; index++) {
-            if (topHeigth >= scrollTop) {
-              break;
-            }
-            else {
-              topHeigth = topHeigth + this.model.listData[index].$heigth;
-            }
-          }
-          this.firstRow = index - 1;
-          this.setTrLazyLoading();
-          //若每行高度是固定的，可直接使用下面方法即可
-          //this.firstRow = parseInt(scrollTop / 33);
-
-          this.scrollTop = scrollTop;
-          this.scrollLeft = scrollLeft;
-          this.scrollRight = scrollRight;
-        }
-      },
-      setTrLazyLoading() {
-        this.pageRowMax = this.firstRow + this.displayRowNumber;
-        this.pageRowMin = this.firstRow - this.displayRowNumber;
-        if (this.pageRowMin > 0 && this.model.listData[this.pageRowMin].$rowspan === 0) {
-          for (let i = this.pageRowMin; i >= 0; i--) {
-            if (this.model.listData[i].$rowspan > 0) {
-              this.pageRowMin = i;
-              break;
-            }
-          }
-        }
-
-        //debugger
-        //let index = this.model.listData.length - 1;
-        //let isSet = false;
-        //for (; index >= 0; index--) {
-        //  if (Math.abs(index - this.firstRow) < this.displayRowNumber || typeof (this.model.listData[index].$heigth) === 'undefined') {
-        //    //this.$set(this.model.listData[index], "$trLazyLoadingShow", true);
-        //  }
-        //  else {
-        //    if (index < this.firstRow && !isSet) {
-        //      if (this.model.listData[index].$rowspan === 0) {
-        //        this.$set(this.model.listData[index], "$trLazyLoadingShow", true);
-        //        continue;
-        //      }
-        //      else {
-        //        isSet = true;
-        //        this.$set(this.model.listData[index], "$trLazyLoadingShow", true);
-        //        continue;
-        //      }
-        //    }
-        //    this.$set(this.model.listData[index], "$trLazyLoadingShow", false);
-        //  }
-        //}
-      },
-      setTableHeight() {
-        var self = this;
-        this.$nextTick(() => {
-          if (this.$refs.searchTable && this.$refs.toolbar && this.$refs.searchTable.parentElement) {
-            var h1 = this.$refs.searchTable.parentElement.offsetHeight | 0;
-            var h2 = this.$refs.searchTable.offsetTop | 0;
-            var h3 = this.$refs.toolbar.$el.offsetHeight | 0;
-            var h4 = this.$refs.footer.$el.offsetHeight | 0;
-            var h5 = this.$refs.listHeader.$el.offsetHeight | 0;
-            var h6 = this.$refs.listFooter.$el.offsetHeight | 0;
-            let tableHeight = h1 - h2 - h3 - h4 - h5 - h6 - 22;
-            this.model.tableHeight = tableHeight < 40 ? 350 : tableHeight;
-            this.$nextTick(() => {
-              self.getScrollAttr();
-            });
-          }
-        });
-      },
-      scrollHandle(ev) {
-        var self = this;
-        if ((this.$refs.tableParent.scrollTop + this.$refs.tableParent.clientHeight) >= (this.$refs.tableParent.scrollHeight - 5)) {
-          if (!this.isBusy) {
-            self.isBusy = true;
-            self.tableLoading = true;
-            self.model.nextPage((rtn) => {
-              if (rtn) {
-                self.$nextTick(() => {
-                  self.calculatingRowHeight();
-                  self.getScrollAttr();
-
-                });
-                self.$forceUpdate();
-              }
-              self.isBusy = false;
-              self.tableLoading = false;
-            });
-          }
-        }
-        ev.cancelBubble = true;
-        ev.stopPropagation();
-      },
-      rowClickHandle(ev, index) {
-        this.model.selectIndex = index;
-        this.rowColorChange();
-        ev.cancelBubble = true;
-        ev.stopPropagation();
-      },
-      rowColorChange() {
-        var index = this.model.selectIndex;
-        if (typeof this.$refs['rows.' + index] !== "undefined" && this.currentRow !== this.$refs['rows.' + index][0]) {
-          if (this.currentRow !== null) {
-            for (var i = 0; i < this.currentRow.children.length; i++) {
-              this.currentRow.children[i].classList.remove('select');
-            }
-          }
-          if(this.$refs['rows.' + index][0])
-          {
-            for (var j = 0; j < this.$refs['rows.' + index][0].children.length; j++) {
-              this.$refs['rows.' + index][0].children[j].classList.add('select');
-            }
-          }
-          this.currentRow = this.$refs['rows.' + index][0]||null;
-        }
-      },
-      resetScroll: function () {
-        var self = this;
-        if (self.$refs.tableParent.scrollTop > self.$refs['rows.' + self.model.selectIndex][0].offsetTop - self.$refs.tableHead.offsetHeight) {
-          self.$refs.tableParent.scrollTop = self.$refs['rows.' + self.model.selectIndex][0].offsetTop - self.$refs.tableHead.offsetHeight;
-        }
-        if (self.$refs.tableParent.scrollTop + self.$refs.tableParent.clientHeight <= self.$refs['rows.' + self.model.selectIndex][0].offsetTop + self.$refs['rows.' + self.model.selectIndex][0].offsetHeight) {
-          self.$refs.tableParent.scrollTop = self.$refs['rows.' + self.model.selectIndex][0].offsetTop - self.$refs.tableParent.clientHeight + self.$refs['rows.' + self.model.selectIndex][0].offsetHeight;
-        }
-        self.scrollTop = self.$refs.tableParent.scrollTop;
-      },
-      rowKeyDownHandle(ev, action) {
-        var self = this;
-        if (action === 1) {
-          this.model.downKey();
-        }
-        else {
-          this.model.upKey();
-        }
-        this.rowColorChange();
-        this.resetScroll();
-        if (!this.isBusy) {
-          if (this.model.selectIndex === this.model.listData.length - 1) {
-            self.isBusy = true;
-            self.tableLoading = true;
-            self.model.nextPage((rtn) => {
-              if (rtn) {
-                self.$nextTick(() => {
-                  self.calculatingRowHeight();
-                  self.getScrollAttr();
-                });
-                self.$forceUpdate();
-              }
-              self.isBusy = false;
-              self.tableLoading = false;
-            });
-          }
-        }
-        ev.cancelBubble = true;
-        ev.stopPropagation();
-        ev.preventDefault();
-      },
-      searchComplate(m, defaultSearch) {
-        var self = this;
-        this.$nextTick(function () {
-          if (typeof this.api !== 'undefined') {
-            self.loaderObj.SearchTable(self.api, self.load, m, defaultSearch);
-          }
-          if (typeof this.source !== 'undefined') {
-            self.load(self.loaderObj.SearchTable(self.source));
-          }
-          if (typeof self.vmodel !== 'undefined') {
-            self.load(self.vmodel);
-          }
-        });
-      },
-      toolbarClickHandler(field) {
-        let self = this;
-        let submitData = {};
-        let action = field.action;
-
-        var tempListData = self.model.getSelectRowData(field);
-        if (tempListData != null) {
-          field.submitListField.forEach((k) => {
-            if (field.isMulti) {
-              submitData[k] = [];
-              for (var ri = 0; ri < tempListData.length; ri++) {
-                submitData[k].push(tempListData[ri][k]);
-              }
-            }
-            else {
-              submitData[k] = tempListData[0][k];
-            }
-          });
-
-          if (field.isSingle && tempListData.length > 0 && field.actionField) {
-            action = tempListData[0][field.actionField];
-          }
-        }
-
-        if (field.flagAttachSearchCondition) {
-          submitData['searchFields'] = self.model.searchModel.searchData;
-        }
-
-        //如果是导出按钮，则直接交给父组件处理
-        if (field.isExport) {
-          self.$emit('toolbarClick', field, submitData);
-          return;
-        }
-
-        this.routerClickHandler(field, submitData, action);
-      },
-      rolRouterClickHandler(field, rowData) {
-        var self = this;
-        var submitData = {};
-        field.submitListField.forEach((k) => {
-          submitData[k] = rowData[k];
-        });
-
-        let action = field.action;
-        if (field.actionField) {
-          action = rowData[field.actionField];
-        }
-
-        this.routerClickHandler(field, submitData, action);
-      },
-      routerClickHandler(field, submitData, action) {
-        let self = this;
-        action = action || field.action;
-
-        var clickAcion = function () {
-          //若不是客户端方法，则直接访问接口
-          if (!field.isClientFuntion) {
-            // 外部框架tab页打开
-            if (field.isFormPageInTab || field.isSearchPageInTab) {
-              submitData = field.getActionPara(submitData).para;
-              if (field.pageStyle) {
-                submitData.pageStyle = field.pageStyle;
-              }
-              self.$common.getDataDrivenOpts().handler.openTab(action, submitData, field.pageTitle, self.model);
-            }
-            else if (field.isBrowserNewTab) {// 浏览器打开
-              submitData = field.getActionPara(submitData).para;
-              let query = self.$common.objectToQueryStr(submitData);
-              window.open(action + query, "_blank");
-            }
-            else {
-              //self.operationLoading = true;
-
-              //Form
-              if (field.isOpenForm) {
-                var dialogOption = {
-                  title: field.pageTitle,
-                  pane: self.$common.getParentPane(self),
-                  content: [{
-                    component: field.navToNewPageName,
-                    attrs: {
-                      //source: data.content,
-                      api: action,
-                      apiParam: field.getActionPara(submitData).para,
-                      showTitle: false,
-                      width: field.dialogWidth + 'px',
-                      height: field.dialogHeight + 'px'
-                    },
-                    on: {
-                      submit(ev) {
-                        if (!field.flagFreshCurrentRow) {
-                          self.model.doAction(ev);
-                        }
-                        self.$forceUpdate();
-                        self.$refs.footer.$forceUpdate();
-                        self.$common.closeDialog(dialogOption.dialog);
-                        self.updateCurrentRow(field);
-                      },
-                      refreshParent() {
-                        self.getPage(1);
-                        self.$common.closeDialog(dialogOption.dialog);
-                      },
-                      closeDialog() {
-                        self.updateCurrentRow(field);
-                      }
-                    }
-                  }]
-                };
-                self.$common.openDialog(dialogOption);
-              }
-              //SearchList
-              else if (field.isOpenList) {
-                var dialogOption = {
-                  title: field.pageTitle,
-                  pane: self.$common.getParentPane(self),
-                  content: [{
-                    component: field.navToNewPageName,
-                    attrs: {
-                      searchConditionApi: field.actionForSearchLayout,
-                      searchDataApi: field.actionForSearch,
-                      apiParam: submitData,
-                      width: field.dialogWidth + 'px',
-                      height: field.dialogHeight + 'px'
-                    },
-                    on: {
-                      refreshParent() {
-                        self.getPage(1);
-                        self.$common.closeDialog(dialogOption.dialog);
-                      },
-                      closeDialog() {
-                        self.updateCurrentRow(field);
-                      }
-                    }
-                  }]
-                };
-                self.$common.openDialog(dialogOption);
-              }
-              //Tabs
-              else if (field.isOpenTabs) {
-                var dialogOption = {
-                  title: field.pageTitle,
-                  pane: self.$common.getParentPane(self),
-                  content: [{
-                    component: field.navToNewPageName,
-                    attrs: {
-                      searchConditionApi: field.actionForSearchLayout,
-                      searchDataApi: field.actionForSearch,
-                      apiParam: submitData,
-                      width: field.dialogWidth + 'px',
-                      height: field.dialogHeight + 'px'
-                    },
-                    on: {
-                    }
-                  }]
-                };
-                self.$common.openDialog(dialogOption);
-              }
-              else {
-                self.operationLoading = true;
-                field.doAction(submitData, (data) => {
-                  self.operationLoading = false;
-                  self.model.doAction({ responseData: data });
-                  self.$forceUpdate();
-                  self.$refs.footer.$forceUpdate();
-                })
-              }
-            }
-          }
-          //执行客户端脚本
-          else {
-            // let parm={submitData:submitData,field:field}
-            // self.$common.excuteFunStr.call(self.model.scripts, field.action,parm);
-            let title=field.pageTitle==undefined ?field.label:field.pageTitle;
-            submitData.actionType=field.actionType;
-            var fun =self.$common.getDataDrivenOpts().handler[action];
-            fun(submitData,title,self.model);
-            // var fun = self.model.scripts.formData[action];
-            // fun(submitData,field);
-          }
-        }
-
-        if (field.alert) {
-          self.$common.confirm(field.alertMsg, field.alertCaption, {
-            confirmButtonText: field.alertOKButtonText,
-            cancelButtonText: field.alertCancelButtonText,
-            //type: 'warning'
-            center: field.alertCenter
-          }).then(() => {
-            clickAcion();
-          }).catch(() => {
-          });
-        }
-        else {
-          clickAcion();
-        }
-      },
-      selectAll($ev) {
-        this.model.listData.forEach((ro) => {
-          if (!this.model.rightMulti || ro[this.model.rightMulti] == 1) {
-            ro.$select = $ev.srcElement.checked;
-          }
-        });
-        this.model.setButtonsDisabled();
-        this.$forceUpdate();
-      },
-      selectOne($ev) {
-        this.model.setButtonsDisabled();
-      },
-      calculatingRowHeight() {
-        let self = this;
-        let count = 0;
-
-        //查询出所有没有设置$heigth的数据并重新设置$heigth
-        let notHeigthData = self.model.listData.filter(item => {
-          return item.$heigth === undefined || item.$heigth <= 0
-        })
-        if (notHeigthData && notHeigthData.length > 0) {
-          notHeigthData.forEach((v, i) => {
-            if (self.$refs["rows." + i] && self.$refs["rows." + i].length > 0) {
-              self.$set(v, "$heigth", self.$refs["rows." + i][0].clientHeight);
-            }
-          });
-        }
-
-        //for (let i = 0; i < self.model.listData.length; i++) {
-        //  if (self.$refs[]) {
-        //  }
-        //}
-        //self.$refs
-      },
-      updateCurrentRow(router) {
-        let self = this;
-        if (router.flagFreshCurrentRow) {
-          self.tableComplate = true;
-          self.model.getCurrentRowApiData(function () {
-            self.$forceUpdate();
-            self.tableComplate = false;
-          });
-        }
-      },
-      importComplete(res) {
-        this.model.doAction(res);
-      },
-      tdRowspan(column, row) {
-        if (!column.show) {
-          return '';
-        }
-
-        //合并行
-        if (row.$rowspan !== 0 && this.model.rowMergedColumns.indexOf(column.id) > -1) {
-          return row.$rowspan;
-        }
-
-        return '';
-      },
-      tdShow(column, row) {
-        if (!column.show) {
-          return false;
-        }
-
-        //合并行
-        if (row.$rowspan === 0 && this.model.rowMergedColumns.indexOf(column.id) > -1) {
-          return false;
-        }
-
-        return true;
-      },
-      closeTabThen(ev) {
-        let self = this;
-        if (self.model.checkCloseTabThen(ev.notification)) {
-          self.model.doAction(ev);
-          self.$forceUpdate();
-          self.$refs.footer.$forceUpdate();
-        }
-      }
-    },
-  }</script>
-<style>
-  .ct-tableParent {
-    overflow: auto;
-    border-bottom: 1px solid #ebeef5;
-    width: 100%;
-    outline: 0;
-  }
-
-  .ct-searchtable .ct-table {
-    min-width: 100%;
-  }
-
-    .ct-searchtable .ct-table th {
-      background-color: #f4f7fa !important;
-      border-top: 1px solid #ebeef5;
-    }
-
-  .ct-searchtable .ct-tr > .ct-td {
-    /*border: 1px solid #e7e8eb;*/
-    border-bottom: 1px solid #e7e8eb;
-    /*border-right: 1px solid #e7e8eb;
-    border-left: 1px solid #e7e8eb;*/
-    padding: 2px 20px;
-    cursor: default;
-    background-color: #ffffff;
-  }
-
-  .shadowLeft {
-    border-right: 1px solid #e7e8eb;
-    box-shadow: 2px 0 3px -1px rgba(0,0,0,0.1);
-  }
-
-  .shadowRight {
-    box-shadow: -2px 0 3px -1px rgba(0,0,0,0.1);
-  }
-
-  .ct-searchtable body:last-child > .ct-td {
-    border-bottom: 0px;
-  }
-
-  .ct-searchtable .ct-tr > .ct-td.nowidth {
-    white-space: nowrap;
-  }
-  /*.ct-searchtable tbody .ct-tr:hover .ct-td {
-    background-color: #ebeef5 !important;
-  }*/
-
-  .ct-table {
-    color: #606266;
-    font-size: 18px;
-    line-height: 40px;
-    min-height: 40px;
-  }
-
-  .ct-table-mini {
-    font-size: 12px;
-    line-height: 26px;
-    min-height: 28px;
-  }
-
-  .ct-table-small {
-    font-size: 14px;
-    line-height: 32px;
-    min-height: 32px;
-  }
-
-  .ct-table-medium {
-    font-size: 16px;
-    line-height: 36px;
-    min-height: 36px;
-  }
-
-  .ct-table .ct-td > .caret-wrapper {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    height: 34px;
-    width: 10px;
-    vertical-align: middle;
-    cursor: pointer;
-    overflow: initial;
-    position: relative;
-  }
-
-    .ct-table .ct-td > .caret-wrapper > .sort-caret {
-      width: 0;
-      height: 0;
-      border: 5px solid transparent;
-      position: absolute;
-      left: 7px;
-    }
-
-      .ct-table .ct-td > .caret-wrapper > .sort-caret.ascending {
-        border-bottom-color: #c0c4cc;
-        top: 5px;
-      }
-
-      .ct-table .ct-td > .caret-wrapper > .sort-caret.descending {
-        border-top-color: #c0c4cc;
-        bottom: 7px;
-      }
-
-  .ct-table .ct-td.select {
-    background-color: #ecf5ff !important;
-  }
-
-  .ct-table .ct-tr:hover .ct-td.select {
-    background-color: #ecf5ff !important;
-  }
-
-  .ct-table .ct-td.asc > .caret-wrapper > .sort-caret.ascending {
-    border-bottom-color: #409eff;
-    top: 5px;
-  }
-
-  .ct-table .ct-td.desc > .caret-wrapper > .sort-caret.descending {
-    border-top-color: #409eff;
-    bottom: 7px;
-  }
-
-
-  .ct-table .cell {
-    /*white-space: nowrap;*/
-    text-overflow: ellipsis;
-    /*min-width: 50px; todo 实际宽度-21即可*/
-    overflow: hidden;
-    /*padding-right: 10px;*/
-  }
-
-  /*强制换行 todo 可去掉改成强制不换行*/
-  .ct-table .cell {
-    /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -ms-word-break: break-all;
-    /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
-    word-break: break-all;
-    /* Instead use this non-standard one: */
-    word-break: break-word;
-    /* 如果浏览器支持的话增加一个连接符(Blink不支持) */
-    -ms-hyphens: auto;
-    -moz-hyphens: auto;
-    -webkit-hyphens: auto;
-    hyphens: auto;
-  }
-
-  .ct-table .lineFeedCell {
-    min-width: 40px;
-    /*padding-right: 10px;*/
-  }
-
-  /*.ct-table .cell.ct-tooltip:hover {
-      text-overflow: inherit;
-      overflow: visible;
-    }*/
-
-  .ct-table .left-fixation {
-    position: sticky;
-  }
-
-  .ct-table .right-fixation {
-    position: sticky;
-  }
-
-  .ct-table .left-fixation-th {
-    position: sticky;
-    top: 0px;
-    z-index: 99;
-  }
-
-  .ct-table .right-fixation-th {
-    position: sticky;
-    top: 0px;
-    z-index: 99;
-  }
-
-  .ct-table .right-no-fixation-th {
-    position: sticky;
-    top: 0px;
-    z-index: 50;
-  }
-
-  .ct-table .ct-searchtable-th {
-    /*text-align: center*/
-  }
-
-  .ct-table .checkbox-td {
-    min-width: 20px;
-    width: 20px;
-    left: 0px;
-  }
-
-    .ct-table .checkbox-td .checkbox-td-1 {
-      vertical-align: inherit;
-    }
-</style>
+<template>
+  <div style="width:100%;" class="ct-searchtable" ref="searchTable">
+    <ct-tableStatistics ref="listHeader" class="ct-search-table-list-header" :tip="model.listHeader" v-if="!isLoading && searchDataStatisticsApi"></ct-tableStatistics>
+    <ct-tabletoolbar ref="toolbar" v-if="!isLoading" :buttons="model.buttons"
+                     @click="toolbarClickHandler($event)"
+                     @importComplete="importComplete"
+                     :optionApi="model.optionApi"
+                     :searchModel="model.searchModel"></ct-tabletoolbar>
+    <ct-tabletip ref="listHeader" class="ct-search-table-list-header" :tip="model.listHeader" v-if="!isLoading"></ct-tabletip>
+    <div v-loading="tableLoading" v-if="!isLoading" :style="{'height':'0px','top':model.tableHeight*0.55+'px'}">
+    </div>
+    <div v-loading="operationLoading">
+    </div>
+    <div class="ct-tableParent" ref="tableParent" v-bind="model.attrs" v-if="!isLoading"
+         :style="{'height':model.tableHeight+'px'}"
+         @scroll="scrollHandle($event)" v-focus="true"
+         @keydown.up="rowKeyDownHandle($event,0)" @keydown.down="rowKeyDownHandle($event,1)"
+         tabindex="-1">
+      <div class="ct-table-content">
+        <table border="0" cellpadding="0" cellspacing="0"
+               :class="['ct-table',model.attrs.size?'ct-table-'+model.attrs.size:'']">
+          <!--表头-->
+          <thead ref="tableHead">
+            <tr class="ct-tr" ref="headTr" v-for="(columns,columnsIndex) in model.columnsArr">
+              <th v-if="model.isMulti && columnsIndex === 0" ref="headLeftThs" class="ct-td left-fixation-th checkbox-td" :class="[model.tdClass]">
+                <input type="checkbox" @click="selectAll($event)" v-model="model.selectAll" class="checkbox-td-1" />
+              </th>
+              <th :ref="column.fixed?(column.fixed==='left'?'headLeftThs':'headRightThs'):'headThs'" v-for="(column,colIndex) in columns"
+                  v-if="column.show" class="ct-td ct-searchtable-th"
+                  :rowspan="column.rowspan"
+                  :colspan="column.colspan"
+                  :class="[colHasWidth[colIndex],column.sortAction,model.tdClass,
+                  colIndex === leftShadow?'shadowLeft':null,
+                  colIndex === rightShadow?'shadowRight':null,
+                  column.fixed === 'left'?'left-fixation-th':null,
+                  column.fixed === 'right'?'right-fixation-th':null,
+                  column.width === undefined?'ct-table-auto':null,
+                  typeof column.fixed === 'undefined'?'right-no-fixation-th':null]"
+                  @mousemove="thMouseMoveHandle($event)" @mousedown="thMouseDownHandle($event,colIndex)"
+                  v-bind="column.attrs">
+
+                <span>{{column.name}}</span>
+                <span class="caret-wrapper" v-if="column.sort" @click="toSort($event,column);" @contextmenu.prevent="clearSort($event,column);">
+                  <i class="sort-caret ascending" @click.left="toSort($event,column,'asc')" @contextmenu.prevent="clearSort($event,column);"></i>
+                  <i class="sort-caret descending" @click.left="toSort($event,column,'desc')" @contextmenu.prevent="clearSort($event,column);"></i>
+                </span>
+              </th>
+
+              <!--<th v-if="model.rowRouter.length > 0" class="ct-td tdFiexd" :class="[-1 === rightShadow?'shadowRight':null]" :style="{'min-width':'20px','transform':'translate('+scrollRight+'px, '+scrollTop+'px)'}">
+                操作
+              </th>-->
+            </tr>
+          </thead>
+          <!--表体-->
+          <tbody>
+            <!--这一行仅用于设置未加载数据时的列宽-->
+            <!--<tr v-if="model.listData.length === 0" class="ct-tr" style="visibility: hidden;">
+              <td v-if="model.isMulti">
+              </td>
+              <td v-for="(column,colIndex) in model.dataFieldcolumns" class="ct-td" v-if="column.show">
+                <div :style="{'width': column.width + 'px'}">
+                </div>
+              </td>
+            </tr>-->
+            <!--可视区域的行数据-->
+            <tr v-for="(row,rowindex) in model.listData"
+                v-if="pageRowMin <= rowindex && rowindex <= pageRowMax"
+                :ref="'rows.'+rowindex" @click="rowClickHandle($event,rowindex)"
+                class="ct-tr"
+                :style="row.$style">
+              <td v-if="model.isMulti" class="ct-td tdFiexd left-fixation checkbox-td" :class="[model.tdClass]" align="center">
+                <input v-if="!model.rightMulti || row[model.rightMulti] == 1" type="checkbox" v-model="row.$select" @change="selectOne($event)" class="checkbox-td-1" />
+              </td>
+              <td :ref="column.fixed?(column.fixed==='left'?'headLeftTds':'headRightTds'):null"
+                  v-for="(column,colIndex) in model.dataFieldcolumns"
+                  v-if="tdShow(column, row)"
+                  :rowspan="tdRowspan(column, row)"
+                  class="ct-td"
+                  :class="[colHasWidth[colIndex],model.tdClass,
+                  colIndex === leftShadow?'shadowLeft':null,
+                  colIndex === rightShadow?'shadowRight':null,
+                  column.fixed === 'left'?'left-fixation':null,
+                  column.width === undefined?'ct-table-auto':null,
+                  column.fixed === 'right'?'right-fixation':null]"
+                  v-bind="column.attrs">
+                <!--操作列-->
+                <div v-if="column.id==='operation'" class="div_allinline" :class="column.autoRowHeight ? 'lineFeedCell':'cell'">
+                  <ct-tablecurrency v-for="(router,rowRouterIndex) in model.rowRouter" :key="rowRouterIndex" v-if="!router.rightField || row[router.rightField] == 1" :isOperationalColumn="true"
+                                    :router="router" :colValue="router.label" :rowData="row" @click="rolRouterClickHandler">
+                  </ct-tablecurrency>
+                </div>
+
+                <!--可点击的列-->
+                <ct-tablecurrency v-else-if="column.router" :align="column.attrs.align" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :router="column.router" :colValue="row[column.id]" :rowData="row"
+                                  @click="rolRouterClickHandler">
+                </ct-tablecurrency>
+
+                <!--正常的列-->
+                <div v-else-if="typeof column.template === 'undefined'" :class="column.autoRowHeight ? 'lineFeedCell':'cell'">
+                  {{row[column.id]}}
+                </div>
+
+                <!--模版列(启用)-->
+                <!--<component v-else :is="column.template(row).component" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :vmodel="column.template(row)" :style="{'width': column.width + 'px'}">
+                  <template slot="value">
+                    {{row[column.id]}}
+                  </template>
+                </component>-->
+              </td>
+            </tr>
+
+            <!--适配滚动条-->
+            <tr v-else v-bind:style="{ height: row.$heigth + 'px' }"></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <ct-tabletip ref="listFooter" class="ct-search-table-list-footer" :tip="model.listFooter" v-if="!isLoading"></ct-tabletip>
+    <ct-tabletip ref="footer" class="ct-search-table-footer" :tip="model.footer" v-if="!isLoading"></ct-tabletip>
+    <div v-if="isLoading && searchLoading" v-loading="isLoading" style="top:30px;">
+    </div>
+  </div>
+</template>
+<script>
+  import dynamicElement from '../../mixins/dynamicElement';
+  import dynamicTableTip from './dynamicTableTip.vue';
+  import dynamicTableToolbar from './dynamicTableToolbar.vue';
+  import dynamicTableStatistics from './dynamicTableStatistics.vue';
+  export default {
+    name: 'ct-searchtable',
+    mixins: [dynamicElement],
+    components: {
+      'ct-tabletip': dynamicTableTip,
+      'ct-tabletoolbar': dynamicTableToolbar,
+      'ct-tableStatistics': dynamicTableStatistics
+    },
+    props: {
+      vmodel: Object,
+      api: String,
+      searchDataStatisticsApi: String
+    },
+    computed: {
+    },
+    data() {
+      return {
+        currentTh: null,
+        isLoading: true,
+        searchLoading: true,
+        tableLoading: false,//表格等待
+        operationLoading: false,//操作等待
+        tempSearchModel: null,
+        isBusy: false,
+        screenComplate: false,
+        tableComplate: false,
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollRight: 0,
+        leftShadow: -1,//左阴影个数
+        rightShadow: -1,//右阴影个数
+        currentRow: null,
+        colHasWidth: {},//有无列宽集合
+        test: true,
+        firstRow: 0,//展示出来可视的第一行号
+        pageRowMin: 0,//页面实际的第一行号
+        pageRowMax: 100,//页面实际的第后行号
+        displayRowNumber: 30
+      }
+    },
+    activated() {
+      this.$nextTick(() => {
+        this.setTableHeight();
+      })
+    },
+    methods: {
+      load(data) {
+        var self = this;
+        self.model = data;
+        self.model.$vue = self;
+        self.model.columns.forEach((v, vi) => {
+          if (v.fixed === 'left') {
+            self.leftShadow = vi;
+          }
+          if (v.fixed === 'right' && self.rightShadow < 0) {
+            self.rightShadow = vi;
+          }
+          if (typeof v.width !== 'undefined') {
+            self.colHasWidth[vi] = '';
+          }
+          else {
+            self.colHasWidth[vi] = 'nowidth';
+          }
+        });
+        
+        self.isLoading = false;
+        self.$forceUpdate();
+        this.model.scripts.formData = this.model.formData;
+        this.model.scripts.formData.formTable = this.model;
+
+        self.$emit('loaded');
+        self.$emit('showTitle');
+        if (this.tempSearchModel !== null) {
+          self.model.searchModel = this.tempSearchModel;
+        }
+        //自动查询 调用合并列
+        if (self.model.rowMergedColumns.length > 0 && self.model.listData.length > 0) {
+          self.model.setRow(self.model.listData);
+        }
+        self.tableComplate = true;
+        this.setTableHeight();
+        this.$nextTick(() => {
+          window.addEventListener("resize", (ev) => {
+            self.setTableHeight();
+          });
+          //self.rowColorChange();
+          self.fiexdHead();
+
+          //当表格没有占满表格框时，主动请求下一页
+          var next = function (rtn) {
+            if (rtn) {
+              self.$forceUpdate();
+              self.$nextTick(() => {
+                if (self.$refs.tableParent.scrollHeight <= self.$refs.tableParent.offsetHeight) {
+                  self.tableLoading = true;
+                  self.model.nextPage(next);
+                }
+                else {
+                  self.tableLoading = false;
+                  self.rowColorChange();
+
+                  self.calculatingRowHeight();
+                }
+              });
+            }
+            else {
+              self.tableLoading = false;
+            }
+          }
+          next(true);
+
+          self.setfixedSize();
+        });
+      },
+      thMouseMoveHandle(ev) {
+        if (ev.offsetX > ev.currentTarget.offsetWidth - 10) {
+          ev.currentTarget.style.cursor = 'col-resize';
+          ev.currentTarget.canResize = true;
+        }
+        else {
+          ev.currentTarget.style.cursor = 'default';
+          ev.currentTarget.canResize = false;
+        }
+      },
+      thMouseDownHandle(ev, colIndex) {
+        var self = this;
+        var col = self.model.columns[colIndex];
+        if (ev.currentTarget.canResize) {
+          ev.currentTarget.isDown = true;
+          ev.currentTarget.oldX = ev.x;
+          ev.currentTarget.oldWidth = ev.currentTarget.offsetWidth;
+          this.currentTh = ev.currentTarget;
+          var MouseUpHandle = function () {
+            self.currentTh.isDown = false;
+            self.currentTh = null;
+            document.removeEventListener("mouseup", MouseUpHandle, false);
+            document.removeEventListener("mousemove", MouseMoveHandle, false);
+
+            //如果是高度可变的列，重新计算整个表的高度
+            if (col.autoRowHeight) {
+              self.model.listData.forEach(v => {
+                v.$heigth = undefined;
+              });
+              self.$nextTick(() => {
+                self.calculatingRowHeight();
+              })
+            }
+          }
+          var MouseMoveHandle = function () {
+            var ev1 = event || e;
+            if (self.currentTh.isDown) {
+              if (self.currentTh) {
+                if (typeof col.width === 'undefined') {
+                  self.colHasWidth[colIndex] = '';
+                  self.$forceUpdate();
+                  self.$nextTick(() => {
+                    var index = self.model.selectIndex;
+                    for (var j = 0; j < self.$refs['rows.' + index][0].children.length; j++) {
+                      self.$refs['rows.' + index][0].children[j].classList.add('select');
+                    }
+                  });
+                }
+
+                //col.width = (self.currentTh.oldWidth + (ev1.x - self.currentTh.oldX));
+                self.$set(col, "width", (self.currentTh.oldWidth + (ev1.x - self.currentTh.oldX)));
+                if (typeof self.$refs.headTr !== 'undefined' && self.$refs.headTr.length > 0) {
+                  self.currentTh.style.minWidth = col.width + 'px';
+                  self.currentTh.style.width = col.width + 'px';
+                  self.getScrollAttr();
+                }
+              }
+            }
+          }
+          document.addEventListener("mouseup", MouseUpHandle, false);
+          document.addEventListener("mousemove", MouseMoveHandle, false);
+        }
+      },
+      getPage(index) {
+        var self = this;
+        if (typeof self.$refs.tableParent !== 'undefined') {
+          self.$refs.tableParent.scrollTop = 0;
+          self.$refs.tableParent.scrollLeft = 0;
+          self.scrollTop = 0;
+          self.scrollLeft = 0;
+        }
+        var next = function (rtn) {
+          if (rtn) {
+            self.$forceUpdate();
+            self.$nextTick(() => {
+              if (self.$refs.tableParent.scrollHeight <= self.$refs.tableParent.offsetHeight) {
+                self.tableLoading = true;
+                self.model.nextPage(next);
+              }
+              else {
+                self.tableLoading = false;
+                self.rowColorChange();
+                self.resetScroll();
+                self.calculatingRowHeight();
+                self.getScrollAttr();
+              }
+              self.setfixedSize();
+            });
+          }
+          else {
+            self.tableLoading = false;
+            self.rowColorChange();
+          }
+          self.$emit('searchComplate');
+        }
+        self.tableLoading = true;
+        this.model.getPage(index, next);
+      },
+      toSort(ev, col, action) {
+        var self = this;
+        this.model.toSort(col, action, () => {
+          self.$forceUpdate();
+          self.getScrollAttr();
+        });
+        ev.cancelBubble = true;
+        ev.stopPropagation();
+      },
+      clearSort(ev, col) {
+        var self = this;
+        this.model.clearSort(col, () => {
+          self.$forceUpdate();
+          self.getScrollAttr();
+        });
+        ev.cancelBubble = true;
+        ev.stopPropagation();
+      },
+      fiexdHead() {
+        this.$nextTick(() => {
+          var self = this;
+          var tableCont = this.$refs.tableParent;
+          function scrollHandle(e) {
+            self.getScrollAttr();
+          }
+          tableCont.addEventListener('scroll', self.getScrollAttr);
+        });
+      },
+      removeScrollEvent() {
+        var tableCont = this.$refs.tableParent;
+        //移除事件监听器
+        tableCont.removeEventListener("scroll", this.getScrollAttr, false);
+        //tableCont.removeEventListener("scroll", this.scrollHandle, false);
+      },
+      addScrollEvent() {
+        var tableCont = this.$refs.tableParent;
+        //添加事件监听器
+        tableCont.addEventListener("scroll", this.getScrollAttr, false);
+      },
+      freezeData() {
+        Object.freeze(this.model.listData);
+      },
+      setfixedSize() {
+        if (typeof this.$refs.headTr !== 'undefined' && this.$refs.headTr.length > 0) {
+          let fixedSize = 0;
+          let j = 0;
+          let fixationThArr = this.$refs.headTr[0].getElementsByClassName('left-fixation-th');
+          if (fixationThArr.length > 0) {
+            if (this.model.isMulti) {
+              fixedSize = fixationThArr[j++].offsetWidth
+            }
+            for (let i = 0; i < this.model.columns.length; i++) {
+              if (this.model.columns[i].fixed === 'left' && this.model.columns[i].show) {
+                this.model.columns[i].fixedSize = fixedSize;
+                fixedSize = fixedSize + fixationThArr[j++].offsetWidth;
+              }
+            }
+
+            fixedSize = 0;
+            fixationThArr = this.$refs.headTr[0].getElementsByClassName('right-fixation-th');
+            j = fixationThArr.length - 1;
+            for (let i = this.model.columns.length - 1; i > 0; i--) {
+              if (this.model.columns[i].fixed === 'right' && this.model.columns[i].show) {
+                this.model.columns[i].fixedSize = fixedSize;
+                fixedSize = fixedSize + fixationThArr[j--].offsetWidth;
+              }
+            }
+          }
+        }
+      },
+      getScrollAttr(e) {
+        if (typeof this.$refs.tableParent !== 'undefined' && typeof this.$refs.headThs !== 'undefined') {
+
+          this.calculatingRowHeight();
+
+          var scrollTop = this.$refs.tableParent.scrollTop;
+          var scrollLeft = this.$refs.tableParent.scrollLeft;
+          var scrollRight = this.$refs.tableParent.scrollWidth - scrollLeft - this.$refs.tableParent.clientWidth;
+
+          //计算可视范围的第一条数据
+          let index = 0;
+          let topHeigth = 0;
+          for (; index < this.model.listData.length; index++) {
+            if (topHeigth >= scrollTop) {
+              break;
+            }
+            else {
+              topHeigth = topHeigth + this.model.listData[index].$heigth;
+            }
+          }
+          this.firstRow = index - 1;
+          this.setTrLazyLoading();
+          //若每行高度是固定的，可直接使用下面方法即可
+          //this.firstRow = parseInt(scrollTop / 33);
+
+          this.scrollTop = scrollTop;
+          this.scrollLeft = scrollLeft;
+          this.scrollRight = scrollRight;
+        }
+      },
+      setTrLazyLoading() {
+        this.pageRowMax = this.firstRow + this.displayRowNumber;
+        this.pageRowMin = this.firstRow - this.displayRowNumber;
+        if (this.pageRowMin > 0 && this.model.listData[this.pageRowMin].$rowspan === 0) {
+          for (let i = this.pageRowMin; i >= 0; i--) {
+            if (this.model.listData[i].$rowspan > 0) {
+              this.pageRowMin = i;
+              break;
+            }
+          }
+        }
+
+        //debugger
+        //let index = this.model.listData.length - 1;
+        //let isSet = false;
+        //for (; index >= 0; index--) {
+        //  if (Math.abs(index - this.firstRow) < this.displayRowNumber || typeof (this.model.listData[index].$heigth) === 'undefined') {
+        //    //this.$set(this.model.listData[index], "$trLazyLoadingShow", true);
+        //  }
+        //  else {
+        //    if (index < this.firstRow && !isSet) {
+        //      if (this.model.listData[index].$rowspan === 0) {
+        //        this.$set(this.model.listData[index], "$trLazyLoadingShow", true);
+        //        continue;
+        //      }
+        //      else {
+        //        isSet = true;
+        //        this.$set(this.model.listData[index], "$trLazyLoadingShow", true);
+        //        continue;
+        //      }
+        //    }
+        //    this.$set(this.model.listData[index], "$trLazyLoadingShow", false);
+        //  }
+        //}
+      },
+      setTableHeight() {
+        var self = this;
+        this.$nextTick(() => {
+          if (this.$refs.searchTable && this.$refs.toolbar && this.$refs.searchTable.parentElement) {
+            var h1 = this.$refs.searchTable.parentElement.offsetHeight | 0;
+            var h2 = this.$refs.searchTable.offsetTop | 0;
+            var h3 = this.$refs.toolbar.$el.offsetHeight | 0;
+            var h4 = this.$refs.footer.$el.offsetHeight | 0;
+            var h5 = this.$refs.listHeader.$el.offsetHeight | 0;
+            var h6 = this.$refs.listFooter.$el.offsetHeight | 0;
+            let tableHeight = h1 - h2 - h3 - h4 - h5 - h6 - 22;
+            this.model.tableHeight = tableHeight < 40 ? 350 : tableHeight;
+            this.$nextTick(() => {
+              self.getScrollAttr();
+            });
+          }
+        });
+      },
+      scrollHandle(ev) {
+        var self = this;
+        if ((this.$refs.tableParent.scrollTop + this.$refs.tableParent.clientHeight) >= (this.$refs.tableParent.scrollHeight - 5)) {
+          if (!this.isBusy) {
+            self.isBusy = true;
+            self.tableLoading = true;
+            self.model.nextPage((rtn) => {
+              if (rtn) {
+                self.$nextTick(() => {
+                  self.calculatingRowHeight();
+                  self.getScrollAttr();
+
+                });
+                self.$forceUpdate();
+              }
+              self.isBusy = false;
+              self.tableLoading = false;
+            });
+          }
+        }
+        ev.cancelBubble = true;
+        ev.stopPropagation();
+      },
+      rowClickHandle(ev, index) {
+        this.model.selectIndex = index;
+        this.rowColorChange();
+        ev.cancelBubble = true;
+        ev.stopPropagation();
+      },
+      rowColorChange() {
+        var index = this.model.selectIndex;
+        if (typeof this.$refs['rows.' + index] !== "undefined" && this.currentRow !== this.$refs['rows.' + index][0]) {
+          if (this.currentRow !== null) {
+            for (var i = 0; i < this.currentRow.children.length; i++) {
+              this.currentRow.children[i].classList.remove('select');
+            }
+          }
+          if(this.$refs['rows.' + index][0])
+          {
+            for (var j = 0; j < this.$refs['rows.' + index][0].children.length; j++) {
+              this.$refs['rows.' + index][0].children[j].classList.add('select');
+            }
+          }
+          this.currentRow = this.$refs['rows.' + index][0]||null;
+        }
+      },
+      resetScroll: function () {
+        var self = this;
+        if (self.$refs.tableParent.scrollTop > self.$refs['rows.' + self.model.selectIndex][0].offsetTop - self.$refs.tableHead.offsetHeight) {
+          self.$refs.tableParent.scrollTop = self.$refs['rows.' + self.model.selectIndex][0].offsetTop - self.$refs.tableHead.offsetHeight;
+        }
+        if (self.$refs.tableParent.scrollTop + self.$refs.tableParent.clientHeight <= self.$refs['rows.' + self.model.selectIndex][0].offsetTop + self.$refs['rows.' + self.model.selectIndex][0].offsetHeight) {
+          self.$refs.tableParent.scrollTop = self.$refs['rows.' + self.model.selectIndex][0].offsetTop - self.$refs.tableParent.clientHeight + self.$refs['rows.' + self.model.selectIndex][0].offsetHeight;
+        }
+        self.scrollTop = self.$refs.tableParent.scrollTop;
+      },
+      rowKeyDownHandle(ev, action) {
+        var self = this;
+        if (action === 1) {
+          this.model.downKey();
+        }
+        else {
+          this.model.upKey();
+        }
+        this.rowColorChange();
+        this.resetScroll();
+        if (!this.isBusy) {
+          if (this.model.selectIndex === this.model.listData.length - 1) {
+            self.isBusy = true;
+            self.tableLoading = true;
+            self.model.nextPage((rtn) => {
+              if (rtn) {
+                self.$nextTick(() => {
+                  self.calculatingRowHeight();
+                  self.getScrollAttr();
+                });
+                self.$forceUpdate();
+              }
+              self.isBusy = false;
+              self.tableLoading = false;
+            });
+          }
+        }
+        ev.cancelBubble = true;
+        ev.stopPropagation();
+        ev.preventDefault();
+      },
+      searchComplate(m, defaultSearch) {
+        var self = this;
+        this.$nextTick(function () {
+          if (typeof this.api !== 'undefined') {
+            self.loaderObj.SearchTable(self.api, self.load, m, defaultSearch);
+          }
+          if (typeof this.source !== 'undefined') {
+            self.load(self.loaderObj.SearchTable(self.source));
+          }
+          if (typeof self.vmodel !== 'undefined') {
+            self.load(self.vmodel);
+          }
+        });
+      },
+      toolbarClickHandler(field) {
+        let self = this;
+        let submitData = {};
+        let action = field.action;
+
+        var tempListData = self.model.getSelectRowData(field);
+        if (tempListData != null) {
+          field.submitListField.forEach((k) => {
+            if (field.isMulti) {
+              submitData[k] = [];
+              for (var ri = 0; ri < tempListData.length; ri++) {
+                submitData[k].push(tempListData[ri][k]);
+              }
+            }
+            else {
+              submitData[k] = tempListData[0][k];
+            }
+          });
+
+          if (field.isSingle && tempListData.length > 0 && field.actionField) {
+            action = tempListData[0][field.actionField];
+          }
+        }
+
+        if (field.flagAttachSearchCondition) {
+          submitData['searchFields'] = self.model.searchModel.searchData;
+        }
+
+        //如果是导出按钮，则直接交给父组件处理
+        if (field.isExport) {
+          self.$emit('toolbarClick', field, submitData);
+          return;
+        }
+
+        this.routerClickHandler(field, submitData, action);
+      },
+      rolRouterClickHandler(field, rowData) {
+        var self = this;
+        var submitData = {};
+        field.submitListField.forEach((k) => {
+          submitData[k] = rowData[k];
+        });
+
+        let action = field.action;
+        if (field.actionField) {
+          action = rowData[field.actionField];
+        }
+
+        this.routerClickHandler(field, submitData, action);
+      },
+      routerClickHandler(field, submitData, action) {
+        let self = this;
+        action = action || field.action;
+
+        var clickAcion = function () {
+          //若不是客户端方法，则直接访问接口
+          if (!field.isClientFuntion) {
+            // 外部框架tab页打开
+            if (field.isFormPageInTab || field.isSearchPageInTab) {
+              submitData = field.getActionPara(submitData).para;
+              if (field.pageStyle) {
+                submitData.pageStyle = field.pageStyle;
+              }
+              self.$common.getDataDrivenOpts().handler.openTab(action, submitData, field.pageTitle, self.model);
+            }
+            else if (field.isBrowserNewTab) {// 浏览器打开
+              submitData = field.getActionPara(submitData).para;
+              let query = self.$common.objectToQueryStr(submitData);
+              window.open(action + query, "_blank");
+            }
+            else {
+              //self.operationLoading = true;
+
+              //Form
+              if (field.isOpenForm) {
+                var dialogOption = {
+                  title: field.pageTitle,
+                  pane: self.$common.getParentPane(self),
+                  content: [{
+                    component: field.navToNewPageName,
+                    attrs: {
+                      //source: data.content,
+                      api: action,
+                      apiParam: field.getActionPara(submitData).para,
+                      showTitle: false,
+                      width: field.dialogWidth + 'px',
+                      height: field.dialogHeight + 'px'
+                    },
+                    on: {
+                      submit(ev) {
+                        if (!field.flagFreshCurrentRow) {
+                          self.model.doAction(ev);
+                        }
+                        self.$forceUpdate();
+                        self.$refs.footer.$forceUpdate();
+                        self.$common.closeDialog(dialogOption.dialog);
+                        self.updateCurrentRow(field);
+                      },
+                      refreshParent() {
+                        self.getPage(1);
+                        self.$common.closeDialog(dialogOption.dialog);
+                      },
+                      closeDialog() {
+                        self.updateCurrentRow(field);
+                      }
+                    }
+                  }]
+                };
+                self.$common.openDialog(dialogOption);
+              }
+              //SearchList
+              else if (field.isOpenList) {
+                var dialogOption = {
+                  title: field.pageTitle,
+                  pane: self.$common.getParentPane(self),
+                  content: [{
+                    component: field.navToNewPageName,
+                    attrs: {
+                      searchConditionApi: field.actionForSearchLayout,
+                      searchDataApi: field.actionForSearch,
+                      apiParam: submitData,
+                      width: field.dialogWidth + 'px',
+                      height: field.dialogHeight + 'px'
+                    },
+                    on: {
+                      refreshParent() {
+                        self.getPage(1);
+                        self.$common.closeDialog(dialogOption.dialog);
+                      },
+                      closeDialog() {
+                        self.updateCurrentRow(field);
+                      }
+                    }
+                  }]
+                };
+                self.$common.openDialog(dialogOption);
+              }
+              //Tabs
+              else if (field.isOpenTabs) {
+                var dialogOption = {
+                  title: field.pageTitle,
+                  pane: self.$common.getParentPane(self),
+                  content: [{
+                    component: field.navToNewPageName,
+                    attrs: {
+                      searchConditionApi: field.actionForSearchLayout,
+                      searchDataApi: field.actionForSearch,
+                      apiParam: submitData,
+                      width: field.dialogWidth + 'px',
+                      height: field.dialogHeight + 'px'
+                    },
+                    on: {
+                    }
+                  }]
+                };
+                self.$common.openDialog(dialogOption);
+              }
+              else {
+                self.operationLoading = true;
+                field.doAction(submitData, (data) => {
+                  self.operationLoading = false;
+                  self.model.doAction({ responseData: data });
+                  self.$forceUpdate();
+                  self.$refs.footer.$forceUpdate();
+                })
+              }
+            }
+          }
+          //执行客户端脚本
+          else {
+            // let parm={submitData:submitData,field:field}
+            // self.$common.excuteFunStr.call(self.model.scripts, field.action,parm);
+            let title=field.pageTitle==undefined ?field.label:field.pageTitle;
+            submitData.actionType=field.actionType;
+            var fun =self.$common.getDataDrivenOpts().handler[action];
+            fun(submitData,title,self.model);
+            // var fun = self.model.scripts.formData[action];
+            // fun(submitData,field);
+          }
+        }
+
+        if (field.alert) {
+          self.$common.confirm(field.alertMsg, field.alertCaption, {
+            confirmButtonText: field.alertOKButtonText,
+            cancelButtonText: field.alertCancelButtonText,
+            //type: 'warning'
+            center: field.alertCenter
+          }).then(() => {
+            clickAcion();
+          }).catch(() => {
+          });
+        }
+        else {
+          clickAcion();
+        }
+      },
+      selectAll($ev) {
+        this.model.listData.forEach((ro) => {
+          if (!this.model.rightMulti || ro[this.model.rightMulti] == 1) {
+            ro.$select = $ev.srcElement.checked;
+          }
+        });
+        this.model.setButtonsDisabled();
+        this.$forceUpdate();
+      },
+      selectOne($ev) {
+        this.model.setButtonsDisabled();
+      },
+      calculatingRowHeight() {
+        let self = this;
+        let count = 0;
+
+        //查询出所有没有设置$heigth的数据并重新设置$heigth
+        let notHeigthData = self.model.listData.filter(item => {
+          return item.$heigth === undefined || item.$heigth <= 0
+        })
+        if (notHeigthData && notHeigthData.length > 0) {
+          notHeigthData.forEach((v, i) => {
+            if (self.$refs["rows." + i] && self.$refs["rows." + i].length > 0) {
+              self.$set(v, "$heigth", self.$refs["rows." + i][0].clientHeight);
+            }
+          });
+        }
+
+        //for (let i = 0; i < self.model.listData.length; i++) {
+        //  if (self.$refs[]) {
+        //  }
+        //}
+        //self.$refs
+      },
+      updateCurrentRow(router) {
+        let self = this;
+        if (router.flagFreshCurrentRow) {
+          self.tableComplate = true;
+          self.model.getCurrentRowApiData(function () {
+            self.$forceUpdate();
+            self.tableComplate = false;
+          });
+        }
+      },
+      importComplete(res) {
+        this.model.doAction(res);
+      },
+      tdRowspan(column, row) {
+        if (!column.show) {
+          return '';
+        }
+
+        //合并行
+        if (row.$rowspan !== 0 && this.model.rowMergedColumns.indexOf(column.id) > -1) {
+          return row.$rowspan;
+        }
+
+        return '';
+      },
+      tdShow(column, row) {
+        if (!column.show) {
+          return false;
+        }
+
+        //合并行
+        if (row.$rowspan === 0 && this.model.rowMergedColumns.indexOf(column.id) > -1) {
+          return false;
+        }
+
+        return true;
+      },
+      closeTabThen(ev) {
+        let self = this;
+        if (self.model.checkCloseTabThen(ev.notification)) {
+          self.model.doAction(ev);
+          self.$forceUpdate();
+          self.$refs.footer.$forceUpdate();
+        }
+      }
+    },
+  }</script>
+<style>
+  .ct-tableParent {
+    overflow: auto;
+    border-bottom: 1px solid #ebeef5;
+    width: 100%;
+    outline: 0;
+  }
+
+  .ct-searchtable .ct-table {
+    min-width: 100%;
+    border-collapse: collapse;
+  }
+
+    .ct-searchtable .ct-table th {
+      background-color: #f4f7fa !important;
+      border-top: 1px solid #ebeef5;
+    }
+
+  .ct-searchtable .ct-tr > .ct-td {
+    /*border: 1px solid #e7e8eb;
+    border-bottom: 1px solid #e7e8eb;
+    border-right: 1px solid #e7e8eb;
+    border-left: 1px solid #e7e8eb;*/
+    padding: 2px 20px;
+    cursor: default;
+    background-color: #ffffff;
+  }
+  .ct-searchtable .ct-tr > .ct-td1 {    
+    border-right: 1px solid #e7e8eb;
+    border-left: 1px solid #e7e8eb;
+  }
+  .ct-searchtable .ct-tr:last-child > .ct-td1 {    
+    border-bottom: 1px solid #e7e8eb;
+  }
+  .ct-searchtable .ct-tr > .ct-td2 {
+    border-bottom: 1px solid #e7e8eb;
+  }
+  .ct-searchtable .ct-tr > .ct-td3 {    
+    border: 1px solid #e7e8eb;
+  }
+
+  .shadowLeft {
+    border-right: 1px solid #e7e8eb;
+    box-shadow: 2px 0 3px -1px rgba(0,0,0,0.1);
+  }
+
+  .shadowRight {
+    box-shadow: -2px 0 3px -1px rgba(0,0,0,0.1);
+  }
+
+  .ct-searchtable body:last-child > .ct-td {
+    border-bottom: 0px;
+  }
+
+  .ct-searchtable .ct-tr > .ct-td.nowidth {
+    white-space: nowrap;
+  }
+  /*.ct-searchtable tbody .ct-tr:hover .ct-td {
+    background-color: #ebeef5 !important;
+  }*/
+
+  .ct-table {
+    color: #606266;
+    font-size: 18px;
+    line-height: 40px;
+    min-height: 40px;
+  }
+
+  .ct-table-mini {
+    font-size: 12px;
+    line-height: 26px;
+    min-height: 28px;
+  }
+
+  .ct-table-small {
+    font-size: 14px;
+    line-height: 32px;
+    min-height: 32px;
+  }
+
+  .ct-table-medium {
+    font-size: 16px;
+    line-height: 36px;
+    min-height: 36px;
+  }
+
+  .ct-table .ct-td > .caret-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    height: 34px;
+    width: 10px;
+    vertical-align: middle;
+    cursor: pointer;
+    overflow: initial;
+    position: relative;
+  }
+
+    .ct-table .ct-td > .caret-wrapper > .sort-caret {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      position: absolute;
+      left: 7px;
+    }
+
+      .ct-table .ct-td > .caret-wrapper > .sort-caret.ascending {
+        border-bottom-color: #c0c4cc;
+        top: 5px;
+      }
+
+      .ct-table .ct-td > .caret-wrapper > .sort-caret.descending {
+        border-top-color: #c0c4cc;
+        bottom: 7px;
+      }
+
+  .ct-table .ct-td.select {
+    background-color: #ecf5ff !important;
+  }
+
+  .ct-table .ct-tr:hover .ct-td.select {
+    background-color: #ecf5ff !important;
+  }
+
+  .ct-table .ct-td.asc > .caret-wrapper > .sort-caret.ascending {
+    border-bottom-color: #409eff;
+    top: 5px;
+  }
+
+  .ct-table .ct-td.desc > .caret-wrapper > .sort-caret.descending {
+    border-top-color: #409eff;
+    bottom: 7px;
+  }
+
+
+  .ct-table .cell {
+    /*white-space: nowrap;*/
+    text-overflow: ellipsis;
+    /*min-width: 50px; todo 实际宽度-21即可*/
+    overflow: hidden;
+    /*padding-right: 10px;*/
+  }
+
+  /*强制换行 todo 可去掉改成强制不换行*/
+  .ct-table .cell {
+    /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+    /* 如果浏览器支持的话增加一个连接符(Blink不支持) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+
+  .ct-table .lineFeedCell {
+    min-width: 40px;
+    /*padding-right: 10px;*/
+  }
+
+  /*.ct-table .cell.ct-tooltip:hover {
+      text-overflow: inherit;
+      overflow: visible;
+    }*/
+
+  .ct-table .left-fixation {
+    position: sticky;
+  }
+
+  .ct-table .right-fixation {
+    position: sticky;
+  }
+
+  .ct-table .left-fixation-th {
+    position: sticky;
+    top: 0px;
+    z-index: 99;
+  }
+
+  .ct-table .right-fixation-th {
+    position: sticky;
+    top: 0px;
+    z-index: 99;
+  }
+
+  .ct-table .right-no-fixation-th {
+    position: sticky;
+    top: 0px;
+    z-index: 50;
+  }
+
+  .ct-table .ct-searchtable-th {
+    /*text-align: center*/
+  }
+
+  .ct-table .checkbox-td {
+    min-width: 20px;
+    width: 20px;
+    left: 0px;
+  }
+
+    .ct-table .checkbox-td .checkbox-td-1 {
+      vertical-align: inherit;
+    }
+</style>