lambo-design-bi 0.0.1

package/pub/table/paging-table/index.vue

@@ -0,0 +1,1577 @@
+<template>
+  <div class="lambo-grid-table">
+    <div ref="searchBox">
+      <slot v-if="!isExpand" name="search">
+      </slot>
+    </div>
+    <Row type="flex" justify="start" :wrap="false">
+      <Col flex="auto">
+      <div class="buttons">
+        <slot name="buttons">
+        </slot>
+      </div>
+      </Col>
+      <Col flex="1 1 360px" v-show="showTableOption && optionLayout === 'flex'">
+      <Row type="flex" justify="end">
+        <Col>
+        <Dropdown class="table-option-dropdown" placement="bottom-end" transfer>
+          <Button class="setting-bottom-button" shape="circle" title="设置" icon="ios-settings-outline">
+            {{ settingText }}
+          </Button>
+          <DropdownMenu slot="list" style="width:420px;padding:10px">
+            <div>
+              <Form label-position="top">
+                <FormItem label="默认分页条数设置" v-show="!pageDisable">
+                  <RadioGroup v-model="tableSettingFormData.limitNumber">
+                    <Radio v-for="(item, index) in pageSizeOpts" :key="index" :label="item">{{ item }}</Radio>
+                  </RadioGroup>
+                </FormItem>
+                <FormItem label="文件名设置">
+                  <Input v-model="tableSettingFormData.tableName" placeholder="请设置导出文件名称"></Input>
+                </FormItem>
+              </Form>
+            </div>
+            <div class="setting-bottom-button-group">
+              <Button class="setting-bottom-button" type="primary" color="primary" @click="tableSettingSave">保存
+              </Button>
+            </div>
+          </DropdownMenu>
+        </Dropdown>
+        <Button class="setting-bottom-button" v-if="!pageDisable" shape="circle" icon="ios-code-download" title="导出本页"
+          @click="exportCurrentPage" :loading="exportCurrentLoading">{{ exportCurrentText }}
+        </Button>
+        <Button class="setting-bottom-button" shape="circle" icon="ios-download-outline" title="导出全部"
+          @click="exportAllData" :loading="exportAllLoading">{{ exportAllText }}
+        </Button>
+        <Dropdown class="table-option-dropdown" placement="bottom-end" transfer>
+          <Button class="setting-bottom-button" shape="circle" title="列筛选" icon="ios-funnel-outline">
+            {{ columnFilterText }}
+          </Button>
+          <DropdownMenu slot="list" style="width:420px">
+            <Tabs type="card" name="setting-tab" class="drop-down-tabs">
+              <TabPane label="列筛选" tab="setting-tab" class="tab-filter">
+                <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange" class="checkbox-group">
+                  <template v-for="(item, index) in columns">
+                    <Checkbox v-if="item.title" :key="'c' + item.title + item.key + index"
+                      :label="'c' + item.title + item.key + index" class="checkbox-single">
+                      <Tooltip :disabled="item.title.length <= 4" :content="item.title" transfer>
+                        {{ item.title }}
+                      </Tooltip>
+                    </Checkbox>
+                  </template>
+                </CheckboxGroup>
+                <div class="tab-button">
+                  <Checkbox :value="checkAll" :indeterminate="false" @click.prevent.native="handleCheckAll">全选
+                  </Checkbox>
+                  <span style="margin-left:90px">
+                    <Button class="table-column-select-btn" type="primary" @click="columnSelect">筛 选</Button>
+                    &nbsp;
+                    <Button class="table-column-select-btn" type="default" @click="columnSave">保 存</Button>
+                    &nbsp;
+                    <Button class="table-column-select-btn" type="default" @click="columnClear">清 除</Button>
+                  </span>
+                </div>
+              </TabPane>
+            </Tabs>
+          </DropdownMenu>
+        </Dropdown>
+        <Dropdown class="table-option-dropdown" placement="bottom-end" transfer>
+          <Button v-if="showFixedColumnFilter" class="setting-bottom-button" title="列固定" shape="circle"
+            icon="ios-pricetag-outline">{{ columnFixedText }}
+          </Button>
+          <DropdownMenu slot="list" style="width:420px;">
+            <Tabs type="card" name="setting-tab" class="drop-down-tabs">
+              <TabPane label="列固定" tab="setting-tab" class="tab-filter">
+                <CheckboxGroup v-model="fixedColumns" @on-change="checkAllFixedColumnsChange" class="checkbox-group">
+                  <template v-for="(item) in cloneColumns">
+                    <Checkbox v-if="item.title && item.fixed !== 'right' && !isDefaultLeftFixed(item)"
+                      :key="'c' + item.title + item.key + item.__origin_index"
+                      :label="'c' + item.title + item.key + item.__origin_index" class="checkbox-single">
+                      <Tooltip :disabled="item.title.length <= 4" :content="item.title" transfer>
+                        {{ item.title }}
+                      </Tooltip>
+                    </Checkbox>
+                  </template>
+                </CheckboxGroup>
+                <div class="tab-button">
+                  <Checkbox :value="checkAllFixedColumns" :indeterminate="false"
+                    @click.prevent.native="handleCheckAllFixedColumns">全选
+                  </Checkbox>
+                  <span style="margin-left:90px">
+                    <Button class="table-column-select-btn" type="primary" @click="fixedColumnSelect">固 定</Button>
+                    &nbsp;
+                    <Button class="table-column-select-btn" type="default" @click="fixedColumnSave">保 存</Button>
+                    &nbsp;
+                    <Button class="table-column-select-btn" type="default" @click="fixedColumnClear">清 除</Button>
+                  </span>
+                </div>
+              </TabPane>
+            </Tabs>
+          </DropdownMenu>
+        </Dropdown>
+        <template v-if="showFullViewBtn">
+          <Button v-if="!isExpand" class="setting-bottom-button" icon="md-expand" title="表格全屏"
+            @click="expandTable"></Button>
+          <Button v-else class="setting-bottom-button" icon="md-contract" title="退出全屏" @click="contractTable"></Button>
+        </template>
+        </Col>
+      </Row>
+      </Col>
+      <Col flex="1 1 250px" v-show="showTableOption && optionLayout === 'default'">
+      <Row type="flex" justify="end">
+        <Col>
+        <ButtonGroup style="font-size: 0">
+          <Tooltip content="刷新表格数据" placement="top">
+            <Button icon="md-refresh" @click="tableRefresh"></Button>
+          </Tooltip>
+          <template v-if="showFullViewBtn">
+            <Button v-if="!isExpand" icon="md-expand" title="表格全屏" @click="expandTable"></Button>
+            <Button v-else icon="md-contract" title="退出全屏" @click="contractTable"></Button>
+          </template>
+          <Dropdown class="table-option-dropdown" placement="bottom-end" transfer>
+            <Tooltip content="表格选项" placement="top">
+              <Button icon="ios-keypad" class="table-option-dropdown">
+                <Icon type="ios-arrow-down"></Icon>
+              </Button>
+            </Tooltip>
+            <DropdownMenu slot="list" style="width:420px">
+              <Tabs type="card" name="export-tab" class="drop-down-tabs">
+                <TabPane label="导出" tab="export-tab">
+                  <export-data ref="exportPart" :dataUrl="dataUrl" :exportUrl="exportUrl" :exportMode="exportMode"
+                    :exportName="exportTableName" :export-batch-size="exportBatchSize"
+                    :export-request-limit="exportRequestLimit" :requestMethod="reqMethod"
+                    :request-success-codes="requestSuccessCodes" :paginationParams="paginationParams"
+                    :parsedColumns="parsedColumns" :searchParams="searchParams" :show-summary="tableShowSummary"
+                    :sortParams="sortParams" :total="totalNumber" :summary-method="tableSummaryMethod"
+                    :tableColumns="tableColumns" :tableName="tableName" :exportSpanColumns="exportSpanColumns">
+                  </export-data>
+                </TabPane>
+                <TabPane label="列筛选" tab="export-tab" class="tab-filter">
+                  <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange" class="checkbox-group">
+                    <template v-for="(item, index) in columns">
+                      <Checkbox v-if="item.title" :key="'c' + item.title + item.key + index"
+                        :label="'c' + item.title + item.key + index" class="checkbox-single">
+                        <Tooltip :disabled="item.title.length <= 4" :content="item.title" transfer>
+                          {{ item.title }}
+                        </Tooltip>
+                      </Checkbox>
+                    </template>
+                  </CheckboxGroup>
+                  <div class="tab-button">
+                    <Checkbox :value="checkAll" :indeterminate="false" @click.prevent.native="handleCheckAll">全选
+                    </Checkbox>
+                    <span style="margin-left:90px">
+                      <Button class="table-column-select-btn" type="primary" @click="columnSelect">筛 选</Button>
+                      &nbsp;
+                      <Button class="table-column-select-btn" type="default" @click="columnSave">保 存</Button>
+                      &nbsp;
+                      <Button class="table-column-select-btn" type="default" @click="columnClear">清 除</Button>
+                    </span>
+                  </div>
+                </TabPane>
+                <TabPane v-if="showFixedColumnFilter" label="列固定" tab="export-tab" class="tab-filter">
+                  <CheckboxGroup v-model="fixedColumns" @on-change="checkAllFixedColumnsChange" class="checkbox-group">
+                    <template v-for="(item) in cloneColumns">
+                      <Checkbox v-if="item.title && item.fixed !== 'right' && !isDefaultLeftFixed(item)"
+                        :key="'c' + item.title + item.key + item.__origin_index"
+                        :label="'c' + item.title + item.key + item.__origin_index" class="checkbox-single">
+                        <Tooltip :disabled="item.title.length <= 4" :content="item.title" transfer>
+                          {{ item.title }}
+                        </Tooltip>
+                      </Checkbox>
+                    </template>
+                  </CheckboxGroup>
+                  <div class="tab-button">
+                    <Checkbox :value="checkAllFixedColumns" :indeterminate="false"
+                      @click.prevent.native="handleCheckAllFixedColumns">全选
+                    </Checkbox>
+                    <span style="margin-left:90px">
+                      <Button class="table-column-select-btn" type="primary" @click="fixedColumnSelect">固 定</Button>
+                      &nbsp;
+                      <Button class="table-column-select-btn" type="default" @click="fixedColumnSave">保 存</Button>
+                      &nbsp;
+                      <Button class="table-column-select-btn" type="default" @click="fixedColumnClear">清 除</Button>
+                    </span>
+                  </div>
+                </TabPane>
+              </Tabs>
+            </DropdownMenu>
+          </Dropdown>
+        </ButtonGroup>
+        </Col>
+      </Row>
+      </Col>
+      <Col>
+      <Button v-if="showSearchBtn && ($listeners['do-search'] || $listeners['doSearch'])" type="primary"
+        class="setting-bottom-button search-btn" :icon="showSearchIcon ? 'ios-search' : ''" @click="doSearch">查询
+      </Button>
+      </Col>
+    </Row>
+    <Row v-if="slots.message || messageInfo.content">
+      <Col flex="auto">
+      <div class="message-box" :class="messageInfo.class">
+        <div slot="message" class="message-text">
+          <slot name="message">
+            {{ messageInfo.content }}
+          </slot>
+        </div>
+      </div>
+      </Col>
+    </Row>
+    <Row style="margin-top:10px;">
+      <Col span="24">
+      <Table v-if="hackReset" ref="tableRef" :border="tableBorder" :columns="tableColumns" :data="tableData"
+        :disabledHover="disabledHover" :draggable="draggable" :height="tableHeight" :max-height="tableMaxHeight"
+        :highlightRow="highlightRow" :loading="tableLoading" :noDataText="noDataText"
+        :noFilteredDataText="noFilteredDataText" :rowClassName="rowClassName" :row-key="rowKey"
+        :show-summary="tableShowSummary" :showHeader="tableShowHeader" :size="tableSize" :spanMethod="tableSpanMethod"
+        :stripe="tableStripe" :summaryMethod="tableSummaryMethod" :tooltip-theme="tooltipTheme" :width="tableWidth"
+        @on-sort-change="onSortChange" @on-current-change="onCurrentChange" @on-select="onSelect"
+        @on-select-cancel="onSelectCancel" @on-select-all="onSelectAll" @on-select-all-cancel="onSelectAllCancel"
+        @on-selection-change="onSelectionChange" @on-filter-change="onFilterChange" @on-row-click="onRowClick"
+        @on-row-dblclick="onRowDblclick" @on-expand="onExpand" @on-drag-drop="onDragDrop"
+        @on-column-width-resize="onColumnWidthResize">
+        <div v-if="slots.header" slot="header">
+          <slot name="header"></slot>
+        </div>
+        <div v-if="slots.footer" slot="footer">
+          <slot name="footer"></slot>
+        </div>
+        <div v-if="slots.loading" slot="loading">
+          <slot name="loading"></slot>
+        </div>
+      </Table>
+      </Col>
+    </Row>
+    <Row v-if="!pageDisable" style="margin-top:15px;" ref="pageRef">
+      <Col span="24" style="text-align:right">
+      <Page :current="currentPage" :total="totalNumber" :page-size-opts="pageSizeOpts" :pageSize="limitNumber"
+        show-elevator show-sizer show-total @on-change="onPageChange" @on-page-size-change="onPageSizeChange">
+      </Page>
+      </Col>
+    </Row>
+  </div>
+</template>
+<script>
+import md5 from '@lambo-design/shared/utils/crypto/md5.js'
+import { deepCopy, isJson } from '@lambo-design/shared/utils/assist'
+import ajax from '@lambo-design/shared/utils/ajax'
+import exportData from './comps/export-data.vue'
+
+export default {
+  name: 'LamboPagingTableBi',
+  components: {
+    exportData
+  },
+  props: {
+    radioSelectIndex: {
+      type: Number,
+      default: -1
+    },
+    tableName: {
+      type: String,
+      default: '表格数据'
+    },
+    //是否显示分页
+    pageDisable: {
+      type: Boolean,
+      default: false
+    },
+    //取数的url
+    dataUrl: {
+      type: String,
+      default: ''
+    },
+    //导出的url
+    exportUrl: {
+      type: String,
+      default: ''
+    },
+    //导出模式
+    exportMode: {
+      type: String,
+      default: 'front'
+    },
+    //批量导出时单次导出数量
+    exportBatchSize: {
+      type: Number,
+      default: -1
+    },
+    exportRequestLimit: {
+      type: Number,
+      default: -1
+    },
+    exportSpanColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    requestMethod: {
+      type: String,
+      default: 'GET',
+    },
+    requestPayload: {
+      type: Boolean,
+      default: false
+    },
+    //查询条件
+    searchParams: {
+      type: Object
+    },
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    size: {
+      type: String,
+      validator(value) {
+        return ['small', 'large', 'default'].indexOf(value) > -1;
+      }
+    },
+    width: {
+      type: [Number, String]
+    },
+    height: {
+      type: [Number, String]
+    },
+    stripe: {
+      type: Boolean,
+      default: true
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    highlightRow: {
+      type: Boolean,
+      default: false
+    },
+    rowClassName: {
+      type: Function,
+      default() {
+        return '';
+      }
+    },
+    context: {
+      type: Object
+    },
+    noDataText: {
+      type: String
+    },
+    noFilteredDataText: {
+      type: String
+    },
+    disabledHover: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    rowKey: {
+      type: [Boolean, String],
+      default: false
+    },
+    //是否显示左固定列配置
+    showFixedColumnFilter: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.showFixedColumnFilter ? this.$IVIEW.table.showFixedColumnFilter : false;
+      }
+    },
+    //是否显示全屏按钮
+    showFullViewBtn: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.showFullViewBtn ? this.$IVIEW.table.showFullViewBtn : false;
+      }
+    },
+    //是否显示查询按钮
+    showSearchBtn: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.showSearchBtn ? this.$IVIEW.table.showSearchBtn : false;
+      }
+    },
+    showSearchIcon: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.queryFilter && this.$IVIEW.queryFilter.showSearchIcon ? this.$IVIEW.queryFilter.showSearchIcon : false;
+      }
+    },
+    //表格是否自适应高度
+    autoFixHeight: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.autoFixHeight ? this.$IVIEW.table.autoFixHeight : false;
+      }
+    },
+    //自适应高度时，需要减去的底部高度
+    tableBottomHeight: {
+      type: Number,
+      default: 28
+    },
+    showOptionText: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.showOptionText ? this.$IVIEW.table.showOptionText : false;
+      }
+    },
+    //是否显示表格右上角内置按钮
+    showTableOption: {
+      type: Boolean,
+      default: true
+    },
+    //表格右上角设置布局方式
+    optionLayout: {
+      type: String,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.optionLayout ? this.$IVIEW.table.optionLayout : 'default';
+      },
+      validator(value) {
+        return ['flex', 'default'].indexOf(value) > -1;
+      }
+    },
+    exportName: String,
+    transformRequest: {
+      type: Function,
+      default: function (data) {
+        return data;
+      }
+    },
+    transformResponse: {
+      type: Function,
+      default: function (data) {
+        return data;
+      }
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    tooltipTheme: {
+      type: String,
+      default: 'dark'
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    summaryMethod: {
+      type: Function
+    },
+    spanMethod: {
+      type: Function
+    },
+    autoSearch: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.disableAutoSearch ? !this.$IVIEW.table.disableAutoSearch : true;
+      }
+    },
+    columnResizable: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.columnResizable ? this.$IVIEW.table.columnResizable : false;
+      }
+    },
+    disableColumnRefresh: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.disableColumnRefresh ? this.$IVIEW.table.disableColumnRefresh : false;
+      }
+    },
+    activatedRefresh: {
+      type: Boolean,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.activatedRefresh ? this.$IVIEW.table.activatedRefresh : false;
+      }
+    },
+    pageSizeOpts: {
+      type: Array,
+      default: function () {
+        return [10, 20, 50, 100, 200];
+      }
+    },
+    pageSize: {
+      type: Number,
+      default() {
+        return this.$IVIEW && this.$IVIEW.table && this.$IVIEW.table.pageSize ? this.$IVIEW.table.pageSize : 10;
+      }
+    },
+    requestSuccessCodes: {
+      type: Array,
+      default: function () {
+        return [1, "1", "000"]
+      },
+      validator(value) {
+        if (value != null && [...value].slice().sort().toString() !== [1, "1", "000"].sort().toString()) {
+          console.warn("不推荐单独设置请求成功返回码");
+        }
+        return value instanceof Array;
+      }
+    },
+    messageInfo: {
+      type: Object,
+      default: function () {
+        return {
+          class: '',
+          content: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      tableData: this.data,
+      tableWidth: this.width,
+      tableHeight: this.height,
+      tableLoading: this.loading,
+      cloneColumns: [],
+      //样式相关
+      tableStripe: this.stripe,
+      tableBorder: this.border,
+      tableShowHeader: this.showHeader,
+      tableSize: this.size,
+      tableShowSummary: this.showSummary,
+      tableSummaryMethod: this.summaryMethod,
+      tableSpanMethod: this.spanMethod,
+      tableMaxHeight: '',
+
+      //单选控制
+      isSingleSelectModel: false,
+      selection: [],
+
+      //分页相关参数
+      totalNumber: 0,
+      currentPage: 1,
+      limitNumber: this.pageSize,
+      // 表格选项 flex版本
+      tableSettingFormData: {
+        limitNumber: this.limitNumber,
+        tableName: this.exportName
+      },
+      exportCurrentLoading: false,
+      exportAllLoading: false,
+      exportTableName: this.exportName,
+      //列筛选
+      checkAll: true,
+      checkAllGroup: [],
+      //导出格式
+      dataExportFormat: "xlsx",
+      //排序
+      sortParams: {},
+      //表格重置
+      hackReset: true,
+      columnID: '',
+      //固定列（只考虑左侧固定，右侧固定按钮不考虑）
+      checkAllFixedColumns: true,
+      fixedColumns: [],
+      //是否全屏（隐藏查询条件，自适应高度时才可使用）
+      isExpand: false,
+      observer: null,
+      topHeight: null,
+      screenHeight: null,
+
+      parsedColumns: []
+    }
+  },
+  computed: {
+    tableColumns() {
+      let self = this;
+      let columns = self.cloneColumns
+      for (let i = 0; i < columns.length; i++) {
+        let column = columns[i];
+        if ("type" in column && column.type === "single-selection") {
+          //当前iView版本单选要自己实现
+          self.isSingleSelectModel = true;
+          column.render = function (h, params) {
+            let index = params.index;
+            const disabled = params.row._disabled ? params.row._disabled : false
+            return h("Radio", {
+              props: {
+                "value": disabled ? false : self.radioSelectIndex !== -1 ? self.radioSelectIndex === index : self.selection[index] === undefined ? false : self.selection[index],
+                "disabled": disabled
+              },
+              on: {
+                "on-change": function () {
+                  self.selectOnChange(params.row, index);
+                }
+              }
+            })
+          }
+        }
+        if (self.columnResizable) {
+          if (!("resizable" in column)) {
+            column["resizable"] = true
+          }
+        }
+      }
+      return columns;
+    },
+    columnNameArr() {
+      let arr = [];
+      for (let index = 0; index < this.columns.length; index++) {
+        let item = this.columns[index]
+        arr.push('c' + item.title + item.key + index);
+      }
+      return arr;
+    },
+    selectedColumnNameArr() {
+      let arr = [];
+      for (let index = 0; index < this.cloneColumns.length; index++) {
+        let item = this.cloneColumns[index]
+        arr.push('c' + item.title + item.key + this.cloneColumns[index]['__origin_index']);
+      }
+      return arr;
+    },
+    fixedColumnNameArr() {
+      let arr = [];
+      for (let index = 0; index < this.cloneColumns.length; index++) {
+        let column = this.cloneColumns[index];
+        if (column.fixed !== 'right' && !this.isDefaultLeftFixed(column)) {
+          arr.push('c' + column.title + column.key + column['__origin_index']);
+        }
+      }
+      return arr;
+    },
+    selectedFixedColumnNameArr() {
+      let arr = [];
+      for (let index = 0; index < this.cloneColumns.length; index++) {
+        let column = this.cloneColumns[index];
+        if (column.fixed === 'left' && !this.isDefaultLeftFixed(column)) {
+          arr.push('c' + column.title + column.key + column['__origin_index']);
+        }
+      }
+      return arr;
+    },
+    paginationParams() {
+      let self = this;
+      return {
+        offset: (self.currentPage - 1) * self.limitNumber,
+        limit: self.limitNumber
+      }
+    },
+    reqMethod() {
+      return this.requestMethod
+    },
+    slots() {
+      return this.$slots;
+    },
+    option() {
+      const { searchParams, dataUrl, columns } = this;
+      return {
+        searchParams,
+        dataUrl,
+        columns
+      }
+    },
+    settingText() {
+      let text = '';
+      if (this.showOptionText) {
+        text = '设置'
+      }
+      return text;
+    },
+    exportCurrentText() {
+      let text = '';
+      if (this.showOptionText) {
+        text = '导出本页'
+      }
+      return text;
+    },
+    exportAllText() {
+      let text = '';
+      if (this.showOptionText) {
+        text = '导出全部'
+      }
+      return text;
+    },
+    columnFilterText() {
+      let text = '';
+      if (this.showOptionText) {
+        text = '列筛选'
+      }
+      return text;
+    },
+    columnFixedText() {
+      let text = '';
+      if (this.showOptionText) {
+        text = '列固定'
+      }
+      return text;
+    }
+  },
+  watch: {
+    option: {
+      handler: function (val, oldVal) {
+        let refresh = true
+        if (val.columns !== oldVal.columns) {
+          //查询时重置页码
+          this.cloneColumns = this.getCloneColumns(val.columns, true)
+          this.columnsFilter()
+          if (!this.disableColumnRefresh) {
+            //查询时重置页码
+            this.currentPage = 1;
+            this.tableRefresh();
+            refresh = false;
+          } else {
+            refresh = false;
+          }
+        }
+        if (val.searchParams !== oldVal.searchParams) {
+          refresh = true
+        }
+        if (val.dataUrl !== oldVal.dataUrl) {
+          refresh = true
+        }
+        if (refresh) {
+          //查询时重置页码
+          this.currentPage = 1;
+          this.tableRefresh();
+        }
+      },
+      deep: true
+    },
+    data: {
+      handler(val) {
+        this.tableData = val
+        this.totalNumber = val.length;
+      },
+      deep: true
+    },
+    showSummary: {
+      handler(val) {
+        this.tableShowSummary = val;
+      }
+    },
+    topHeight: {
+      handler: function (val, oldVal) {
+        if (val !== oldVal) {
+          this.fixTableHeight()
+        }
+      },
+      deep: true
+    },
+    screenHeight: {
+      handler: function (val, oldVal) {
+        if (val !== oldVal) {
+          this.fixTableHeight()
+        }
+      },
+      deep: true
+    },
+  },
+  methods: {
+    extractKeyTitlePairs(column) {
+      let result = {};
+      column.forEach(column => {
+        const key = column.key;
+        const type = column.type;
+        const title = column.title;
+        // 过滤到没有key、序号、单选、多选、操作列的情况
+        if (!key || ['index', 'selection', 'single-selection'].includes(type) || title === '操作') {
+          return;
+        }
+        result[key] = title;
+        if (column.children) {
+          Object.assign(result, this.extractKeyTitlePairs(column.children));
+        }
+      });
+      return result;
+    },
+    tableRefresh: function () {
+      let self = this;
+      self.selection = []
+      if (self.dataUrl) {
+        self.tableLoading = true;
+        let options = {
+          url: self.dataUrl,
+          method: self.reqMethod,
+          transformRequest: [...ajax.defaults.transformRequest, self.transformRequest],
+          transformResponse: [...ajax.defaults.transformResponse, self.transformResponse],
+          responseType: 'json'
+        }
+        if (self.reqMethod === 'GET') {
+          options = Object.assign({}, options,
+            {
+              params: Object.assign({}, self.pageDisable ? {} : self.paginationParams, self.sortParams, self.searchParams)
+            }
+          )
+        } else if (self.reqMethod === 'POST') {
+          options = Object.assign({}, options,
+            {
+              data: Object.assign({}, self.pageDisable ? {} : self.paginationParams, self.sortParams, self.searchParams),
+              payload: self.requestPayload
+            }
+          )
+        }
+
+        ajax.request(options).then(function (resp) {
+          if (resp.data) {
+            //这里是为了做IE11兼容
+            if (!isJson(resp.data)) {
+              resp.data = JSON.parse(resp.data);
+            }
+            if (self.requestSuccessCodes.includes(resp.data.code)) {
+              self.tableData = resp.data.data.rows;
+              self.totalNumber = resp.data.data.total;
+              self.$emit("on-data-load", resp.data);
+            } else if (resp.data.code === 0) {
+              console.log("请求失败：", resp)
+              if (Object.prototype.hasOwnProperty.call(resp.data, "message")) {
+                if (resp.data.message) {
+                  self.$Message.error('请求失败[' + resp.data.message + ']')
+                } else {
+                  self.$Message.error('请求失败')
+                }
+              } else {
+                self.$Message.error('请求失败')
+              }
+            } else {
+              self.tableData = resp.data.rows;
+              self.totalNumber = resp.data.total;
+            }
+          }
+          self.tableLoading = false;
+        });
+      } else {
+        self.totalNumber = self.data.length;
+      }
+      self.parsedColumns = self.$refs.tableRef.cloneColumns;
+    },
+    columnsFilter() {
+      // 根据localStorage筛选列
+      let self = this
+      this.columnID = md5.MD5(JSON.stringify(this.$route.path + this.columns.length))
+      let inColumns = this.columns
+      let selectedColumn = [];
+      let localColumnList
+      if (typeof window !== 'undefined') {
+        localColumnList = localStorage.getItem("tableColumns")
+      }
+      if (localColumnList != null) {
+        let localColumn = JSON.parse(localColumnList)
+        let currentColumn = localColumn.filter(item => {
+          return item.id === self.columnID
+        })
+        if (currentColumn.length === 1) {
+          let list = currentColumn[0].value
+          for (let index = 0; index < inColumns.length; index++) {
+            let item = inColumns[index];
+            let characters = 'c' + item.title + item.key + index
+            if (characters !== "") {
+              let coloumn = list.filter((it) => it === characters)
+              if (coloumn.length === 0) {
+                //缓存的不显示的
+                let itemClone = Object.assign({}, item);
+                selectedColumn.push(itemClone)
+              }
+            }
+          }
+        }
+      }
+      if (selectedColumn.length > 0) {
+        this.cloneColumns = this.getCloneColumns(selectedColumn, false)
+      } else {
+        this.cloneColumns = this.getCloneColumns(this.columns, true)
+        for (let index = 0; index < this.cloneColumns.length; index++) {
+          if (this.columnResizable) {
+            if (!("resizable" in this.cloneColumns[index])) {
+              this.cloneColumns[index]["resizable"] = true
+            }
+          }
+        }
+      }
+      if (this.columns.length !== this.cloneColumns.length) {
+        this.checkAll = false
+      }
+      this.checkAllGroup = this.selectedColumnNameArr.slice(0);
+      if (this.showFixedColumnFilter) {
+        this.fixedColumnsFilter();
+      }
+    },
+    getParams: function () {
+      return Object.assign({}, this.paginationParams, this.sortParams, this.searchParams)
+    },
+    exportOper: function (type) {
+      this.$refs.exportPart.exportExcel(type);
+    },
+    onPageChange: function (currentPageIndex) {
+      this.currentPage = currentPageIndex;
+      this.tableRefresh();
+      this.$emit("on-page-change", currentPageIndex)
+    },
+    onPageSizeChange: function (currentLimitNumber) {
+      this.limitNumber = currentLimitNumber;
+      if (this.currentPage === 1) {
+        this.tableRefresh();
+      }
+      this.$emit("on-page-size-change", currentLimitNumber)
+    },
+    handleCheckAll() {
+      this.checkAll = !this.checkAll;
+      if (this.checkAll) {
+        this.checkAllGroup = this.columnNameArr.slice(0);
+      } else {
+        this.checkAllGroup = [];
+      }
+    },
+    checkAllGroupChange(data) {
+      if (data.length === this.columnNameArr.length) {
+        this.checkAll = true;
+      } else if (data.length > 0) {
+        this.checkAll = false;
+      } else {
+        this.checkAll = false;
+      }
+    },
+    initTableCustomSetting() {
+      this.columnID = md5.MD5(JSON.stringify(this.$route.path + this.columns.length));
+      let pageSize = this.getTableCustomSetting('tableSettingLimitNumber') ? parseInt(this.getTableCustomSetting('tableSettingLimitNumber')) : this.limitNumber;
+      let tableName = this.getTableCustomSetting('tableSettingTableName') ? this.getTableCustomSetting('tableSettingTableName') : (this.exportName ? this.exportName : this.$route.meta.title);
+      this.tableSettingFormData = {
+        limitNumber: pageSize,
+        tableName: tableName
+      }
+      this.limitNumber = pageSize;
+      this.exportTableName = tableName;
+    },
+    setTableCustomSetting(storageKey, value) {
+      this.columnID = md5.MD5(JSON.stringify(this.$route.path + this.columns.length));
+      let str
+      if (typeof window !== 'undefined') {
+        str = localStorage.getItem(storageKey)
+      }
+      let list = null
+      if (str == null) {
+        list = []
+      } else {
+        list = JSON.parse(str)
+        let index = list.findIndex(column => column.id === this.columnID)
+        if (index > -1) {
+          list.splice(index, 1)
+        }
+      }
+      list.push({ id: this.columnID, value: value })
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(storageKey, JSON.stringify(list));
+      }
+    },
+    getTableCustomSetting(storageKey) {
+      this.columnID = md5.MD5(JSON.stringify(this.$route.path + this.columns.length));
+      let str
+      if (typeof window !== 'undefined') {
+        str = localStorage.getItem(storageKey)
+      }
+      if (str != null) {
+        let list = JSON.parse(str)
+        let item = list.filter(item => {
+          return item.id === this.columnID
+        })
+        return item && item.length > 0 ? item[0].value : null;
+      }
+    },
+    tableSettingSave() {
+      this.setTableCustomSetting('tableSettingLimitNumber', this.tableSettingFormData.limitNumber);
+      this.setTableCustomSetting('tableSettingTableName', this.tableSettingFormData.tableName);
+      this.limitNumber = this.tableSettingFormData.limitNumber;
+      this.exportTableName = this.tableSettingFormData.tableName;
+      // 设置完成后回调
+      this.onPageSizeChange(this.limitNumber);
+      this.$Message.success('保存成功');
+    },
+    // 导出按钮在外面布局时使用
+    exportCurrentPage() {
+      this.exportCurrentLoading = true;
+      this.$refs.exportPart.exportCurrentPage();
+      setTimeout(() => {
+        this.exportCurrentLoading = false;
+      }, 1000);
+    },
+    exportAllData() {
+      this.exportAllLoading = true;
+      if (this.exportBatchSize > 0) {
+        this.$refs.exportPart.exportBatch();
+      } else {
+        this.$refs.exportPart.exportAllData();
+      }
+      setTimeout(() => {
+        this.exportAllLoading = false;
+      }, 1000);
+    },
+    onSortChange(sortParams) {
+      this.sortParams = {
+        sort: sortParams.column.sortField || sortParams.key,
+        order: sortParams.order === "normal" ? "" : sortParams.order
+      };
+      //排序时重置页码
+      this.currentPage = 1;
+      this.tableRefresh();
+    },
+    onCurrentChange(currentRow, oldCurrentRow) {
+      this.$emit("on-current-change", currentRow, oldCurrentRow);
+    },
+    onSelect(selection, row) {
+      this.$emit("on-select", selection, row);
+    },
+    onSelectCancel(selection, row) {
+      this.$emit("on-select-cancel", selection, row);
+    },
+    onSelectAll(selection) {
+      this.$emit("on-select-all", selection);
+    },
+    onSelectAllCancel(selection) {
+      this.$emit("on-select-all-cancel", selection);
+    },
+    onSelectionChange(selection) {
+      this.$emit("on-selection-change", selection);
+    },
+    onFilterChange(column, key, order) {
+      this.$emit("on-filter-change", column, key, order);
+    },
+    getSelection() {
+      return this.$refs.tableRef.getSelection();
+    },
+    onRowClick(row, index) {
+      if (this.isSingleSelectModel) {
+        this.selectOnChange(row, index);
+        this.$emit("on-single-select", row, index);
+      }
+      this.$emit("on-row-click", row, index);
+    },
+    onRowDblclick(row, index) {
+      this.$emit("on-row-dblclick", row, index);
+    },
+    onExpand(row, status) {
+      this.$emit("on-expand", row, status);
+    },
+    onDragDrop(index1, index2) {
+      this.$emit("on-drag-drop", index1, index2);
+    },
+    columnSelect: function (quiet) {
+      let self = this;
+      let columnsObj = self.columns
+      let columns = []
+      for (let index = 0; index < columnsObj.length; index++) {
+        let column = columnsObj[index];
+        for (let colName of self.checkAllGroup) {
+          if (('c' + column.title + column.key + index) === colName) {
+            columns.push(column);
+            break;
+          }
+        }
+      }
+
+      this.cloneColumns = columns
+      if (!quiet) {
+        this.$Message.success('筛选成功');
+      }
+    },
+    columnSave() {
+      let self = this
+      this.columnSelect(true)
+      let columnKeys = []
+      for (let i in this.columns) {
+        let item = this.columns[i];
+        let characters = 'c' + item.title + item.key + i
+        if (characters !== "") {
+          let index = this.cloneColumns.findIndex(column => 'c' + column.title + column.key + column['__origin_index'] === characters)
+          if (index === -1) {
+            columnKeys.push(characters)
+          }
+        }
+      }
+
+      let localColumnListStr
+      if (typeof window !== 'undefined') {
+        localColumnListStr = localStorage.getItem("tableColumns")
+      }
+      let localColumnList = null
+      if (localColumnListStr == null) {
+        localColumnList = []
+      } else {
+        localColumnList = JSON.parse(localColumnListStr)
+        let index = localColumnList.findIndex(column => column.id === self.columnID)
+        if (index > -1) {
+          localColumnList.splice(index, 1)
+        }
+      }
+      localColumnList.push({ id: self.columnID, value: columnKeys })
+      if (typeof window !== 'undefined') {
+        localStorage.setItem("tableColumns", JSON.stringify(localColumnList))
+      }
+      this.$Message.success('保存成功');
+    },
+    columnClear() {
+      let self = this
+      let localColumnListStr
+      if (typeof window !== 'undefined') {
+        localColumnListStr = localStorage.getItem("tableColumns")
+      }
+      let localColumnList = null
+      if (localColumnListStr == null) {
+        localColumnList = []
+      } else {
+        localColumnList = JSON.parse(localColumnListStr)
+        let index = localColumnList.findIndex(column => column.id === self.columnID)
+        if (index > -1) {
+          localColumnList.splice(index, 1)
+        }
+      }
+      if (typeof window !== 'undefined') {
+        localStorage.setItem("tableColumns", JSON.stringify(localColumnList))
+      }
+      //先设成全选
+      this.checkAll = true
+      //反转并清空
+      this.handleCheckAll()
+      this.columnSelect(true)
+      this.$Message.success('清除成功');
+    },
+    handleCheckAllFixedColumns() {
+      this.checkAllFixedColumns = !this.checkAllFixedColumns;
+      if (this.checkAllFixedColumns) {
+        this.fixedColumns = this.fixedColumnNameArr.slice(0);
+      } else {
+        this.fixedColumns = [];
+      }
+    },
+    checkAllFixedColumnsChange(data) {
+      if (data.length === this.fixedColumnNameArr.length) {
+        this.checkAllFixedColumns = true;
+      } else if (data.length > 0) {
+        this.checkAllFixedColumns = false;
+      } else {
+        this.checkAllFixedColumns = false;
+      }
+    },
+    fixedColumnSelect: function (quiet) {
+      let self = this;
+      let columnsObj = self.cloneColumns
+      let columns = []
+      columnsObj.forEach(column => {
+        if (column.fixed !== 'right') {
+          if (this.isDefaultLeftFixed(column)) {
+            column.fixed = 'left';
+          } else {
+            column.fixed = null;
+            for (let colName of self.fixedColumns) {
+              if (('c' + column.title + column.key + column['__origin_index']) === colName) {
+                column.fixed = 'left';
+                break;
+              }
+            }
+          }
+        }
+        columns.push(column);
+      })
+      this.cloneColumns = columns
+      if (!quiet) {
+        this.$Message.success('固定成功');
+      }
+    },
+    fixedColumnSave() {
+      let self = this
+      this.fixedColumnSelect(true)
+      let columnKeys = []
+      this.cloneColumns.forEach(item => {
+        if (!this.isDefaultLeftFixed(item) && item.fixed === 'left') {
+          let characters = 'c' + item.title + item.key + item['__origin_index']
+          if (characters !== "") {
+            columnKeys.push(characters)
+          }
+        }
+      })
+      let localColumnListStr
+      if (typeof window !== 'undefined') {
+        localColumnListStr = localStorage.getItem("tableFixedColumns")
+      }
+      let localColumnList = null
+      if (localColumnListStr == null) {
+        localColumnList = []
+      } else {
+        localColumnList = JSON.parse(localColumnListStr)
+        let index = localColumnList.findIndex(column => column.id === self.columnID)
+        if (index > -1) {
+          localColumnList.splice(index, 1)
+        }
+      }
+      localColumnList.push({ id: self.columnID, value: columnKeys })
+      if (typeof window !== 'undefined') {
+        localStorage.setItem("tableFixedColumns", JSON.stringify(localColumnList))
+      }
+      this.$Message.success('保存成功');
+    },
+    fixedColumnClear() {
+      let self = this
+      let localColumnListStr
+      if (typeof window !== 'undefined') {
+        localColumnListStr = localStorage.getItem("tableFixedColumns")
+      }
+      let localColumnList = null
+      if (localColumnListStr == null) {
+        localColumnList = []
+      } else {
+        localColumnList = JSON.parse(localColumnListStr)
+        let index = localColumnList.findIndex(column => column.id === self.columnID)
+        if (index > -1) {
+          localColumnList.splice(index, 1)
+        }
+      }
+      if (typeof window !== 'undefined') {
+        localStorage.setItem("tableFixedColumns", JSON.stringify(localColumnList))
+      }
+      //先设成全选
+      this.checkAllFixedColumns = true
+      //反转并清空
+      this.handleCheckAllFixedColumns()
+      this.fixedColumnSelect(true)
+      this.$Message.success('清除成功');
+    },
+    fixedColumnsFilter() {
+      // 根据localStorage筛选固定列
+      let self = this
+      let inColumns = this.cloneColumns;
+      let localColumnList
+      if (typeof window !== 'undefined') {
+        localColumnList = localStorage.getItem("tableFixedColumns")
+      }
+      let list = null;
+      if (localColumnList != null) {
+        let localColumn = JSON.parse(localColumnList)
+        let currentColumn = localColumn.filter(item => {
+          return item.id === self.columnID
+        })
+        if (currentColumn.length === 1) {
+          list = currentColumn[0].value
+        }
+      }
+
+      inColumns.forEach(item => {
+        if (item.fixed !== 'right') {
+          if (this.isDefaultLeftFixed(item)) {
+            item.fixed = 'left';
+          } else if (list !== null) {
+            let characters = 'c' + item.title + item.key + item['__origin_index']
+            if (characters !== "") {
+              let column = list.filter((it) => it === characters)
+              if (column.length >= 1) {
+                item.fixed = 'left';
+              } else {
+                item.fixed = null;
+              }
+            }
+          }
+        }
+      })
+
+      this.fixedColumns = this.selectedFixedColumnNameArr.slice(0);
+      if (this.fixedColumns.length !== inColumns.length) {
+        this.checkAllFixedColumns = false;
+      }
+      this.cloneColumns = deepCopy(this.cloneColumns)
+    },
+    isDefaultLeftFixed(item) {
+      if (item.type === 'index' || item.type === 'selection' || item.type === 'single-selection') {
+        return true;
+      }
+      return false;
+    },
+    setTableStyleGlobal: function () {
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem("tableBorder", this.tableBorder);
+        window.localStorage.setItem("tableStripe", this.tableStripe);
+        window.localStorage.setItem("tableShowHeader", this.tableShowHeader);
+        window.localStorage.setItem("tableSize", this.tableSize);
+        this.$Message.success('应用全局样式成功');
+      }
+    },
+    getTableInstance: function () {
+      return this.$refs.tableRef;
+    },
+    //组件重新渲染方法
+    forceUpdate: function () {
+      this.hackReset = false
+      this.$nextTick(() => {
+        this.hackReset = true
+      })
+    },
+    //单选
+    selectOnChange: function (row, index) {
+      this.selection = Array(index).fill(false);
+      this.selection.splice(index, 1, true);
+      this.selectStore = [row];
+    },
+    onColumnWidthResize: function (newWidth, oldWidth, column, event) {
+      this.$emit("on-column-width-resize", newWidth, oldWidth, column, event);
+    },
+    fixTableHeight() {
+      let that = this;
+      this.$nextTick(() => {
+        try {
+          let topHeight = that.$refs.tableRef.$el.getBoundingClientRect().top;
+          let clientHeight = window.innerHeight;
+          let height = clientHeight - topHeight;
+          //减去底部分页按钮距离
+          let pageHeight = 0;
+          if (!that.pageDisable) {
+            pageHeight = that.$refs.pageRef.$el.clientHeight;
+            height = height - pageHeight - 15;
+          }
+          height = height - that.tableBottomHeight;
+          //判断是否有横向滚动条，有的话减去滚动条高度
+          let scrollBarHeight = 17;
+          let contentDom = document.getElementsByClassName('content-wrapper ivu-layout-content')[0] || document.getElementById('app');
+          if (contentDom !== undefined) {
+            scrollBarHeight = contentDom.getBoundingClientRect().height - contentDom.clientHeight
+          }
+          height = height - scrollBarHeight;
+          console.log("topHeight: " + topHeight + ", clientHeight: " + clientHeight + ", pageHeight: " + pageHeight + ", scrollBarHeight: " + scrollBarHeight + ", height: " + height);
+          if (height < 200) {
+            height = 200;
+          }
+          that.tableMaxHeight = height;
+        } catch (e) {
+          console.log('计算表单高度失败', e)
+        }
+      })
+    },
+    expandTable() {
+      this.isExpand = true;
+      this.fullScreenOrEsc(true);
+    },
+    contractTable() {
+      this.isExpand = false;
+      this.fullScreenOrEsc(false);
+    },
+    fullScreenOrEsc(toFull) {
+      let element = document.documentElement;
+      if (toFull !== this.checkScreenFull()) {
+        if (toFull) {
+          if (element.requestFullscreen) {
+            element.requestFullscreen();
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen();
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen();
+          }
+        } else {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+          }
+        }
+      }
+    },
+    checkScreenFull() {
+      //火狐浏览器
+      let isFull = document.mozFullScreen ||
+        document.fullscreen ||
+        //谷歌浏览器及Webkit内核浏览器
+        document.webkitIsFullScreen ||
+        document.webkitRequestFullScreen ||
+        document.mozRequestFullScreen ||
+        document.msFullscreenEnabled
+      if (isFull === undefined) {
+        isFull = false
+      }
+      return isFull;
+    },
+    addFullScreenListener() {
+      let element = document.documentElement;
+      if (element.requestFullscreen) { // HTML5 W3C 提议
+        document.addEventListener('fullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
+        document.addEventListener('webkitfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
+        document.addEventListener('mozfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else if (element.msRequestFullscreen) { // IE 11
+        document.addEventListener('msfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else {
+        document.addEventListener('webkitfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      }
+    },
+    removeFullScreenListener() {
+      let element = document.documentElement;
+      if (element.requestFullscreen) { // HTML5 W3C 提议
+        document.removeEventListener('fullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
+        document.removeEventListener('webkitfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
+        document.removeEventListener('mozfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else if (element.msRequestFullscreen) { // IE 11
+        document.removeEventListener('msfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      } else {
+        document.removeEventListener('webkitfullscreenchange', () => {
+          this.onFullScreenChange()
+        })
+      }
+    },
+    onFullScreenChange() {
+      if (this.checkScreenFull()) {
+        if (!this.isExpand) {
+          this.isExpand = true;
+        }
+      } else {
+        if (this.isExpand) {
+          this.isExpand = false;
+        }
+      }
+    },
+    initObserver() {
+      let self = this;
+      const onResize = (offset) => {
+        self.topHeight = offset.height;
+      }
+      const observer = new ResizeObserver(entities => {
+        if (entities && entities.length) {
+          entities.forEach(entity => {
+            //contentRect:位置大小信息
+            //target:dom信息
+            const { contentRect } = entity;
+            onResize(contentRect)//目标对象发生改变之后的逻辑操作
+          })
+        }
+      })
+      this.$nextTick(() => {
+        observer.observe(self.$refs.searchBox)
+        self.observer = observer
+
+        window.addEventListener('resize', self.screenHeightChange)
+      })
+    },
+    screenHeightChange() {
+      this.screenHeight = window.innerHeight;
+    },
+    doSearch: function () {
+      this.$emit("do-search");
+    },
+
+    makeResizable() {
+      // 获取引用的table
+      let table = this.$refs.tableRef;
+
+      // 如果当前table不可见则不支持拖动
+      let tableWidth = table ? table.$el.offsetWidth : 0;
+      if (tableWidth === 0) {
+        return;
+      }
+      //缓存table自动计算好的宽度值
+      let columnConfig = {}
+      for (let index in table.cloneColumns) {
+        let cloneColumn = table.cloneColumns[index];
+        columnConfig[cloneColumn.key + "_" + cloneColumn.title + "_" + index] = cloneColumn._width;
+      }
+      //遍历并添加宽度值，设置为resizable
+      for (let i in this.cloneColumns) {
+        let cloneColumn = Object.assign({}, this.cloneColumns[i]);
+        let width = columnConfig[cloneColumn.key + "_" + cloneColumn.title + "_" + i]
+        if (cloneColumn.width === width && cloneColumn.resizable) {
+          continue;
+        }
+        cloneColumn.width = width
+        cloneColumn.resizable = true
+        this.$set(this.cloneColumns, i, cloneColumn)
+      }
+    },
+    getCloneColumns(columns, original) {
+      if (original) {
+        //标记原始索引值
+        for (let index in columns) {
+          columns[index]["__origin_index"] = index;
+        }
+      }
+      let cloneColumns = [];
+      for (let index in columns) {
+        let column = columns[index];
+        let cloneColumn = deepCopy(column);
+        cloneColumn["__origin_index"] = column["__origin_index"];
+        cloneColumns.push(cloneColumn);
+      }
+      return cloneColumns;
+    }
+  },
+  created() {
+    this.cloneColumns = this.getCloneColumns(this.columns, true);
+  },
+  beforeMount() {
+    this.initTableCustomSetting();
+  },
+  mounted() {
+    //样式相关 兼容ssr要求
+    this.tableStripe = "tableStripe" in localStorage ? localStorage.getItem("tableStripe") !== "false" : this.stripe;
+    this.tableBorder = "tableBorder" in localStorage ? localStorage.getItem("tableBorder") !== "false" : this.border;
+    this.tableShowHeader = "tableShowHeader" in localStorage ? localStorage.getItem("tableShowHeader") !== "false" : this.showHeader;
+    this.tableSize = "tableSize" in localStorage ? localStorage.getItem("tableSize") : this.size;
+    if (this.autoSearch) {
+      this.tableRefresh();
+    }
+    if (this.autoFixHeight) {
+      this.initObserver()
+    }
+    if (this.showFullViewBtn) {
+      this.addFullScreenListener();
+    }
+    this.columnsFilter();
+  },
+  beforeDestroy() {
+    if (this.observer) {
+      this.observer.unobserve(this.$refs.searchBox)
+    }
+    if (this.autoFixHeight) {
+      window.removeEventListener('resize', this.screenHeightChange)
+    }
+    if (this.showFullViewBtn) {
+      this.removeFullScreenListener();
+    }
+  },
+  activated() {
+    if (this.activatedRefresh) {
+      this.tableRefresh()
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+@import "styles/css/index.less";
+</style>