@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-table/index.vue

@@ -0,0 +1,1088 @@
+<template>
+  <div ref="root" class="ks-table-box">
+    <div ref="verticalTableWrapper" class="ks-table-wrapper">
+      <div ref="verticalTable" class="ks-table">
+        <ks-sticky :offset-top="offsetTop" :container="stickyContainer" @scroll="stickyScroll">
+          <div ref="title" v-if="isHorizontal" class="ks-table__title">
+            <slot name="ksTableTitle">
+              <div class="ks-table__title-left" @click="closeHorizontal">
+                <img src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-table/back.png"/>
+              <div>{{headerTitle}}</div>
+              </div>
+              <div class="ks-table__title-right" @click="closeHorizontal">
+                <img src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-table/horizontal.png"/>
+              </div>
+            </slot>
+          </div>
+          <div class="ks-table__header-wrapper">
+            <div ref="head" class="ks-table__header">
+              <table cellspacing="0" cellpadding="0" border="0" :width="`${tableWidth}px`" :class="{ 'ks-table-border': border }">
+                <thead>
+                  <tr :style="{ height: `${headerHeight}px`, lineHeight: `${headerHeight}px` }">
+                    <td v-if="selection" width="40" class="checkbox-column" :class="checkboxClass" @click.stop="handleCheckAll">
+                      <ks-checkbox shape="square" icon-size="16" v-model="checkedAll"></ks-checkbox>
+                    </td>
+                    <td v-if="index" :width="indexWidth" class="index-column ks-table__header-title" :style="{ height: `${headerHeight}px` }">序号</td>
+                    <td
+                      v-for="column of showColumns"
+                      :key="column.key"
+                      :style="{ width: `${column.width || 50}px`, height: `${headerHeight}px` }"
+                      @click="handleSort(column)"
+                    >
+                      <render-header
+                        v-if="headerFormatter[column.key] || (column.children && column.children.length)"
+                        :formatter="headerFormatter[column.key] || defaultHeaderFormatter"
+                        :column="column"
+                        :currentSortKey="currentSortKey"
+                        :currentSortType="currentSortType"
+                        @sort="handleSort"
+                      />
+                      <template v-else>
+                        <div class="ks-table__header-wrapper-sort">
+                          <span class="ks-table__header-title">{{ column.title }}</span>
+                          <div v-if="column.sort" class="ks-table__header-sort">
+                            <div class="ks-table__header-sort__asc" :class="{ 'asc-active': currentSortType === 'asc' && column.key === currentSortKey }"></div>
+                            <div
+                              class="ks-table__header-sort__desc"
+                              :class="{ 'desc-active': currentSortType === 'desc' && column.key === currentSortKey }"
+                            ></div>
+                          </div>
+                        </div>
+                      </template>
+                    </td>
+                  </tr>
+                </thead>
+              </table>
+            </div>
+            <div v-if="isFixed" class="ks-table__header-fixed">
+              <table cellspacing="0" cellpadding="0" border="0" :width="`${fixedTableWidth}px`" :class="{ 'ks-table-border': border }">
+                <thead>
+                  <tr :style="{ height: `${headerHeight}px`, lineHeight: `${headerHeight}px` }">
+                    <td v-if="selection" width="40" class="checkbox-column" :class="checkboxClass" @click.stop="handleCheckAll">
+                      <ks-checkbox shape="square" icon-size="16" v-model="checkedAll"></ks-checkbox>
+                    </td>
+                    <td v-if="index" :width="indexWidth" class="index-column ks-table__header-title" :style="{ height: `${headerHeight}px` }">序号</td>
+                    <td
+                      v-for="column of fixedColumns"
+                      :key="column.key"
+                      :style="{ width: `${column.width || 50}px`, height: `${headerHeight}px` }"
+                      @click="handleSort(column)"
+                    >
+                      <render-header
+                        v-if="headerFormatter[column.key] || (column.children && column.children.length)"
+                        :formatter="headerFormatter[column.key] || defaultHeaderFormatter"
+                        :column="column"
+                        :currentSortKey="currentSortKey"
+                        :currentSortType="currentSortType"
+                        @sort="handleSort"
+                      />
+                      <template v-else>
+                        <div class="ks-table__header-wrapper-sort">
+                          <span class="ks-table__header-title">{{ column.title }}</span>
+                          <div v-if="column.sort" class="ks-table__header-sort">
+                            <div class="ks-table__header-sort__asc" :class="{ 'asc-active': currentSortType === 'asc' && column.key === currentSortKey }"></div>
+                            <div
+                              class="ks-table__header-sort__desc"
+                              :class="{ 'desc-active': currentSortType === 'desc' && column.key === currentSortKey }"
+                            ></div>
+                          </div>
+                        </div>
+                      </template>
+                    </td>
+                  </tr>
+                </thead>
+              </table>
+            </div>
+          </div>
+        </ks-sticky>
+        <div class="ks-table__body-wrapper">
+          <div ref="body" class="ks-table__body" :style="{ height: isHorizontal ? horizontalTableHeight : verticalTableHeight }">
+            <table cellspacing="0" cellpadding="0" border="0" :width="`${tableWidth}px`" :class="{ 'ks-table-border': border, 'ks-table-stripe': stripe }">
+              <tr v-for="(item, i) of currentData" :key="item.id" :style="{ height: `${lineHeight}px`, backgroundColor: highlightRow(item) }">
+                <td v-if="selection" width="40" class="checkbox-column" @click.stop="handleCheck(item)">
+                  <ks-checkbox shape="square" icon-size="16" v-model="item._checked"></ks-checkbox>
+                </td>
+                <td v-if="index" :width="indexWidth" class="index-column">
+                  {{ pagination ? (page - 1) * pageSize + i + 1 : i + 1 }}
+                </td>
+                <td
+                  v-for="column of showColumns"
+                  :key="column.key"
+                  :style="{ width: `${column.width || 50}px`, color: column.color }"
+                  align="left"
+                  @click.stop="(e) => handleCellClick(item, column, i, e)"
+                >
+                  <render-cell
+                    v-if="formatter[column.key] || (column.children && column.children.length)"
+                    :formatter="formatter[column.key] || defaultCellFormatter"
+                    :allFormatter="formatter"
+                    :row="item"
+                    :index="i"
+                    :column="column"
+                    :lineHeight="lineHeight"
+                    :border="border"
+                    @cell-click="(e, col) => handleCellClick2(item, col, i, e)"
+                  />
+                  <!-- <template v-else> -->
+                    <!-- <ks-popover
+                      v-if="column.showPopover"
+                      v-model="item[`showPopover_${column.key}`]"
+                      trigger="click"
+                      theme="dark"
+                      :placement="column.popoverPlacement || 'bottom'"
+                    >
+                      <div class="ks-table__cell-popover">{{ item[column.popoverCustomKey] || item[column.key] }}</div>
+                      <template #reference>
+                        <span :style="{ width: `${(column.width || 50) - 8}px` }">{{ item[column.key] }}</span>
+                      </template>
+                    </ks-popover> -->
+                    <span v-else :style="{ width: `${(column.width || 50) - 8}px` }">{{ item[column.key] }}</span>
+                  <!-- </template> -->
+                </td>
+              </tr>
+            </table>
+
+            <div
+              v-if="parseInt(isHorizontal ? horizontalTableHeight : verticalTableHeight) >= lineHeight * currentData.length"
+              :style="{
+                height: `${parseInt(isHorizontal ? horizontalTableHeight : verticalTableHeight) - lineHeight * currentData.length}px`,
+                width: `${tableWidth}px`
+              }"
+            >
+              <div class="ks-table__body__no-data" v-if="currentData.length === 0">
+                <slot name="noData"  >
+                  暂无数据
+                </slot>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="isFixed"
+            ref="fixedBody"
+            class="ks-table__body-fixed"
+            :style="{
+              height:
+                parseInt(isHorizontal ? horizontalTableHeight : verticalTableHeight) >= lineHeight * currentData.length
+                  ? `${lineHeight * currentData.length}px`
+                  : isHorizontal
+                  ? horizontalTableHeight
+                  : verticalTableHeight
+            }"
+          >
+            <table cellspacing="0" cellpadding="0" border="0" :width="`${fixedTableWidth}px`" :class="{ 'ks-table-border': border, 'ks-table-stripe': stripe }">
+              <tr v-for="(item, i) of currentData" :key="item.id" :style="{ height: `${lineHeight}px`, backgroundColor: highlightRow(item) }">
+                <td v-if="selection" width="40" class="checkbox-column" @click.stop="handleCheck(item)">
+                  <ks-checkbox shape="square" icon-size="16" v-model="item._checked"></ks-checkbox>
+                </td>
+                <td v-if="index" :width="indexWidth" class="index-column">
+                  {{ pagination ? (page - 1) * pageSize + i + 1 : i + 1 }}
+                </td>
+                <td
+                  v-for="column of fixedColumns"
+                  :key="column.key"
+                  :style="{ width: `${column.width || 50}px`, color: column.color }"
+                  align="left"
+                  @click.stop="(e) => handleCellClick(item, column, i, e)"
+                >
+                  <render-cell
+                    v-if="formatter[column.key] || (column.children && column.children.length)"
+                    :formatter="formatter[column.key] || defaultCellFormatter"
+                    :allFormatter="formatter"
+                    :row="item"
+                    :index="i"
+                    :column="column"
+                    :lineHeight="lineHeight"
+                    @cell-click="(e, col) => handleCellClick2(item, col, i, e)"
+                  />
+                  <!-- <template v-else>
+                    <ks-popover
+                      v-if="column.showPopover"
+                      v-model="item[`showPopover_${column.key}`]"
+                      trigger="click"
+                      theme="dark"
+                      :placement="column.popoverPlacement || 'bottom'"
+                    >
+                    <div class="ks-table__cell-popover">{{ item[column.popoverCustomKey] || item[column.key] }}</div>
+                      <template #reference>
+                        <span :style="{ width: `${(column.width || 50) - 8}px` }">{{ item[column.key] }}</span>
+                      </template>
+                    </ks-popover> -->
+                    <span v-else :style="{ width: `${(column.width || 50) - 8}px` }">{{ item[column.key] }}</span>
+                  <!-- </template> -->
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="ks-table__footer" v-if="pagination">
+          <ks-pagination :value="page" :total-items="total" :items-per-page="pageSize" :show-page-size="3" force-ellipses @change="handleChangePage" />
+        </div>
+      </div>
+    </div>
+    <ks-popup :value="isHorizontal" get-container="body" class="ks-table-popup" :closeable="false" :close-on-click-overlay="false" :close-on-popstate="true">
+      <div class="ks-table-popup__wrapper" :style="{ height: `${clientWidth}px` }">
+        <div
+          ref="horizontalTable"
+          class="ks-table-wrapper"
+          :class="{ 'ks-table-popup-center': tableWidth < horizontalTableMaxWidth }"
+          :style="{ width: tableWidth < horizontalTableMaxWidth ? `${tableWidth}px` : '' }"
+        ></div>
+        <!-- <div class="ks-table-popup__button">
+          <ks-button class="handle-btn" size="mini" type="primary" @click="closeHorizontal">
+            <svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+              <path
+                d="M448 128a106.666667 106.666667 0 0 1 106.666667 106.666667v576a106.666667 106.666667 0 0 1-106.666667 106.666666H128a106.666667 106.666667 0 0 1-106.666667-106.666666V234.666667a106.666667 106.666667 0 0 1 106.666667-106.666667h320z m448 256a106.666667 106.666667 0 0 1 106.666667 106.666667v320a106.666667 106.666667 0 0 1-106.666667 106.666666H661.333333a42.666667 42.666667 0 1 1 0-85.333333h234.666667a21.333333 21.333333 0 0 0 21.333333-21.333333V490.666667a21.333333 21.333333 0 0 0-21.333333-21.333334H661.333333a42.666667 42.666667 0 1 1 0-85.333333z m-448-170.666667H128a21.333333 21.333333 0 0 0-21.333333 21.333334v554.666666a21.333333 21.333333 0 0 0 21.333333 21.333334h320a21.333333 21.333333 0 0 0 21.333333-21.333334V234.666667a21.333333 21.333333 0 0 0-21.333333-21.333334z m-64 458.666667a32 32 0 0 1 0 64h-170.666667a32 32 0 0 1 0-64z"
+                p-id="744"
+                fill="#ffffff"
+              ></path>
+            </svg>
+            转竖屏
+          </ks-button>
+        </div> -->
+      </div>
+    </ks-popup>
+    <ks-popup
+      :value="!isHorizontal && showSettings"
+      get-container="body"
+      class="ks-table-setting-popup"
+      :closeable="false"
+      :close-on-popstate="true"
+      position="right"
+      @click-overlay="showSettings = false"
+    >
+      <div class="ks-table-setting__wrapper">
+        <div class="ks-table-setting__header">
+          <h3><ks-icon @click="showSettings = false" name="arrow-left" />表格自定义<strong>可拖动排序</strong></h3>
+          <div class="ks-table-setting__header__table-title">
+            <span class="ks-table-setting__field-name">字段名</span>
+            <span class="ks-table-setting__switch">显示/隐藏</span>
+            <span class="ks-table-setting__sortable">排序</span>
+          </div>
+        </div>
+        <div class="ks-table-setting__list-wrapper">
+          <ul class="ks-table-setting__list">
+            <draggable v-model="currentColumns" draggable=".draggable-li" delay="50">
+              <li v-for="column of currentColumns" :key="column.key" :class="{ 'draggable-li': !column.fixed }">
+                <span class="ks-table-setting__list-title">{{ column.title }}</span>
+                <ks-checkbox v-model="column.show" :disabled="column.fixed" />
+                <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" width="16" height="16">
+                  <path
+                    d="M689.024 137.28l4.608 3.776 218.56 218.624a29.248 29.248 0 0 1-36.736 45.12l-4.608-3.776L702.08 232.32V906.88a29.248 29.248 0 0 1-57.984 5.312l-0.512-5.312v-736l0.32-4.8a29.248 29.248 0 0 1 45.056-28.8zM364.928 117.12c14.336 0 26.24 10.304 28.8 24l0.448 5.248v736l-0.128 2.048a29.248 29.248 0 0 1-44.416 31.616l-4.544-3.712-219.456-218.624a29.248 29.248 0 0 1 36.736-45.184l4.544 3.712 168.704 168.064V146.304c0-16.192 13.12-29.248 29.312-29.248z"
+                    fill="#837E7E"
+                    p-id="1328"
+                  ></path>
+                </svg>
+              </li>
+            </draggable>
+          </ul>
+        </div>
+        <div class="ks-table-setting__footer">
+          <ks-grid column-num="2" :border="false">
+            <ks-grid-item>
+              <ks-button type="primary" size="large" plain @click="resetSettings">重置</ks-button>
+            </ks-grid-item>
+            <ks-grid-item>
+              <ks-button type="primary" size="large" @click="saveSettings">保存</ks-button>
+            </ks-grid-item>
+          </ks-grid>
+        </div>
+      </div>
+    </ks-popup>
+    <ks-popover v-model="showPopover" theme="dark" placement="top" :style="popoverStyle">
+      <div class="ks-table__cell-popover">{{ this.popoverContent }}</div>
+    </ks-popover>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+import IScroll from 'iscroll/build/iscroll-probe'
+import './index.less';
+const Toast = window.ksui && window.ksui.Toast
+
+/**
+ * 状态栏及导航栏高度
+ */
+const getOffsetTop = () => {
+  var isIos = navigator.userAgent.includes('iPhone')
+  if (isIos) {
+    var ratio = window.devicePixelRatio || 1
+    var screen = {
+      width: window.screen.width * ratio,
+      height: window.screen.height * ratio
+    }
+    if (
+      (isIos && screen.width == 1125 && screen.height === 2436) ||
+      (isIos && screen.width == 828 && screen.height === 1792) ||
+      (isIos && screen.width == 1125 && screen.height === 2436) ||
+      (isIos && screen.width == 1242 && screen.height === 2688)
+    ) {
+      return '88'
+    }
+    return '64'
+  }
+  return '44'
+}
+
+// 单元格jsx函数组件
+const renderCell = {
+  functional: true,
+  props: ['formatter', 'row', 'column', 'index', 'lineHeight', 'border', 'allFormatter'],
+  render(h, self) {
+    return self.props.formatter(h, {
+      row: self.props.row,
+      column: self.props.column,
+      index: self.props.index,
+      onCellClick: self.listeners['cell-click'],
+      lineHeight: self.props.lineHeight,
+      border: self.props.border,
+      allFormatter: self.props.allFormatter
+    })
+  }
+}
+
+// 表头jsx函数组件
+const renderHeader = {
+  functional: true,
+  props: ['formatter', 'column', 'currentSortKey', 'currentSortType'],
+  render(h, self) {
+    return self.props.formatter(h, {
+      column: self.props.column,
+      currentSortKey: self.props.currentSortKey,
+      currentSortType: self.props.currentSortType,
+      onSort: self.listeners.sort
+    })
+  }
+}
+
+// 多级表头默认渲染函数
+const defaultHeaderFormatter = (h, { column, currentSortKey, currentSortType, onSort }) => {
+  let firstStyle = {
+    width: `${column.width}px`
+  }
+  let list = column.children.map((item, i) => {
+    let itemStyle = {
+      width: `${(i === 0 ? item.width : item.width - 1) || 50}px`
+    }
+    let itemTitleStyle = {}
+    if (item.sort) {
+      let ascClass = 'ks-table__header-sort__asc' + (currentSortType === 'asc' && item.key === currentSortKey ? ' asc-active' : '')
+      let descClass = 'ks-table__header-sort__desc' + (currentSortType === 'desc' && item.key === currentSortKey ? ' desc-active' : '')
+      return (
+        <div class="ks-table__header-title-multiple__second-item ks-table__header-wrapper-sort" style={itemStyle} onClick={onSort.bind(null, item)}>
+          <div class="ks-table__header-title-multiple__second-item-title" style={itemTitleStyle}>
+            {item.title}
+          </div>
+          <div class="ks-table__header-sort">
+            <div class={ascClass}></div>
+            <div class={descClass}></div>
+          </div>
+        </div>
+      )
+    } else {
+      return (
+        <div class="ks-table__header-title-multiple__second-item" style={itemStyle}>
+          <div class="ks-table__header-title-multiple__second-item-title" style={itemTitleStyle}>
+            {item.title}
+          </div>
+        </div>
+      )
+    }
+  })
+  return (
+    <div class="ks-table__header-title-multiple">
+      <div class="ks-table__header-title-multiple__first" style={firstStyle}>
+        {column.title}
+      </div>
+      <div class="ks-table__header-title-multiple__second">{list}</div>
+    </div>
+  )
+}
+
+// 多级表头列单元格默认渲染函数
+const defaultCellFormatter = (h, { row, column, index, lineHeight, border, onCellClick, allFormatter }) => {
+  let list = column.children.map((item, i) => {
+    let itemStyle = {
+      width: `${(i === 0 ? item.width : item.width - (border ? 1 : 0)) || 50}px`,
+      lineHeight: `${lineHeight}px`
+    }
+    let itemTextStyle = {
+      width: `${((i === 0 ? item.width : item.width - (border ? 1 : 0)) || 50) - 8}px`,
+      color: item.color
+    }
+    return (
+      <div class="ks-table__multiple-cloumn-cell" style={itemStyle} onClick={e => onCellClick(e, item)}>
+        <span class="ks-table__multiple-cloumn-cell__text" style={itemTextStyle}>
+          {allFormatter[item.key] ? allFormatter[item.key](h, { row, column: item, index: `${index}-${i}` }) : row[item.key]}
+        </span>
+      </div>
+    )
+  })
+  let columnStyle = {
+    height: `${lineHeight - (border ? 1 : 0)}px`
+  }
+  return (
+    <div class="ks-table__multiple-cloumn" style={columnStyle}>
+      {list}
+    </div>
+  )
+}
+
+let loop = data => data.map((row, index) => ({ ...row, _checked: false, _index: index }))
+
+export default {
+  name: 'ksTable',
+  components: {
+    draggable,
+    renderCell,
+    renderHeader
+  },
+  props: {
+    headerHeight: {
+      type: Number,
+      default: 28
+    },
+    lineHeight: {
+      type: Number,
+      default: 34
+    },
+    offsetTop: {
+      type: [Number, String],
+      default: getOffsetTop()
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    pagination: {
+      type: Boolean,
+      default: true
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    index: {
+      type: Boolean,
+      default: true
+    },
+    selection: {
+      type: Boolean,
+      default: false
+    },
+    highlightRow: {
+      type: Function,
+      default: () => ''
+    },
+    storageKey: String,
+    headerFormatter: {
+      type: Object,
+      default: () => ({})
+    },
+    formatter: {
+      type: Object,
+      default: () => ({})
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    indexWidth: {
+      type: Number,
+      default: 40
+    },
+    headerTitle: {
+      type: String,
+      default: '横屏表格'
+    },
+    headerTitleHeight: {
+      type: Number,
+      default: 44
+    },
+    isStopDefualtScroll: {
+      type: Boolean,
+      default: true
+    },
+    isNewHeightCalculate: {
+      type: Boolean,
+      default: false
+    },
+    popoverOffset: {
+      type: Array,
+      default: () => [0, 0]
+    }
+  },
+  data() {
+    return {
+      isHorizontal: false,
+      showSettings: false,
+      currentSortKey: '',
+      currentSortType: '',
+      verticalTableHeight: this.lineHeight + 'px',
+      horizontalTableHeight: this.lineHeight + 'px',
+      clientWidth: 0,
+      horizontalTableMaxWidth: 0,
+      currentColumns: JSON.parse(JSON.stringify(this.columns)),
+      defaultHeaderFormatter,
+      defaultCellFormatter,
+      scrollX: 0,
+      scrollY: 0,
+      currentData: loop(this.data),
+      checkedAll: false,
+      indeterminate: false,
+      checkedRow: [],
+      stickyContainer: null,
+      ksStatusBarHeight: 0,
+      showPopover: false,
+      popoverStyle: {},
+      popoverContent: ''
+    }
+  },
+  computed: {
+    showColumns() {
+      let columns = JSON.parse(JSON.stringify(this.currentColumns))
+      const newColumns = columns
+        .map(item => {
+          if (item.children) {
+            item.children = item.children.filter(t => t.show)
+            item.width = item.children.reduce((total, item) => total + item.width, 0)
+            if (item.show && !item.children.length) {
+              item.show = false
+            }
+          }
+          return item
+        })
+        .filter(item => item.show)
+        return newColumns
+    },
+    tableWidth() {
+      return (
+        this.showColumns.reduce((total, item) => total + item.width + (this.border ? 1 : 0), 0) +
+        (this.index ? this.indexWidth + (this.border ? 1 : 0) : 0) +
+        (this.selection ? 40 + (this.border ? 1 : 0) : 0)
+      )
+    },
+    notFixedColumns() {
+      return this.showColumns.filter(item => !item.fixed)
+    },
+    fixedColumns() {
+      return this.showColumns.filter(item => item.fixed)
+    },
+    fixedTableWidth() {
+      return (
+        this.fixedColumns.reduce((total, item) => total + item.width + (this.border ? 1 : 0), 0) +
+        (this.index ? this.indexWidth + (this.border ? 1 : 0) : 0) +
+        (this.selection ? 40 + (this.border ? 1 : 0) : 0)
+      )
+    },
+    isFixed() {
+      return this.showColumns.some(item => item.fixed) || this.index || this.selection
+    },
+    checkboxClass() {
+      return this.indeterminate ? 'checkbox-column__header' : ''
+    }
+  },
+  mounted() {
+    this.isNewHeightCalculate ? this.newSetTableHeight() : this.setTableHeight()
+    this.$nextTick(() => {
+      this.getStoreSettings()
+      this.createScrollTable()
+    })
+    this.stickyContainer = this.$refs.root
+  },
+  beforeDestroy() {
+    this.clearScrollTable()
+  },
+  watch: {
+    $route() {
+      if (this.isHorizontal) {
+        this.closeHorizontal()
+      }
+      // 存在keep-alive保活路由切换回来head头的滚动位置丢失问题
+      const x = this.scroolTable && this.scroolTable.x || 0
+      if (this.$refs.head) {
+        this.$refs.head.scrollLeft = Math.abs(x)
+      }
+    },
+    columns: {
+      deep: true,
+      handler(val) {
+        this.currentColumns = JSON.parse(JSON.stringify(val))
+        this.clearScroll()
+        this.$nextTick(() => {
+          if (this.scroolTable) {
+            this.scroolTable.refresh()
+            this.scroolTable.scrollTo(0, 0)
+          }
+        })
+      }
+    },
+    // 滚动兜底处理
+    'scroolTable.x': {
+      deep: true,
+      handler(val) {
+        if (!this.isNumber(val)) {
+          this.scroolTable.x = 0
+        }
+      }
+    },
+    'scroolTable.y': {
+      deep: true,
+      handler(val) {
+        if (!this.isNumber(val)) {
+          this.scroolTable.y = 0
+        }
+      }
+    },
+    data: {
+      deep: true,
+      handler(val) {
+        this.currentData = loop(val)
+        if (this.scroolTable) {
+          // 数据变动高度发生变化,渲染后刷新iscroll重新计算可滚动高度
+          this.isNewHeightCalculate ? this.newSetTableHeight() : this.setTableHeight()
+          this.$nextTick(() => {
+            this.scroolTable.refresh()
+            this.scroolTable.scrollTo(this.scrollX, 0)
+            if (this.isFixed) {
+              this.$refs.fixedBody.scrollTop = 0
+            }
+          })
+        }
+      }
+    }
+  },
+  methods: {
+    isNumber(val) {
+      return val !== undefined && val !== null && !isNaN(val)
+    },
+    /**
+     * 创建iscroll实例
+     */
+    createScrollTable(x = 0, y = 0) {
+      this.$refs.body.addEventListener('touchmove', this.stopDefualtScroll)
+      this.$refs.body.addEventListener('mousewheel', this.stopDefualtScroll)
+      this.scroolTable = new IScroll(this.$refs.body, {
+        scrollX: true,
+        scrollY: true,
+        probeType: 3,
+        mouseWheel: true,
+        bindToWrapper: true,
+        bounce: false,
+        disableTouch: false,
+        deceleration: 0.001,
+        preventDefault: false // 阻止默认行为
+      })
+      let handleScroll = () => {
+        // 记录滚动位置
+        this.scrollX = this.scroolTable.x
+        this.ScrollY = this.scroolTable.y
+
+        // 处理固定列跟随滚动
+        if (this.isFixed) {
+          window.requestAnimationFrame(() => {
+            this.$refs.fixedBody.scrollTop = Math.abs(this.scroolTable.y)
+          })
+        }
+
+        // 处理表头跟随滚动
+        window.requestAnimationFrame(() => {
+          this.$refs.head.scrollLeft = Math.abs(this.scroolTable.x)
+        })
+      }
+      // 监听滚动事件
+      this.scroolTable.on('scroll', handleScroll)
+      this.scroolTable.on('scrollEnd', handleScroll)
+      // 设置滚动位置
+      this.scroolTable.scrollTo(x, y)
+    },
+    /**
+     * 销毁事件绑定及iscroll实例
+     */
+    clearScrollTable() {
+      this.$refs.body.removeEventListener('touchmove', this.stopDefualtScroll)
+      this.$refs.body.removeEventListener('mousewheel', this.stopDefualtScroll)
+      if (this.scroolTable) {
+        this.scroolTable.destroy()
+        this.scroolTable = null
+      }
+    },
+    setTableHeight(num) {
+      // 整个表格组件的高度，用户传入参数或者获取父容器高度
+      let height = num || window.getComputedStyle(this.$refs.root.parentNode).height
+      const footerHeight = 40 // 分页高度
+      // 横屏全屏时表格宽度，ipx兼容刘海屏，左右各设置26像素边距
+      this.horizontalTableMaxWidth = document.body.className.indexOf('ipx') === -1 ? window.screen.height : window.screen.height - 26 * 2
+      // 横屏全屏时屏幕高度，android减去状态栏高度22像素
+      // this.clientWidth = document.body.className.indexOf('android') === -1 ? window.screen.width : window.screen.width  - 22
+      // ios和安卓在横屏状态下获取屏幕宽高不一致兼容，ios横竖屏获取不变，安卓会跟随改变
+      this.clientWidth = document.body.className.indexOf('android') === -1 ? window.screen.width : (this.isHorizontal ? window.screen.height - 22 : window.screen.width - 22)
+      // 获取横屏的头部高度
+      const headerTitle = this.headerTitleHeight
+      let heightInt = parseInt(height)
+      if (this.pagination) {
+        if (heightInt - this.headerHeight - footerHeight < this.lineHeight) {
+          // 表格高度小于行高则将表格高度设置为行高
+          this.verticalTableHeight = this.lineHeight + 'px'
+          this.horizontalTableHeight = this.lineHeight - headerTitle + 'px'
+        } else {
+          this.verticalTableHeight = heightInt - this.headerHeight - (this.border ? 2 : 0) - footerHeight + 'px'
+          this.horizontalTableHeight = this.clientWidth - this.headerHeight - (this.border ? 2 : 0) - footerHeight- headerTitle + 'px'
+        }
+      } else {
+        if (heightInt - this.headerHeight < this.lineHeight) {
+          // 表格高度小于行高则将表格高度设置为行高
+          this.verticalTableHeight = this.lineHeight + 'px'
+          this.horizontalTableHeight = this.lineHeight - headerTitle + 'px'
+        } else {
+          this.verticalTableHeight = heightInt - this.headerHeight - (this.border ? 2 : 0) + 'px'
+          this.horizontalTableHeight = this.clientWidth - this.headerHeight - (this.border ? 2 : 0) - headerTitle + 'px'
+        }
+      }
+    },
+    /**
+     * 新的高度计算法，解决鸿蒙手机高度计算问题
+     */
+    newSetTableHeight(num) {
+      const screenHeight = window.innerHeight
+      const screenWidth = window.innerWidth
+      const footerHeight = 40 // 分页高度
+      // 整个表格组件的高度，用户传入参数或者获取父容器高度
+      let height = num || window.getComputedStyle(this.$refs.root.parentNode).height
+      // 横屏全屏时表格宽度，ipx兼容刘海屏，左右各设置26像素边距
+      this.horizontalTableMaxWidth = document.body.className.indexOf('ipx') === -1 ? screenHeight : screenHeight - 26 * 2
+      // 横屏全屏时屏幕高度，android减去状态栏高度22像素
+      // ios和安卓在横屏状态下获取屏幕宽高不一致兼容，ios横竖屏获取不变，安卓会跟随改变
+      this.clientWidth = this.isHorizontal ? screenHeight : screenWidth
+      // 获取横屏的头部高度
+      const headerTitle = this.headerTitleHeight
+      let heightInt = parseInt(height)
+      let verticalTableHeight = 0
+      let horizontalTableHeight = 0
+      if (this.pagination) {
+        // 在旋转横屏的时候this.$refs.root.parentNode高度变得异常
+        if (!this.isHorizontal && (heightInt - this.headerHeight - footerHeight < this.lineHeight)) {
+          // 表格高度小于行高则将表格高度设置为行高
+          verticalTableHeight = this.lineHeight
+          horizontalTableHeight = this.lineHeight - headerTitle
+        } else {
+          verticalTableHeight = heightInt - this.headerHeight - (this.border ? 2 : 0) - footerHeight
+          horizontalTableHeight = this.clientWidth - this.headerHeight - (this.border ? 2 : 0) - footerHeight- headerTitle
+        }
+      } else {
+        if (heightInt - this.headerHeight < this.lineHeight) {
+          // 表格高度小于行高则将表格高度设置为行高
+          verticalTableHeight = this.lineHeight
+          horizontalTableHeight = this.lineHeight - headerTitle
+        } else {
+          verticalTableHeight = heightInt - this.headerHeight - (this.border ? 2 : 0)
+          horizontalTableHeight = this.clientWidth - this.headerHeight - (this.border ? 2 : 0) - headerTitle
+        }
+      }
+      this.verticalTableHeight = Math.max(60, verticalTableHeight) + 'px'
+      this.horizontalTableHeight = Math.max(60, horizontalTableHeight) + 'px'
+    },
+    /**
+     * 使用本地用户个性设置作为列配置
+     */
+    getStoreSettings() {
+      if (this.storageKey) {
+        let menuId = (window.ksui && window.ksui.menu && window.ksui.menu.id) || ''
+        let employeeNumber = (window.ksui && window.ksui.user && window.ksui.user.employeeNumber) || ''
+        let jsonStr = localStorage.getItem(`${menuId}-${this.storageKey}-${employeeNumber}`)
+        if (jsonStr) {
+          this.currentColumns = JSON.parse(jsonStr)
+        }
+      }
+    },
+    /**
+     * 排序事件
+     */
+    handleSort(column) {
+      if (!column.children && column.sort) {
+        if (column.key === this.currentSortKey) {
+          this.currentSortType = this.currentSortType === 'asc' ? 'desc' : 'asc'
+        } else {
+          this.currentSortKey = column.key
+          this.currentSortType = 'asc'
+        }
+        this.initCheck()
+        this.$emit('sort', { key: column.key, sortType: this.currentSortType })
+      }
+    },
+    /**
+     * 设置排序字段(一般在需要设定默认排序字段时使用)
+     */
+    setSort(key, sortType) {
+      this.currentSortKey = key
+      this.currentSortType = sortType
+    },
+    /**
+     * 分页事件
+     */
+    handleChangePage(e) {
+      this.initCheck()
+      this.$emit('change-page', e)
+    },
+    /**
+     * 重置滚动位置
+     */
+    clearScroll() {
+      this.scrollX = 0
+      this.scrollY = 0
+      this.$refs.body.scrollLeft = 0
+      this.$refs.head.scrollLeft = 0
+      this.$refs.body.scrollTop = 0
+      if (this.isFixed) {
+        this.$refs.fixedBody.scrollTop = 0
+      }
+    },
+    /**
+     * 启动横屏
+     */
+    openHorizontal() {
+      if (window.ks && window.ks.setInterfaceOrientation) {
+        window.ks.setInterfaceOrientation({
+          orientation: 1
+        })
+        ks.setCloseButton({ isShow: false })
+      }
+      this.isHorizontal = true
+      this.$nextTick(() => {
+        this.$refs.horizontalTable.appendChild(this.$refs.verticalTable)
+        this.clearScroll()
+        this.scroolTable.scrollTo(0, 0)
+        this.scroolTable.refresh()
+        if (this.isNewHeightCalculate) {
+          // 延迟的目的是等原生能力旋转后拿到正确的window.innerHeight
+          setTimeout(() => {
+            this.newSetTableHeight()
+          }, 100)
+        }
+      })
+    },
+    /**
+     * 关闭横屏
+     */
+    closeHorizontal() {
+      this.isHorizontal = false
+      this.$refs.verticalTableWrapper.appendChild(this.$refs.verticalTable)
+      if (window.ks && window.ks.setInterfaceOrientation) {
+        window.ks.setInterfaceOrientation({
+          orientation: 0
+        })
+        window.ks.setCloseButton({ isShow: true })
+      }
+      this.$nextTick(() => {
+        this.setHtmlFontSize()
+        this.clearScroll()
+        this.scroolTable.scrollTo(0, 0)
+        this.scroolTable.refresh()
+        // 延迟的目的是等原生能力旋转后拿到正确的window.innerHeight
+        setTimeout(() => {
+          this.newSetTableHeight()
+        }, 100)
+      })
+      this.$emit('close-horizontal')
+    },
+    // 设置HTML文档字体 rem据此设置生效
+    setHtmlFontSize() {
+      var clientWidth = document.documentElement.clientWidth
+      if (clientWidth) {
+        let px = clientWidth / 10
+        document.documentElement.style.fontSize = px + 'px'
+      }
+    },
+    /**
+     * 打开个性设置
+     */
+    openSettings() {
+      if (!this.storageKey) {
+        return Toast('请设置storageKey属性')
+      }
+      this.showSettings = true
+    },
+    /**
+     * 保存个性设置到本地
+     */
+    saveSettings() {
+      this.showSettings = false
+      let menuId = window.ksui.menu.id
+      let employeeNumber = window.ksui.user.employeeNumber
+      localStorage.setItem(`${menuId}-${this.storageKey}-${employeeNumber}`, JSON.stringify(this.currentColumns))
+      this.$nextTick(() => {
+        this.scroolTable.refresh()
+      })
+    },
+    /**
+     * 重置列配置
+     */
+    resetSettings() {
+      this.showSettings = false
+      this.currentColumns = JSON.parse(JSON.stringify(this.columns))
+      let menuId = window.ksui.menu.id
+      let employeeNumber = window.ksui.user.employeeNumber
+      localStorage.removeItem(`${menuId}-${this.storageKey}-${employeeNumber}`)
+      this.$nextTick(() => {
+        this.scroolTable.refresh()
+      })
+    },
+    /**
+     * 阻止默认滚动事件
+     */
+    stopDefualtScroll(e) {
+      const { scroolTable, isStopDefualtScroll } = this
+      if (isStopDefualtScroll) {
+        e.preventDefault();
+        return
+      }
+      const { y: scrollTop, maxScrollY } = scroolTable
+      const isBottom = maxScrollY === scrollTop
+      const isTop = scrollTop === 0
+      // 左右滑动
+      const lr = scroolTable.directionX !== 0
+      // 轻左右拖动问题
+      const lightMove = scroolTable.directionX === 0 && scroolTable.directionY === 0 &&  Math.abs(scroolTable.distY) < Math.abs(scroolTable.distX)
+      if (!isTop && !isBottom || lr || lightMove) {
+        e.preventDefault();
+      }
+    },
+    /**
+     * 单元格点击事件
+     */
+    handleCellClick(row, column, index, event) {
+      this.handleShowPopover(row, column, event)
+      if (!column.children) {
+        this.$emit('cell-click', row, column, index)
+      }
+    },
+    findTdEl (el){
+      try {
+        if (el.tagName === 'TD' || el.className === 'ks-table__multiple-cloumn-cell') {
+          return el
+        } else {
+          return this.findTdEl(el.parentElement)
+        }
+      } catch {
+        return null
+      }
+    },
+    /**
+     * jsx单元格点击事件
+     */
+    handleCellClick2(row, column, index, e) {
+      e.stopPropagation()
+      this.handleShowPopover(row, column, event)
+      this.$emit('cell-click', row, column, index)
+    },
+    handleShowPopover(row, column, event) {
+      if (column.showPopover) {
+        const target = this.findTdEl(event.target)
+        const targetStyle = target && target.getBoundingClientRect()
+        const { x, y } = targetStyle
+        this.popoverStyle = {
+          position: 'fixed',
+          top: `${y - this.popoverOffset[1] + 4}px`,
+          left: `${x + this.popoverOffset[0] + 20}px`
+        }
+        this.popoverContent = row[column.key]
+        this.showPopover = true
+      }
+    },
+    /**
+     * 吸顶组件滚动事件
+     */
+    stickyScroll(e) {
+      this.$emit('sticky-scroll', e)
+    },
+    /**
+     * 初始化复选框参数
+     */
+    initCheck() {
+      this.checkedAll = false
+      this.indeterminate = false
+      this.checkedRow = []
+    },
+    /**
+     * 处理表格内容复选框勾选
+     */
+    handleCheck(row) {
+      let checked = !row._checked
+      if (checked) {
+        this.checkedRow.push({ ...row })
+      } else {
+        let index = this.checkedRow.findIndex(v => v._index === row._index)
+        if (index > -1) {
+          this.checkedRow.splice(index, 1)
+        }
+      }
+      this.$set(row, '_checked', checked)
+
+      // 处理全选/全不选状态
+      let indeterminate = false
+      let checkedAll = false
+      if (this.checkedRow.length > 0) {
+        if (this.checkedRow.length !== this.currentData.length) {
+          indeterminate = true
+        } else {
+          checkedAll = true
+        }
+      }
+      this.checkedAll = checkedAll
+      this.indeterminate = indeterminate
+      this.emitChangeSelect()
+    },
+    /**
+     * 处理表头复选框勾选
+     */
+    handleCheckAll() {
+      if (this.checkedRow.length !== this.currentData.length) {
+        this.currentData = this.currentData.map(v => ({ ...v, _checked: true }))
+        this.checkedRow = this.currentData.map(v => ({ ...v, _checked: true }))
+      } else {
+        this.currentData = this.currentData.map(v => ({ ...v, _checked: false }))
+        this.checkedRow = []
+      }
+      this.checkedAll = !this.checkedAll
+      this.indeterminate = false
+      this.emitChangeSelect()
+    },
+    /**
+     * 复选框点击事件
+     */
+    emitChangeSelect() {
+      this.$emit('selection-change', this.checkedRow, this.checkedRow.length === this.currentData.length)
+    },
+    getKsStatusBarHeight() {
+      return new Promise(resolve => {
+        try {
+          const isIos = document.body.className.indexOf('android') === -1
+          window.ks.callFunc({ method: "getKsStatusBarHeight", params: {} }).then(() => {
+            this.ksStatusBarHeight =  isIos ? 0 : 0
+          }).finally(() => {
+            resolve(true)
+          })
+        } catch (e) {
+          resolve(true)
+        }
+      })
+    }
+  }
+}
+</script>
+