7moor-element-ui 2.14.63

package/packages/table/src/table.vue

@@ -0,0 +1,896 @@
+<template>
+	<div
+		class="el-table"
+		:class="[
+			{
+				'el-table--fit': fit,
+				'el-table--striped': stripe,
+				'el-table--border': border || isGroup,
+				'el-table--hidden': isHidden,
+				'el-table--group': isGroup,
+				'el-table--fluid-height': maxHeight,
+				'el-table--scrollable-x': layout.scrollX,
+				'el-table--scrollable-y': layout.scrollY,
+				'el-table--enable-row-hover': !store.states.isComplex,
+				'el-table--enable-row-transition':
+					(store.states.data || []).length !== 0 && (store.states.data || []).length < 100,
+			},
+			tableSize ? `el-table--${tableSize}` : '',
+		]"
+		@mouseleave="handleMouseLeave($event)"
+	>
+		<div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
+		<div
+			v-if="showHeader"
+			v-mousewheel="handleHeaderFooterMousewheel"
+			class="el-table__header-wrapper"
+			ref="headerWrapper"
+		>
+			<table-header
+				ref="tableHeader"
+				:store="store"
+				:border="border"
+				:default-sort="defaultSort"
+				:style="{
+					width: layout.bodyWidth ? layout.bodyWidth + 'px' : '',
+				}"
+			>
+			</table-header>
+		</div>
+		<div
+			class="el-table__body-wrapper"
+			ref="bodyWrapper"
+			:class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']"
+			:style="[bodyHeight]"
+		>
+			<table-body
+				:context="context"
+				:store="store"
+				:stripe="stripe"
+				:row-class-name="rowClassName"
+				:row-style="rowStyle"
+				:allRender="true"
+				:highlight="highlightCurrentRow"
+				:calculationWidth="bodyWidth"
+			>
+			</table-body>
+			<div
+				v-if="!data || data.length === 0"
+				class="el-table__empty-block"
+				ref="emptyBlock"
+				:style="emptyBlockStyle"
+			>
+				<span class="el-table__empty-text">
+					<slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
+				</span>
+			</div>
+			<div v-if="$slots.append" class="el-table__append-wrapper" ref="appendWrapper">
+				<slot name="append"></slot>
+			</div>
+		</div>
+		<div
+			v-if="showSummary"
+			v-show="data && data.length > 0"
+			v-mousewheel="handleHeaderFooterMousewheel"
+			class="el-table__footer-wrapper"
+			ref="footerWrapper"
+		>
+			<table-footer
+				:store="store"
+				:border="border"
+				:sum-text="sumText || t('el.table.sumText')"
+				:summary-method="summaryMethod"
+				:default-sort="defaultSort"
+				:style="{
+					width: layout.bodyWidth ? layout.bodyWidth + 'px' : '',
+				}"
+			>
+			</table-footer>
+		</div>
+		<div
+			v-if="fixedColumns.length > 0"
+			v-mousewheel="handleFixedMousewheel"
+			class="el-table__fixed"
+			ref="fixedWrapper"
+			:style="[
+				{
+					width: layout.fixedWidth ? layout.fixedWidth + 'px' : '',
+				},
+				fixedHeight,
+			]"
+		>
+			<div v-if="showHeader" class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper">
+				<table-header
+					ref="fixedTableHeader"
+					fixed="left"
+					:border="border"
+					:store="store"
+					:calculationWidth="layout.bodyWidth ? layout.bodyWidth + 'px' : ''"
+					:style="{
+						width: bodyWidth,
+					}"
+				></table-header>
+			</div>
+			<div
+				class="el-table__fixed-body-wrapper"
+				ref="fixedBodyWrapper"
+				:style="[
+					{
+						top: layout.headerHeight + 'px',
+					},
+					fixedBodyHeight,
+				]"
+			>
+				<table-body
+					fixed="left"
+					:store="store"
+					:stripe="stripe"
+					:calculationWidth="layout.fixedWidth ? layout.fixedWidth + 'px' : ''"
+					:highlight="highlightCurrentRow"
+					:row-class-name="rowClassName"
+					:row-style="rowStyle"
+				>
+				</table-body>
+				<div
+					v-if="$slots.append"
+					class="el-table__append-gutter"
+					:style="{ height: layout.appendHeight + 'px' }"
+				></div>
+			</div>
+			<div
+				v-if="showSummary"
+				v-show="data && data.length > 0"
+				class="el-table__fixed-footer-wrapper"
+				ref="fixedFooterWrapper"
+			>
+				<table-footer
+					fixed="left"
+					:border="border"
+					:sum-text="sumText || t('el.table.sumText')"
+					:summary-method="summaryMethod"
+					:store="store"
+					:style="{
+						width: bodyWidth,
+					}"
+				></table-footer>
+			</div>
+		</div>
+		<div
+			v-if="rightFixedColumns.length > 0"
+			v-mousewheel="handleFixedMousewheel"
+			class="el-table__fixed-right"
+			ref="rightFixedWrapper"
+			:style="[
+				{
+					width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
+					right: layout.scrollY
+						? (border ? layout.gutterWidth : layout.gutterWidth || 0) + 'px'
+						: '',
+				},
+				fixedHeight,
+			]"
+		>
+			<div v-if="showHeader" class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper">
+				<table-header
+					ref="rightFixedTableHeader"
+					fixed="right"
+					:border="border"
+					:store="store"
+					:style="{
+						width: bodyWidth,
+					}"
+				></table-header>
+			</div>
+			<div
+				class="el-table__fixed-body-wrapper"
+				ref="rightFixedBodyWrapper"
+				:style="[
+					{
+						top: layout.headerHeight + 'px',
+					},
+					fixedBodyHeight,
+				]"
+			>
+				<table-body
+					fixed="right"
+					:store="store"
+					:stripe="stripe"
+					:calculationWidth="layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : ''"
+					:row-class-name="rowClassName"
+					:row-style="rowStyle"
+					:highlight="highlightCurrentRow"
+				>
+				</table-body>
+				<div
+					v-if="$slots.append"
+					class="el-table__append-gutter"
+					:style="{ height: layout.appendHeight + 'px' }"
+				></div>
+			</div>
+			<div
+				v-if="showSummary"
+				v-show="data && data.length > 0"
+				class="el-table__fixed-footer-wrapper"
+				ref="rightFixedFooterWrapper"
+			>
+				<table-footer
+					fixed="right"
+					:border="border"
+					:sum-text="sumText || t('el.table.sumText')"
+					:summary-method="summaryMethod"
+					:store="store"
+					:style="{
+						width: bodyWidth,
+					}"
+				></table-footer>
+			</div>
+		</div>
+		<div
+			v-if="rightFixedColumns.length > 0"
+			class="el-table__fixed-right-patch"
+			ref="rightFixedPatch"
+			:style="{
+				width: layout.scrollY ? layout.gutterWidth + 'px' : '0',
+				height: layout.headerHeight + 'px',
+			}"
+		></div>
+		<div class="el-table__column-resize-proxy" ref="resizeProxy" v-show="resizeProxyVisible"></div>
+	</div>
+</template>
+
+<script type="text/babel">
+	import ElCheckbox from '7moor-element-ui/packages/checkbox';
+	import { debounce, throttle } from 'throttle-debounce';
+	import { addResizeListener, removeResizeListener } from '7moor-element-ui/src/utils/resize-event';
+	import Mousewheel from '7moor-element-ui/src/directives/mousewheel';
+	import Locale from '7moor-element-ui/src/mixins/locale';
+	import Migrating from '7moor-element-ui/src/mixins/migrating';
+	import { createStore, mapStates } from './store/helper';
+	import TableLayout from './table-layout';
+	import TableBody from './table-body';
+	import TableHeader from './table-header';
+	import TableFooter from './table-footer';
+	import { parseHeight } from './util';
+
+	let tableIdSeed = 1;
+
+	export default {
+		name: 'ElTable',
+
+		mixins: [Locale, Migrating],
+
+		directives: {
+			Mousewheel,
+		},
+
+		props: {
+			data: {
+				type: Array,
+				default: function () {
+					return [];
+				},
+			},
+			columnHeight: {
+				type: Number,
+				default: 48,
+			},
+			isShowHeaderSort: Boolean,
+			headerSetting: {
+				type: Array,
+				default: function () {
+					return [];
+				},
+			},
+			size: String,
+
+			width: [String, Number],
+
+			height: [String, Number],
+
+			maxHeight: [String, Number],
+
+			fit: {
+				type: Boolean,
+				default: true,
+			},
+
+			stripe: Boolean,
+
+			border: Boolean,
+
+			rowKey: [String, Function],
+
+			context: {},
+
+			showHeader: {
+				type: Boolean,
+				default: true,
+			},
+
+			showSummary: Boolean,
+
+			sumText: String,
+
+			summaryMethod: Function,
+
+			rowClassName: [String, Function],
+
+			rowStyle: [Object, Function],
+
+			cellClassName: [String, Function],
+
+			cellStyle: [Object, Function],
+
+			headerRowClassName: [String, Function],
+
+			headerRowStyle: [Object, Function],
+
+			headerCellClassName: [String, Function],
+
+			headerCellStyle: [Object, Function],
+
+			highlightCurrentRow: Boolean,
+
+			currentRowKey: [String, Number],
+
+			emptyText: String,
+
+			expandRowKeys: Array,
+
+			defaultExpandAll: Boolean,
+
+			defaultSort: Object,
+
+			tooltipEffect: String,
+
+			spanMethod: Function,
+
+			selectOnIndeterminate: {
+				type: Boolean,
+				default: true,
+			},
+
+			indent: {
+				type: Number,
+				default: 16,
+			},
+
+			treeProps: {
+				type: Object,
+				default() {
+					return {
+						hasChildren: 'hasChildren',
+						children: 'children',
+					};
+				},
+			},
+
+			lazy: Boolean,
+
+			load: Function,
+			useVirtual: { default: false, type: Boolean }, // 是否开启虚拟滚动 | Boolean | false
+		},
+
+		components: {
+			TableHeader,
+			TableFooter,
+			TableBody,
+			ElCheckbox,
+		},
+
+		methods: {
+			getMigratingConfig() {
+				return {
+					events: {
+						expand: 'expand is renamed to expand-change',
+					},
+				};
+			},
+
+			setCurrentRow(row) {
+				this.store.commit('setCurrentRow', row);
+			},
+
+			toggleRowSelection(row, selected) {
+				this.store.toggleRowSelection(row, selected, false);
+				this.store.updateAllSelected();
+			},
+
+			toggleRowExpansion(row, expanded) {
+				this.store.toggleRowExpansionAdapter(row, expanded);
+			},
+
+			clearSelection() {
+				this.store.clearSelection();
+			},
+
+			clearFilter(columnKeys) {
+				this.store.clearFilter(columnKeys);
+			},
+
+			clearSort() {
+				this.store.clearSort();
+			},
+
+			handleMouseLeave() {
+				this.store.commit('setHoverRow', null);
+				if (this.hoverState) this.hoverState = null;
+			},
+
+			updateScrollY() {
+				const changed = this.layout.updateScrollY();
+				if (changed) {
+					this.layout.notifyObservers('scrollable');
+					this.layout.updateColumnsWidth();
+				}
+			},
+
+			handleFixedMousewheel(event, data) {
+				const bodyWrapper = this.bodyWrapper;
+				if (Math.abs(data.spinY) > 0) {
+					const currentScrollTop = bodyWrapper.scrollTop;
+					if (data.pixelY < 0 && currentScrollTop !== 0) {
+						event.preventDefault();
+					}
+					if (
+						data.pixelY > 0 &&
+						bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop
+					) {
+						event.preventDefault();
+					}
+					bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
+				} else {
+					bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
+				}
+			},
+
+			handleHeaderFooterMousewheel(event, data) {
+				const { pixelX, pixelY } = data;
+				if (Math.abs(pixelX) >= Math.abs(pixelY)) {
+					this.bodyWrapper.scrollLeft += data.pixelX / 5;
+				}
+			},
+
+			// TODO 使用 CSS transform
+			syncPostion: throttle(20, function () {
+				const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
+				const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
+				if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
+				if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;
+				if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
+				if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
+				const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
+				if (scrollLeft >= maxScrollLeftPosition) {
+					this.scrollPosition = 'right';
+				} else if (scrollLeft === 0) {
+					this.scrollPosition = 'left';
+				} else {
+					this.scrollPosition = 'middle';
+				}
+				// 监听变动动态赋值举例顶部和左边的距离
+				this.scrollLeft = scrollLeft;
+				this.scrollTop = scrollTop;
+			}),
+			bindEvents() {
+				this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
+				if (this.fit) {
+					addResizeListener(this.$el, this.resizeListener);
+				}
+			},
+
+			unbindEvents() {
+				this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
+				if (this.fit) {
+					removeResizeListener(this.$el, this.resizeListener);
+				}
+			},
+
+			resizeListener() {
+				if (!this.$ready) return;
+				let shouldUpdateLayout = false;
+				const el = this.$el;
+				const { width: oldWidth, height: oldHeight } = this.resizeState;
+
+				const width = el.offsetWidth;
+				if (oldWidth !== width) {
+					shouldUpdateLayout = true;
+				}
+
+				const height = el.offsetHeight;
+				if ((this.height || this.shouldUpdateHeight) && oldHeight !== height) {
+					shouldUpdateLayout = true;
+				}
+				this.computeScrollToRowY(this.scrollTop);
+				if (shouldUpdateLayout) {
+					this.resizeState.width = width;
+					this.resizeState.height = height;
+					this.doLayout();
+				}
+			},
+
+			doLayout() {
+				if (this.shouldUpdateHeight) {
+					this.layout.updateElsHeight();
+				}
+				this.layout.updateColumnsWidth();
+			},
+
+			sort(prop, order) {
+				this.store.commit('sort', { prop, order });
+			},
+
+			toggleAllSelection() {
+				this.store.commit('toggleAllSelection');
+			},
+			// 表体滚动到什么位置
+			pagingScrollTop(top = 0, left = 0, type) {
+				if (!this.$refs.bodyWrapper) return this.$nextTick(() => this.pagingScrollTop(top, left));
+				if (this.$refs.bodyWrapper) {
+					this.$nextTick(() => {
+						this.$refs.bodyWrapper.scrollTop = top;
+						this.$refs.bodyWrapper.scrollLeft = left || this.scrollLeft;
+						this.scrollTop = top;
+						this.scrollLeft = left || this.scrollLeft;
+					});
+				} else {
+					throw new Error('表格还没加载完毕');
+				}
+			},
+			// 动态计算需要截取那些那些虚拟滚动数据
+			computeScrollToRowY(scrollTop) {
+				if (!this.useVirtual || !this.$el) return;
+				let startIndex = parseInt(scrollTop / this.columnHeight);
+				const { start, end } = this.getVisibleRangeY(startIndex);
+				this.topStart = start;
+				this.topEnd = end;
+				this.innerTop = this.topStart * this.columnHeight;
+			},
+			// 计算开始和结束的位置
+			getVisibleRangeY(expectStart) {
+				const start = expectStart - 4;
+				return {
+					start: start >= 0 ? start : 0,
+					end: expectStart + this.visibleCount() + 4,
+				};
+			},
+			// 动态计算展示区域 能展示多少条
+			visibleCount() {
+				let height;
+				if (typeof this.height === 'number') {
+					height = this.height;
+				} else {
+					height = this.$el.offsetHeight;
+				}
+				return Math.ceil(parseFloat(height || this.maxHeight || 0) / this.columnHeight);
+			},
+			computeScrollToRowX(scrollLeft) {
+				if (!this.useVirtual) return;
+				const { toVisibleIndex, visibleSize } = this.computeVirtualX(scrollLeft);
+				const { start, end } = this.getVisibleRangeX(toVisibleIndex, visibleSize);
+				this.leftStart = start;
+				this.leftEnd = end;
+				this.innerLeft = this.columns
+					.slice(0, this.leftStart)
+					.reduce(
+						(previous, column) => previous + (column.width || column.realWidth || column.minWidth),
+						0
+					);
+			},
+			// 计算可视区域宽度展示条数
+			computeVirtualX(scrollLeft) {
+				const { $refs, columns } = this;
+				const { bodyWrapper } = $refs;
+				const tableBodyElem = bodyWrapper ? bodyWrapper : null;
+				if (tableBodyElem) {
+					const { clientWidth } = tableBodyElem;
+					const endWidth = scrollLeft + clientWidth;
+					let toVisibleIndex = -1;
+					let cWidth = 0;
+					let visibleSize = 0;
+					for (let colIndex = 0, colLen = columns.length; colIndex < colLen; colIndex++) {
+						cWidth +=
+							columns[colIndex].width || columns[colIndex].realWidth || columns[colIndex].minWidth;
+						if (toVisibleIndex === -1 && scrollLeft <= cWidth) {
+							toVisibleIndex = colIndex;
+						}
+						if (toVisibleIndex >= 0) {
+							visibleSize++;
+							if (cWidth > endWidth) {
+								break;
+							}
+						}
+					}
+					return {
+						toVisibleIndex: Math.max(0, toVisibleIndex),
+						visibleSize: Math.max(8, visibleSize),
+					};
+				}
+				return { toVisibleIndex: 0, visibleSize: 8 };
+			},
+			getVisibleRangeX(expectStart, visibleSize) {
+				const start = expectStart - 4;
+				return {
+					start: start >= 0 ? start : 0,
+					end: expectStart + visibleSize + 4,
+				};
+			},
+		},
+
+		computed: {
+			tableSize() {
+				return this.size || (this.$ELEMENT || {}).size;
+			},
+
+			bodyWrapper() {
+				return this.$refs.bodyWrapper;
+			},
+
+			shouldUpdateHeight() {
+				return (
+					this.height ||
+					this.maxHeight ||
+					this.fixedColumns.length > 0 ||
+					this.rightFixedColumns.length > 0
+				);
+			},
+
+			bodyWidth() {
+				const { bodyWidth, scrollY, gutterWidth } = this.layout;
+				return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
+			},
+
+			bodyHeight() {
+				const { headerHeight = 0, bodyHeight, footerHeight = 0 } = this.layout;
+				if (this.height) {
+					return {
+						height: bodyHeight ? bodyHeight + 'px' : '',
+					};
+				} else if (this.maxHeight) {
+					const maxHeight = parseHeight(this.maxHeight);
+					if (typeof maxHeight === 'number') {
+						return {
+							'max-height': maxHeight - footerHeight - (this.showHeader ? headerHeight : 0) + 'px',
+						};
+					}
+				}
+				return {};
+			},
+
+			fixedBodyHeight() {
+				if (this.height) {
+					return {
+						height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : '',
+					};
+				} else if (this.maxHeight) {
+					let maxHeight = parseHeight(this.maxHeight);
+					if (typeof maxHeight === 'number') {
+						maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;
+						if (this.showHeader) {
+							maxHeight -= this.layout.headerHeight;
+						}
+						maxHeight -= this.layout.footerHeight;
+						return {
+							'max-height': maxHeight + 'px',
+						};
+					}
+				}
+				return {};
+			},
+
+			fixedHeight() {
+				if (this.maxHeight) {
+					if (this.showSummary) {
+						return {
+							bottom: 0,
+						};
+					}
+					return {
+						bottom: this.layout.scrollX && this.data.length ? this.layout.gutterWidth + 'px' : '',
+					};
+				} else {
+					if (this.showSummary) {
+						return {
+							height: this.layout.tableHeight ? this.layout.tableHeight + 'px' : '',
+						};
+					}
+					return {
+						height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : '',
+					};
+				}
+			},
+
+			emptyBlockStyle() {
+				if (this.data && this.data.length) return null;
+				let height = '100%';
+				if (this.layout.appendHeight) {
+					height = `calc(100% - ${this.layout.appendHeight}px)`;
+				}
+				return {
+					width: this.bodyWidth,
+					height,
+				};
+			},
+
+			...mapStates({
+				selection: 'selection',
+				columns: 'columns',
+				tableData: 'data',
+				fixedColumns: 'fixedColumns',
+				rightFixedColumns: 'rightFixedColumns',
+				leftFixedCount: (states) => states.fixedColumns.length,
+			}),
+		},
+
+		watch: {
+			isShowHeaderSort: {
+				immediate: true,
+				handler(value) {
+					this.store.commit('setIsShowHeaderSort', value);
+				}
+			},
+			height: {
+				immediate: true,
+				handler(value) {
+					this.layout.setHeight(value);
+					this.computeScrollToRowY(this.scrollTop);
+				},
+			},
+
+			maxHeight: {
+				immediate: true,
+				handler(value) {
+					this.layout.setMaxHeight(value);
+				},
+			},
+
+			currentRowKey: {
+				immediate: true,
+				handler(value) {
+					if (!this.rowKey) return;
+					this.store.setCurrentRowKey(value);
+				},
+			},
+
+			data: {
+				immediate: true,
+				handler(value) {
+					this.store.commit('setData', value);
+					if (this.useVirtual) {
+						// 当数据改变的时候将高度变为0
+						this.pagingScrollTop(0, this.scrollLeft);
+					}
+				},
+			},
+			//监听列的选项变化
+			columns: {
+				immediate: true,
+				handler(value) {
+					if (this.useVirtual) {
+						// 当数据改变的时候将列的左边的距离变为0
+						this.pagingScrollTop(this.scrollTop, 0);
+					}
+				},
+			},
+			expandRowKeys: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						this.store.setExpandRowKeysAdapter(newVal);
+					}
+				},
+			},
+			// 监听距离顶部距离的动态变化重新渲染table
+			scrollTop: {
+				immediate: true,
+				handler(top) {
+					if (parseFloat(top) <= 0) {
+						this.scrollTop = 0;
+					}
+					this.computeScrollToRowY(top);
+				},
+			},
+			// 监听距离顶部距离的动态变化重新渲染table
+			scrollLeft: {
+				immediate: true,
+				handler(left) {
+					if (parseFloat(left) <= 0) {
+						this.scrollLeft = 0;
+					}
+					this.computeScrollToRowX(left);
+				},
+			},
+			columnHeight: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						this.store.commit('setColHeight', this.columnHeight);
+						// 行高变化设置行高
+						this.store.setColumnHeight(newVal);
+						if (this.useVirtual) {
+							// 当数据改变的时候将列的左边的距离变为0
+							this.pagingScrollTop(this.scrollTop, 0);
+						}
+					}
+				},
+			},
+		},
+
+		created() {
+			this.tableId = 'el-table_' + tableIdSeed++;
+			this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
+			this.store.commit('setColHeight', this.columnHeight);
+			this.store.commit('setHeadersetting', this.headerSetting);
+			this.store.commit('setUseVirtual', this.useVirtual);
+		},
+
+		mounted() {
+			this.bindEvents();
+			this.store.updateColumns();
+			this.doLayout();
+			this.computeScrollToRowY(this.scrollTop);
+			this.resizeState = {
+				width: this.$el.offsetWidth,
+				height: this.$el.offsetHeight,
+			};
+
+			// init filters
+			this.store.states.columns.forEach((column) => {
+				if (column.filteredValue && column.filteredValue.length) {
+					this.store.commit('filterChange', {
+						column,
+						values: column.filteredValue,
+						silent: true,
+					});
+				}
+			});
+
+			this.$ready = true;
+		},
+
+		destroyed() {
+			this.unbindEvents();
+		},
+
+		data() {
+			const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
+			this.store = createStore(this, {
+				rowKey: this.rowKey,
+				defaultExpandAll: this.defaultExpandAll,
+				selectOnIndeterminate: this.selectOnIndeterminate,
+				// TreeTable 的相关配置
+				indent: this.indent,
+				lazy: this.lazy,
+				lazyColumnIdentifier: hasChildren,
+				childrenColumnName: children,
+			});
+			const layout = new TableLayout({
+				store: this.store,
+				table: this,
+				fit: this.fit,
+				showHeader: this.showHeader,
+			});
+			return {
+				layout,
+				realheight: 0,
+				isHidden: false,
+				renderExpanded: null,
+				resizeProxyVisible: false,
+				resizeState: {
+					width: null,
+					height: null,
+				},
+				// 是否拥有多级表头
+				isGroup: false,
+				scrollPosition: 'left',
+				scrollTop: 0, // 滚动到顶部的位置
+				scrollLeft: 0, // 滚动到左边的位置
+				innerTop: 0, // 顶部虚拟列表应该滑动到的位置
+				topStart: 0, // 顶部虚拟滚动数据的开始位置
+				topEnd: 0, // 顶部虚拟滚动数据的结束位置
+				innerLeft: 0, // 左侧虚拟列表应该滑动到的位置
+				leftStart: 0, // 左侧虚拟滚动数据的开始位置
+				leftEnd: 0, // 左侧虚拟滚动数据的结束位置
+			};
+		},
+	};
+</script>