@kyfe/ks-query-table 0.0.22 → 0.0.23

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

@@ -1,1088 +0,0 @@
-<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>
-