sh-view 1.7.5 → 2.0.0

package/packages/components/global-components/{sh-vxe-table → sh-table}/index.vue

@@ -1,351 +1,329 @@
-<template>
-	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: shVxeTableHeight }">
-		<vxe-grid
-			:id="id"
-			ref="vxeGrid"
-			:key="renderKey"
-			:class="{ 'is--hasfooter': showFooter }"
-			:columns="tableColumns"
-			:data="tableFilterData || dataSourse"
-			:width="width"
-			:height="height"
-			:min-height="minHeight"
-			:max-height="maxHeight"
-			:auto-resize="autoResize"
-			:sync-resize="syncResize"
-			:stripe="stripe && !tableTreeConfig"
-			:border="border"
-			:round="round"
-			:size="size"
-			:loading="loading"
-			:align="align"
-			:header-align="headerAlign"
-			:show-header="showHeader"
-			:row-class-name="rowClassName"
-			:cell-class-name="cellClassName"
-			:header-row-class-name="headerRowClassName"
-			:header-cell-class-name="headerCellClassName"
-			:footer-row-class-name="footerRowClassName"
-			:footer-cell-class-name="footerCellClassName"
-			:show-footer="showFooter"
-			:footer-method="footerMethod || tableFooterMethod"
-			:footer-span-method="footerSpanMethod || tableFooterSpanMethod"
-			:merge-cells="mergeCells"
-			:merge-footer-items="mergeFooterItems"
-			:show-overflow="showOverflow"
-			:show-header-overflow="showHeaderOverflow"
-			:show-footer-overflow="showFooterOverflow"
-			:keep-source="keepSource"
-			:empty-text="noDataText"
-			:row-config="rowConfig"
-			:column-config="tableColumnConfig"
-			:checkbox-config="tableCheckboxConfig"
-			:radio-config="radioConfig"
-			:tree-config="tableTreeConfig"
-			:seq-config="seqConfig"
-			:expand-config="expandConfig"
-			:tooltip-config="tooltipConfig"
-			:edit-config="tableEditConfig"
-			:valid-config="validConfig"
-			:edit-rules="tableEditRules"
-			:toolbar-config="toolbarConfig"
-			:pager-config="tablePagerConfig"
-			:keyboard-config="keyboardConfig"
-			:sort-config="sortConfig"
-			:mouse-config="mouseConfig"
-			:custom-config="customConfig"
-			:export-config="tableExportConfig"
-			:print-config="tablePrintConfig"
-			:scroll-x="scrollX"
-			:scroll-y="tableScrollY"
-			@current-change="onCurrentChange"
-			@radio-change="onRadioChange"
-			@checkbox-change="onSelectionChange"
-			@checkbox-all="onSelectionChange"
-			@checkbox-range-end="onSelectionChange"
-			@cell-click="onCellClick"
-			@cell-dblclick="onCellDblClick"
-			@header-cell-click="onHeaderCellClick"
-			@sort-change="onSortChange"
-			@filter-change="onFilterChange"
-			@toggle-row-expand="onToggleRowExpand"
-			@toggle-tree-expand="onToggleTreeExpand"
-			@edit-closed="onEditClosed"
-			@edit-actived="onEditActived"
-			@scroll="onScroll"
-			@custom="onCustom"
-			@page-change="onPageChange"
-			@toolbar-button-click="onToolbarButtonClick"
-			@toolbar-tool-click="onToolbarToolClick"
-			@option-click="handleGoptionClick">
-			<template #form>
-				<slot name="head"></slot>
-				<slot name="form">
-					<sh-query
-						v-if="tableGlobalConfig.search"
-						ref="vxeGridForm"
-						:size="size"
-						:data="queryData"
-						:items="tableFormItems"
-						:rules="tableEditRules"
-						:valid-config="validConfig"
-						:global-config="tableGlobalConfig"
-						:transformitem="false"
-						@submit="onFormSubmit"
-						@reset="onFormReset"
-						@collapsed="onFormCollapsed"
-						@edit-closed="onFormEditClosed">
-						<template #footLeft><slot name="formLeft"></slot></template>
-						<template #footRight><slot name="formRight"></slot></template>
-					</sh-query>
-				</slot>
-			</template>
-			<template #toolbar>
-				<div class="sh-table-toolbar-wrap">
-					<div class="sh-table-toolbar-left">
-						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
-							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
-						</div>
-						<!--ps:全表搜索不支持反转-->
-						<div v-if="tableGlobalConfig.globalFilter && !reverse" class="sh-table-toolbar-item">
-							<vxe-input
-								v-model="tableFilterText"
-								:size="size"
-								clearable
-								type="search"
-								placeholder="全局关键字搜索"
-								@blur="handleTableFilter"
-								@clear="handleTableFilter"
-								@search-click="handleTableFilter" />
-							<span v-if="tableFilterData">
-								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
-							</span>
-						</div>
-						<div v-if="$slots.toolbarLeft" class="sh-table-toolbar-item">
-							<slot name="toolbarLeft"></slot>
-						</div>
-					</div>
-					<div class="sh-table-toolbar-right">
-						<div v-if="$slots.toolbarRight" class="sh-table-toolbar-item">
-							<slot name="toolbarRight"></slot>
-						</div>
-						<div v-if="tableGlobalConfig.addRow" class="sh-table-toolbar-item">
-							<vxe-button v-ripple status="primary" :size="size" @click="handleTableAddRow(null, undefined, true)">新增行</vxe-button>
-						</div>
-						<div v-if="tableGlobalConfig.deleteRow" class="sh-table-toolbar-item">
-							<vxe-button v-ripple status="danger" :size="size" @click="handleTableDeleteRow(null, true)">删除行</vxe-button>
-						</div>
-						<div v-if="tableGlobalConfig.zoom && tableIsHeight" class="sh-table-toolbar-item">
-							<vxe-button v-if="!tableIsFullscreen" v-ripple icon="vxe-icon-zoom-out" @click="handleTableZoomBtn(true)">全屏</vxe-button>
-							<vxe-button v-else v-ripple :size="size" icon="vxe-icon-zoom-in" @click="handleTableZoomBtn(false)">退出全屏</vxe-button>
-						</div>
-						<div v-if="tableGlobalConfig.import" class="sh-table-toolbar-item">
-							<vxe-button v-ripple :size="size" status="primary" icon="vxe-icon-upload" @click="handleTableImportBtn">导入</vxe-button>
-						</div>
-						<div v-if="tableGlobalConfig.export" class="sh-table-toolbar-item">
-							<vxe-button v-ripple :size="size" status="success" icon="vxe-icon-download" @click="handleTableExportBtn()">导出</vxe-button>
-						</div>
-						<div v-if="tableGlobalConfig.print" class="sh-table-toolbar-item">
-							<vxe-button v-ripple :size="size" status="warning" icon="vxe-icon-print" @click="handleTablePrintBtn()">打印</vxe-button>
-						</div>
-					</div>
-				</div>
-			</template>
-			<template #pagerLeftSlot>
-				<div class="sh-table-footer-info">
-					<span v-if="selectionRows.length > 0">
-						已选择 <strong>{{ selectionRows.length }}</strong> 项
-					</span>
-				</div>
-				<slot name="pagerLeft"></slot>
-			</template>
-			<template #pagerRightSlot>
-				<slot name="pagerRight"></slot>
-			</template>
-			<template #empty>
-				<sh-empty :no-data-icon="noDataIcon" :no-data-text="noDataText"></sh-empty>
-			</template>
-			<template v-for="slot in tableSlots" #[slot]="scope">
-				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
-				<slot :name="slot" v-bind="scope"></slot>
-			</template>
-		</vxe-grid>
-		<!--导入弹窗-->
-		<importModal v-if="importModal" v-model:visible="importModal" need-validate :columns="tableColumns" :import-rules="tableEditRules" @confirm="setImportData"></importModal>
-	</div>
-</template>
-
-<script>
-import defaultData from './mixin/defaultData'
-import props from './js/props'
-import methods from './js/methods'
-import importModal from './components/importModal.vue'
-export default {
-	name: 'ShTable',
-	components: {
-		importModal
-	},
-	mixins: [defaultData],
-	props: {
-		...props
-	},
-	emits: [
-		'current-change',
-		'radio-change',
-		'selection-change',
-		'cell-click',
-		'cell-dblclick',
-		'header-cell-click',
-		'sort-change',
-		'filter-change',
-		'toggle-row-expand',
-		'toggle-tree-expand',
-		'edit-closed',
-		'edit-actived',
-		'scroll',
-		'custom',
-		'page-change',
-		'toolbar-button-click',
-		'toolbar-tool-click',
-
-		'form-submit',
-		'form-reset',
-		'form-edit-closed',
-		'form-submit-invalid',
-		'import-confirm',
-		'globaloption',
-		'toolbaroption'
-	],
-	data() {
-		return {
-			// 渲染key值
-			renderKey: 1,
-			// 全选状态
-			isAllChecked: false,
-			// 半选状态
-			isIndeterminate: false,
-			// table选中keys
-			selectedRowKeys: [],
-			// table选中records
-			selectionRows: [],
-			// table分页器
-			tablePagerConfig: {},
-			// 表格格式化后表头
-			tableColumnsFixed: [],
-			// 表格全表搜索数据
-			tableFilterData: null,
-			// 多层转一维后表头
-			tableColumnsFlat: [],
-			// 根据表格表头生成表单项配置
-			tableFormItems: [],
-			// 表格根据表头自动生成验证规则
-			tableEditRules: {},
-			// 全局过滤关键字
-			tableFilterText: '',
-			// 表格当前高亮行
-			tableCurrentRowData: null,
-			// 导出入弹窗开关
-			importModal: false,
-			// 表格是否全屏显示状态
-			tableIsFullscreen: false,
-			// 根据表头生成行默认值
-			tableRowDefaultData: {}
-		}
-	},
-	computed: {
-		tableReverse() {
-			return this.reverse
-		},
-		tableGlobalConfig() {
-			return Object.assign({}, this.globalConfigDefault, this.globalConfig)
-		},
-		tableColumns() {
-			let defaultColumns = this.columnsConfigDefault.filter(item => this.tableGlobalConfig[item.type])
-			return defaultColumns.concat(this.tableColumnsFixed)
-		},
-		tableColumnConfig() {
-			return Object.assign({}, this.columnConfigDefault, this.columnConfig)
-		},
-		tableCheckboxConfig() {
-			let hasTree = this.columns.some(_ => _.treeNode)
-			return Object.assign({ range: !hasTree }, this.checkboxConfig)
-		},
-		tableTreeConfig() {
-			let hasTree = this.columns.some(_ => _.treeNode)
-			return hasTree ? Object.assign({}, this.treeConfig) : null
-		},
-		tableExportConfig() {
-			return Object.assign({ filename: this.tableGlobalConfig.tableName, sheetName: 'sheet1' }, this.exportConfigDefault, this.exportConfig)
-		},
-		tablePrintConfig() {
-			return Object.assign({ filename: this.tableGlobalConfig.tableName, sheetName: this.tableGlobalConfig.tableName }, this.printConfigDefault, this.printConfig)
-		},
-		tableEditConfig() {
-			return Object.assign({ enabled: !this.disabled, showStatus: !this.disabled, showUpdateStatus: !this.disabled, showInsertStatus: !this.disabled }, this.editConfig)
-		},
-		tableIsHeight() {
-			return this.height || this.maxHeight
-		},
-		tableScrollY() {
-			return Object.assign({ enabled: !!this.tableIsHeight, gt: 100, oSize: 0 }, this.scrollY)
-		},
-		tableVitualScroll() {
-			return this.tableScrollY.enabled
-		},
-		tableSlots() {
-			let disSlots = ['form']
-			return Object.keys(this.$slots).filter(key => !disSlots.includes(key))
-		},
-		shVxeTableHeight() {
-			return this.height === '100%' || this.height === 'auto' ? '100%' : 'auto'
-		}
-	},
-	watch: {
-		pagerConfig: {
-			handler(newvalue, oldValue) {
-				this.initPagerConfig()
-			},
-			deep: true,
-			immediate: true
-		},
-		columns: {
-			handler(newvalue, oldValue) {
-				this.initTableColumns(newvalue)
-			},
-			deep: true,
-			immediate: true
-		},
-		dataSourse: {
-			handler(newvalue, oldValue) {
-				this.initColsDefaultValue()
-				this.selectionRows = []
-			},
-			immediate: true
-		},
-		editRules: {
-			handler(newvalue, oldValue) {
-				this.initEditRules(newvalue)
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	created() {
-		this.initCreated()
-	},
-	mounted() {},
-	methods: {
-		tableRef() {
-			return this.$refs.vxeGrid
-		},
-		tableFormRef() {
-			return this.$refs.vxeGridForm
-		},
-		...methods
-	}
-}
-</script>
-
-<style lang="scss">
-@import './css/index.scss';
-</style>
+<template>
+	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
+		<vxe-grid
+			:id="id"
+			ref="vxeGrid"
+			:key="renderKey"
+			:class="{ 'is--hasfooter': showFooter }"
+			:columns="tableColumns"
+			:data="tableFilterData || dataSourse"
+			:width="width"
+			:height="height"
+			:min-height="minHeight"
+			:max-height="maxHeight"
+			:auto-resize="autoResize"
+			:sync-resize="syncResize"
+			:stripe="stripe && !tableTreeConfig"
+			:border="border"
+			:round="round"
+			:size="size"
+			:loading="loading"
+			:align="align"
+			:header-align="headerAlign"
+			:show-header="showHeader"
+			:row-class-name="rowClassName"
+			:cell-class-name="cellClassName"
+			:header-row-class-name="headerRowClassName"
+			:header-cell-class-name="headerCellClassName"
+			:footer-row-class-name="footerRowClassName"
+			:footer-cell-class-name="footerCellClassName"
+			:show-footer="showFooter"
+			:footer-method="footerMethod || tableFooterMethod"
+			:footer-span-method="footerSpanMethod || tableFooterSpanMethod"
+			:merge-cells="mergeCells"
+			:merge-footer-items="mergeFooterItems"
+			:show-overflow="showOverflow"
+			:show-header-overflow="showHeaderOverflow"
+			:show-footer-overflow="showFooterOverflow"
+			:keep-source="keepSource"
+			:empty-text="emptyText"
+			:row-config="rowConfig"
+			:column-config="tableColumnConfig"
+			:checkbox-config="tableCheckboxConfig"
+			:radio-config="radioConfig"
+			:tree-config="tableTreeConfig"
+			:seq-config="seqConfig"
+			:expand-config="expandConfig"
+			:tooltip-config="tooltipConfig"
+			:edit-config="tableEditConfig"
+			:valid-config="validConfig"
+			:edit-rules="tableEditRules"
+			:toolbar-config="toolbarConfig"
+			:pager-config="tablePagerConfig"
+			:keyboard-config="keyboardConfig"
+			:sort-config="sortConfig"
+			:mouse-config="mouseConfig"
+			:custom-config="customConfig"
+			:export-config="tableExportConfig"
+			:print-config="tablePrintConfig"
+			:scroll-x="scrollX"
+			:scroll-y="scrollY"
+			@current-change="onCurrentChange"
+			@radio-change="onRadioChange"
+			@checkbox-change="onSelectionChange"
+			@checkbox-all="onSelectionChange"
+			@checkbox-range-end="onSelectionChange"
+			@cell-click="onCellClick"
+			@cell-dblclick="onCellDblClick"
+			@header-cell-click="onHeaderCellClick"
+			@sort-change="onSortChange"
+			@filter-change="onFilterChange"
+			@toggle-row-expand="onToggleRowExpand"
+			@toggle-tree-expand="onToggleTreeExpand"
+			@edit-closed="onEditClosed"
+			@edit-actived="onEditActived"
+			@scroll="onScroll"
+			@custom="onCustom"
+			@page-change="onPageChange"
+			@toolbar-button-click="onToolbarButtonClick"
+			@toolbar-tool-click="onToolbarToolClick"
+			@option-click="handleGoptionClick">
+			<template #form>
+				<slot name="head"></slot>
+				<slot name="form">
+					<sh-query v-if="tableGlobalConfig.search" v-bind="tableQueryConfig" @submit="onFormSubmit" @reset="onFormReset" @collapsed="onFormCollapsed" @edit-closed="onFormEditClosed">
+						<template #footLeft><slot name="formLeft"></slot></template>
+						<template #footRight><slot name="formRight"></slot></template>
+					</sh-query>
+				</slot>
+			</template>
+			<template #toolbar>
+				<div class="sh-table-toolbar-wrap">
+					<div class="sh-table-toolbar-left">
+						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
+							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
+						</div>
+						<!--ps:全表搜索不支持反转-->
+						<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
+							<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
+							<span v-if="tableFilterData">
+								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
+							</span>
+						</div>
+						<div v-if="$slots.toolbarLeft" class="sh-table-toolbar-item">
+							<slot name="toolbarLeft"></slot>
+						</div>
+					</div>
+					<div class="sh-table-toolbar-right">
+						<div v-if="$slots.toolbarRight" class="sh-table-toolbar-item">
+							<slot name="toolbarRight"></slot>
+						</div>
+						<div v-if="tableGlobalConfig.zoom" class="sh-table-toolbar-item">
+							<vxe-button v-if="!tableIsFullscreen" v-ripple icon="vxe-icon-zoom-out" @click="handleTableZoomBtn(true)">全屏</vxe-button>
+							<vxe-button v-else v-ripple :size="size" icon="vxe-icon-zoom-in" @click="handleTableZoomBtn(false)">退出全屏</vxe-button>
+						</div>
+						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
+							<div class="sh-table-toolbar-item">
+								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+							</div>
+						</template>
+					</div>
+				</div>
+			</template>
+			<template #pagerLeft>
+				<div v-if="selectionRows.length" class="sh-table-footer-info">
+					已选择 <strong>{{ selectionRows.length }}</strong> 项
+				</div>
+				<slot name="pagerLeft"></slot>
+			</template>
+			<template #pagerRight>
+				<slot name="pagerRight"></slot>
+			</template>
+			<template #empty>
+				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
+			</template>
+			<template v-for="slot in tableSlots" #[slot]="scope">
+				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+				<slot :name="slot" v-bind="scope"></slot>
+			</template>
+		</vxe-grid>
+		<!--导入弹窗-->
+		<importModal
+			v-if="importModal"
+			v-model:visible="importModal"
+			need-validate
+			:columns="tableColumns"
+			:import-config="importConfig"
+			:import-rules="tableEditRules"
+			@confirm="setImportData"></importModal>
+	</div>
+</template>
+
+<script>
+import defaultData from './mixin/defaultData'
+import props from './js/props'
+import methods from './js/methods'
+import importModal from './components/importModal.vue'
+const toolsList = [
+	{ status: 'primary', code: 'addRow', content: '新增行' },
+	{ status: 'danger', code: 'deleteRow', content: '删除行' },
+	{ status: 'primary', code: 'import', icon: 'vxe-icon-upload', content: '导入' },
+	{ status: 'success', code: 'export', icon: 'vxe-icon-download', content: '导出' },
+	{ status: 'warning', code: 'print', icon: 'vxe-icon-print', content: '打印' }
+]
+export default {
+	name: 'ShTable',
+	components: {
+		importModal
+	},
+	mixins: [defaultData],
+	props: {
+		...props
+	},
+	emits: [
+		'current-change',
+		'radio-change',
+		'selection-change',
+		'cell-click',
+		'cell-dblclick',
+		'header-cell-click',
+		'sort-change',
+		'filter-change',
+		'toggle-row-expand',
+		'toggle-tree-expand',
+		'edit-closed',
+		'edit-actived',
+		'scroll',
+		'custom',
+		'page-change',
+		'toolbar-button-click',
+		'toolbar-tool-click',
+
+		'form-submit',
+		'form-reset',
+		'form-edit-closed',
+		'form-submit-invalid',
+		'import-confirm',
+		'globaloption',
+		'toolbaroption'
+	],
+	data() {
+		return {
+			// 渲染key值
+			renderKey: 1,
+			// 全选状态
+			isAllChecked: false,
+			// 半选状态
+			isIndeterminate: false,
+			// table选中keys
+			selectedRowKeys: [],
+			// table选中records
+			selectionRows: [],
+			// 表格格式化后表头
+			tableColumnsFixed: [],
+			// 表格全表搜索数据
+			tableFilterData: null,
+			// 多层转一维后表头
+			tableColumnsFlat: [],
+			// 根据表格表头生成表单项配置
+			tableFormItems: [],
+			// 表格根据表头自动生成验证规则
+			tableEditRules: {},
+			// 全局过滤关键字
+			tableFilterText: '',
+			// 表格当前高亮行
+			tableCurrentRowData: null,
+			// 导出入弹窗开关
+			importModal: false,
+			// 表格是否全屏显示状态
+			tableIsFullscreen: false,
+			// 根据表头生成行默认值
+			tableRowDefaultData: {}
+		}
+	},
+	computed: {
+		wrapHeight() {
+			return [100, '100%', 'auto'].includes(this.height) ? '100%' : 'auto'
+		},
+		tableVmConfig() {
+			return { size: this.size }
+		},
+		tableGlobalConfig() {
+			return Object.assign({}, this.globalConfigDefault, this.globalConfig)
+		},
+		tableTools() {
+			let tools = this.globalConfig?.tools || []
+			return toolsList.filter(tool => tools.includes(tool.code))
+		},
+		tableColumns() {
+			let defaultColumns = this.columnsConfigDefault.filter(item => this.tableGlobalConfig[item.type])
+			return defaultColumns.concat(this.tableColumnsFixed)
+		},
+		tableColumnConfig() {
+			return Object.assign({ isCurrent: false, isHover: true, resizable: true }, this.columnConfig)
+		},
+		tablePagerConfig() {
+			return Object.assign({ enabled: this.pagerConfig, total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, this.pagerConfig)
+		},
+		tableCheckboxConfig() {
+			let hasTree = this.columns.some(_ => _.treeNode)
+			return Object.assign({ range: !hasTree }, this.checkboxConfig)
+		},
+		tableTreeConfig() {
+			let hasTree = this.columns.some(_ => _.treeNode)
+			return hasTree ? Object.assign({}, this.treeConfig) : null
+		},
+		tableExportConfig() {
+			return Object.assign({ filename: this.tableGlobalConfig.tableName, sheetName: 'sheet1' }, this.exportConfigDefault, this.exportConfig)
+		},
+		tablePrintConfig() {
+			return Object.assign({ filename: this.tableGlobalConfig.tableName, sheetName: this.tableGlobalConfig.tableName }, this.printConfigDefault, this.printConfig)
+		},
+		tableEditConfig() {
+			return Object.assign({ enabled: !this.disabled, showStatus: !this.disabled, showUpdateStatus: !this.disabled, showInsertStatus: !this.disabled }, this.editConfig)
+		},
+		tableQueryConfig() {
+			// 高级查询
+			return Object.assign(
+				{ data: this.queryData, items: this.tableFormItems, rules: this.tableEditRules, validConfig: this.validConfig, globalConfig: this.tableGlobalConfig, transformitem: false },
+				this.tableVmConfig
+			)
+		},
+		tableFilterConfig() {
+			// 模糊搜索
+			return Object.assign({ size: this.size, clearable: true, type: 'search', placeholder: '全局关键字搜索' }, this.tableVmConfig)
+		},
+		tableSlots() {
+			let disSlots = ['head', 'form', 'formLeft', 'formRight', 'toolbar', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
+			return Object.keys(this.$slots).filter(key => !disSlots.includes(key))
+		}
+	},
+	watch: {
+		columns: {
+			handler(newvalue, oldValue) {
+				this.initTableColumns(newvalue)
+			},
+			deep: true,
+			immediate: true
+		},
+		dataSourse: {
+			handler(newvalue, oldValue) {
+				this.initColsDefaultValue()
+				this.selectionRows = []
+			},
+			immediate: true
+		},
+		editRules: {
+			handler(newvalue, oldValue) {
+				this.initEditRules(newvalue)
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {
+		this.initCreated()
+	},
+	mounted() {},
+	methods: {
+		tableRef() {
+			return this.$refs.vxeGrid
+		},
+		...methods
+	}
+}
+</script>
+
+<style lang="scss">
+@import './css/index.scss';
+</style>