ai.touchui-vue 1.31.3 → 1.32.0

package/packages/table/src/table.vue

@@ -1,1458 +1,1458 @@
-<template>
-	<div class="to-table" :class="setClass" :style="setStyle">
-		<template v-if="columns_ && columns_.length > 0">
-			<div v-if="Number(fixTop) > 0 && type !== 'v'" ref="top" class="top">
-				<table ref="topTable">
-					<table-head ref="topHead" :data="columns_" :configurable="configurable && !(Number(fixRight) > 0)" @select-all="handleSelectionAllChange" @column-change="columnChangeHandle">
-						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
-							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
-						</template>
-					</table-head>
-				</table>
-			</div>
-
-			<div v-if="Number(fixLeft) > 0 && type !== 'v'" ref="left" class="left">
-				<table ref="leftTable">
-					<table-head ref="leftHead" name="leftHead" :data="columns_.slice(0, Number(fixLeft))" @select-all="handleSelectionAllChange" @column-change="columnChangeHandle">
-						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
-							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
-						</template>
-					</table-head>
-					<table-body ref="leftBody" :data="iData" :column-data="columns_.slice(0, Number(fixLeft))">
-						<template v-for="columnx in flatColumns" :slot="columnx.prop" slot-scope="{row,column,index}">
-							<slot :name="columnx.prop" :row="row" :column="column" :index="index"></slot>
-						</template>
-					</table-body>
-				</table>
-			</div>
-
-			<div v-if="Number(fixTop) > 0 && Number(fixLeft) > 0 && type !== 'v'" ref="leftTop" class="leftTop">
-				<table>
-					<table-head ref="leftTopHead" :data="columns_.slice(0, Number(fixLeft))" @column-change="columnChangeHandle" @select-all="handleSelectionAllChange">
-						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
-							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
-						</template>
-					</table-head>
-				</table>
-			</div>
-			<div v-if="Number(fixRight) > 0 && type !== 'v'" ref="right" class="right">
-				<table ref="rightTable">
-					<table-head ref="rightHead" :data="columns_.slice(columns_.length - Number(fixRight), columns_.length)" :configurable="configurable && !(Number(fixTop) > 0)" @column-change="columnChangeHandle" @select-all="handleSelectionAllChange">
-						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
-							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
-						</template>
-					</table-head>
-					<table-body ref="rightBody" :data="iData" :column-data="columns_.slice(columns_.length - Number(fixRight), columns_.length)">
-						<template v-for="columnx in flatColumns" :slot="columnx.prop" slot-scope="{row,column,index}">
-							<slot :name="columnx.prop" :row="row" :column="column" :index="index"></slot>
-						</template>
-					</table-body>
-				</table>
-			</div>
-			<div v-if="Number(fixTop) > 0 && Number(fixRight) > 0 && type !== 'v'" ref="rightTop" class="rightTop">
-				<table>
-					<table-head ref="rightTopHead" :data="columns_.slice(columns_.length - Number(fixRight), columns_.length)" :configurable="configurable" @column-change="columnChangeHandle" @select-all="handleSelectionAllChange">
-						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
-							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
-						</template>
-					</table-head>
-				</table>
-			</div>
-			<div ref="body" class="body" @scroll="scrollHandle">
-				<table ref="table">
-					<colgroup>
-						<col v-for="(item, index) in columns_" :key="index" :style="columnStyle(item)" />
-					</colgroup>
-					<table-head ref="thead" name="body" :data="columns_" :configurable="configurable && (!Number(fixTop) > 0) && (!Number(fixRight) > 0)" @select-all="handleSelectionAllChange" @column-change="columnChangeHandle">
-						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
-							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
-						</template>
-					</table-head>
-					<table-body ref="tbody" :data="iData" :column-data="columns_">
-						<template slot="toTitle" slot-scope="{row,index}">
-							<slot name="toTitle" :row="row" :index="index"></slot>
-						</template>
-						<template v-for="columnx in flatColumns" :slot="columnx.prop" slot-scope="{row,column,index}">
-							<slot :name="columnx.prop" :row="row" :column="column" :index="index"></slot>
-						</template>
-					</table-body>
-				</table>
-			</div>
-			<to-msg v-if="nodata && !loading" :style="setMsgTopStyle" :pic="emptyPic" position="full" :title="emptyText || emptyTitle" :content="emptyContent" show></to-msg>
-			<to-msg v-if="loading" :style="setMsgTopStyle" pic="loading" position="full" show></to-msg>
-		</template>
-		<!-- 兼容旧版本 heads 配置 或 slot配置 -->
-		<template v-else>
-			<div class="body">
-				<table ref="table">
-					<thead ref="thead">
-						<tr>
-							<th v-for="(item, index) in iHeads" :key="index">{{ item }}</th>
-						</tr>
-					</thead>
-					<tbody ref="tbody" @click="handleTableClick">
-						<slot></slot>
-					</tbody>
-				</table>
-			</div>
-			<to-msg v-if="nodata && !loading" position="full" :title="emptyText || emptyTitle" :content="emptyContent" show></to-msg>
-			<to-msg v-if="loading" pic="loading" position="full" show></to-msg>
-		</template>
-		<to-float ref="action" :width="$phone?'full':actionLayerWidth" :slide="$phone" position="bottom" class="to-table-actionLayer" @click.native="$refs.action.close()">
-			<div class="to-table-actionLayerWrapper">
-				<slot v-if="current && contextAction" name="action" :row="current" :index="currentIndex"></slot>
-				<template v-if="contextSelection !== null">
-					<to-button v-if="!contextSelection" mode="text" @click="startBatch">多选</to-button>
-					<to-button v-else mode="text" @click="$emit('update:contextSelection',false); $refs.action.close();">取消多选</to-button>
-				</template>
-			</div>
-		</to-float>
-		<to-float ref="detail" slide :position="$phone?'bottom':'right'" :width="$phone?'full':'31.25'" class="to-table-detail">
-			<to-padding v-if="current" :value="1.5">
-				<to-grid :space="1.5">
-					<to-grid-item v-if="columns_.some(column => column.type === 'icon')" side>
-						<slot :detail="true" :name="columns_.find(column => column.type === 'icon').prop" :row="current" :index="currentIndex">
-							<to-icon v-size="iconSize" :value="current[columns_.find(column => column.type === 'icon').prop] || icon" v-bind="iconProps"></to-icon>
-						</slot>
-					</to-grid-item>
-					<to-grid-item>
-						<to-card padding="0">
-							<to-card-item main align="center">
-								<template v-if="columns_.some(column => column.type === 'key')" slot="title">
-									<slot :detail="true" :name="columns_.find(column => column.type === 'key').prop" :row="current" :index="currentIndex">
-										{{ current[columns_.find(column => column.type === 'key').prop] }}
-									</slot>
-								</template>
-								<template v-if="columns_.some(column => column.type === 'desc')" slot="content">
-									<slot :detail="true" :name="columns_.find(column => column.type === 'desc').prop" :row="current" :index="currentIndex">
-										{{ current[columns_.find(column => column.type === 'desc').prop] }}
-									</slot>
-								</template>
-							</to-card-item>
-							<to-card-item v-if="columns_.some(column => column.type === 'state')">
-								<slot :detail="true" :name="columns_.find(column => column.type === 'state').prop" :row="current" :index="currentIndex">
-									<to-tag mode="plain" color="primary" fillet="pill">
-										{{ current[columns_.find(column => column.type === 'state').prop] }}
-									</to-tag>
-								</slot>
-							</to-card-item>
-						</to-card>
-						<to-space v-if="hasKey"></to-space>
-						<to-param>
-							<template v-for="(column, index) in columns_">
-								<li v-if="(!['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type) && column.show !== false) || column.detail" :key="index">
-									<div class="label">{{ column.label }}</div>
-									<div class="value">
-										<slot :detail="true" :name="column.prop" :row="current" :index="currentIndex">
-											{{ current[column.prop] }}
-										</slot>
-									</div>
-								</li>
-							</template>
-						</to-param>
-					</to-grid-item>
-				</to-grid>
-			</to-padding>
-		</to-float>
-		<template v-if="!hasAction && configurable">
-			<table-config :data="columns" @change="columnChangeHandle"></table-config>
-		</template>
-	</div>
-</template>
-<script>
-import { getEventPath, getDataSet } from '../../../src/utils/dom.js'
-import tableHead from './table-head'
-import tableBody from './table-body'
-import tableConfig from './table-config'
-import { unique } from '../../../src/utils/array.js'
-import { t } from 'ai.touchui-vue/src/locale';
-function db(fn, wait = 50) {
-	// 通过闭包缓存一个定时器 id
-	let timer = null
-	// 将 debounce 处理结果当作函数返回
-	// 触发事件回调时执行这个返回函数
-	return function(...args) {
-		// 如果已经设定过定时器就清空上一次的定时器
-		if (timer) clearTimeout(timer)
-		// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
-		timer = setTimeout(() => {
-			fn.apply(this, args)
-
-			clearTimeout(timer)
-			timer = null
-		}, wait)
-	}
-}
-export default {
-	name: 'ToTable',
-	componentName: 'ToTable',
-	components: {
-		tableHead,
-		tableBody,
-		tableConfig
-	},
-	provide() {
-		return {
-			ToTable: this
-		};
-	},
-	props: {
-		// 固定列时同步 tr 的高度
-		syncHeight: Boolean,
-		loading: Boolean,
-		autoDetail: Boolean,
-		// 数据
-		data: {
-			type: Array,
-			default() {
-				return [];
-			}
-		},
-		// 高度
-		height: {
-			type: [Number, String],
-			default: ''
-		},
-		// 分割线位置
-		linePosition: {
-			type: String,
-			default: ''
-		},
-		// table列配置
-		columns: {
-			type: Array,
-			default: () => []
-		},
-		// 序号列的名称
-		indexColumnName: {
-			type: String,
-			default: () => t('to.common.index')
-		},
-		// table 无数据时显示文字
-		emptyText: {
-			type: String,
-			default: () => t('to.common.noData')
-		},
-		emptyTitle: {
-			type: String,
-			default: ''
-		},
-		emptyContent: {
-			type: String,
-			default: ''
-		},
-		emptyPic: {
-			type: String,
-			default: 'empty'
-		},
-		// 是否要高亮当前行 false
-		highlightCurrentRow: Boolean,
-		// 可选设定
-		selectable: Boolean,
-		rowSelectable: Boolean,
-		cellSelectable: Boolean,
-		remember: Boolean,
-		// 特殊行设置
-		even: Boolean,
-		// 排序方法
-		sortFunction: {
-			type: Function,
-			default: null
-		},
-		heads: {
-			type: String,
-			default: ''
-		},
-		// 固定表头/表列设置
-		fixLeft: {
-			type: [Number, String],
-			default: 0
-		},
-		fixRight: {
-			type: [Number, String],
-			default: 0
-		},
-		fixTop: {
-			type: [Number, String],
-			default: 0
-		},
-		// 外观设置
-		border: {
-			type: Boolean,
-			default: true
-		},
-		type: {
-			type: String,
-			default: ''
-		},
-		showColumns: {
-			type: [Number, String],
-			default: ''
-		},
-		space: {
-			type: [Number, String],
-			default: 0
-		},
-		itemFillet: {
-			type: String,
-			default: 'none'
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		iconSize: {
-			type: [String, Number],
-			default: 2
-		},
-		iconProps: {
-			type: Object,
-			default() {
-				return {
-					mode: 'plain',
-					color: 'primary',
-					fillet: 'round'
-				}
-			}
-		},
-		contextSelection: {
-			type: Boolean,
-			default() {
-				return null
-			}
-		},
-		contextAction: Boolean,
-		configurable: Boolean,
-		actionLayerWidth: {
-			type: [Number, String],
-			default() {
-				return 10
-			}
-		},
-		isNeedSelectAll: { // 是否需要表头的全选按钮
-			type: Boolean,
-			default: true
-		},
-		expand: Boolean,
-		clearable: Boolean,
-		msgTop: {
-			type: [Number, String],
-			default: function _default() {
-				return this.height && !this.fixTop ? '0r' : '1r'
-			}
-		}
-	},
-	data() {
-		return {
-			current: null,
-			currentIndex: 0,
-			random: Math.floor(Math.random() * 100000000),
-			checkedRadio: '',
-			checkedRadioCache: '',
-			checkedCache: [],
-			preventAdjust: false,
-			nodata: false,
-			notfull: false,
-			observer: null,
-			initData: [],
-			lastSelectedRow: null,
-			isSelectAll: false,
-			changeType: 'default',
-			changeIDataType: 'default',
-			radioValue: '',
-			iData: [],
-			iHeads: [],
-			fixed: false,
-			isStartLongtap: false,
-			longtapTimer: null,
-			stopClick: false
-		};
-	},
-	computed: {
-
-		hasAction() {
-			return this.columns.some(column => column.type === 'action')
-		},
-
-		// 普通列
-		normalColumn() {
-			if (this.type === 'v') {
-				return this.columns_.filter(column => !['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type))
-			} else {
-				return this.columns_.filter(column => !['icon', 'selection', 'radio'].includes(column.type))
-			}
-		},
-
-		// 自动支持显示详情
-		// 当默认显示的普通列数小于全部的列数时可点击当前行弹出全部列数信息作为详情
-		autoShowDetail() {
-			if (this.showColumns && this.autoDetail) {
-				if (!isNaN(this.showColumns)) {
-					if (this.showColumns < this.normalColumn.length) {
-						return true
-					} else {
-						return false
-					}
-				} else {
-					if (this.showColumns.split(',').length < this.normalColumn.length) {
-						return true
-					} else {
-						return false
-					}
-				}
-			} else {
-				return false
-			}
-		},
-
-		// 支持长按显示 action
-		longTapAction() {
-			if (this.contextAction || (this.contextSelection !== null && this.type === 'v')) {
-				let flag = false
-				this.columns.map(item => {
-					if (item.type === 'action') {
-						flag = true
-					}
-				})
-				return flag
-			} else {
-				return false
-			}
-		},
-		hasKey() {
-			let flag = false
-			this.columns.map(item => {
-				if (item.type === 'key') {
-					flag = true
-				}
-			})
-			return flag
-		},
-		hasRadio() {
-			let flag = false
-			this.columns.map(item => {
-				if (item.type === 'radio') {
-					flag = true
-				}
-			})
-			return flag
-		},
-		hasSelection() {
-			let flag = false
-			this.columns.map(item => {
-				if (item.type === 'selection') {
-					flag = true
-				}
-			})
-			return flag
-		},
-		checked() {
-			let arr = []
-			this.iData.map(item => {
-				if (item._checked) {
-					const obj = JSON.parse(JSON.stringify(item))
-					delete obj._index
-					delete obj._checked
-					delete obj._level
-					delete obj._show
-					delete obj._hover
-					delete obj._active
-					arr.push(obj)
-				}
-			})
-			if (this.remember) {
-				return unique(arr.concat(this.checkedCache))
-			} else {
-				return arr
-			}
-		},
-		// 是否是按行设置的高度
-		isRowHeight() {
-			return String(this.height).charAt(this.height.length - 1) === 'r'
-		},
-		// msg是否是按行设置的高度
-		isMsgTopRowHeight() {
-			return String(this.msgTop).charAt(this.msgTop.length - 1) === 'r'
-		},
-		columns_() {
-			let columns = this.columns
-			for (let i = 0; i < columns.length; i++) {
-				const el = columns[i]
-				if (['action', 'selection', 'radio', 'index'].includes(el.type)) {
-					continue
-				} else {
-					el._isFirst = true
-					break
-				}
-			}
-			return columns
-		},
-		flatColumns() {
-
-			// 打平多级 columns 数组，用于 slot 遍历
-			let arr = []
-			function setArr(data) {
-				data.map(column => {
-					let tempColumn = JSON.parse(JSON.stringify(column))
-					if (tempColumn.children) {
-						delete tempColumn.children
-					}
-					arr.push(tempColumn)
-					if (column.children) {
-						setArr(column.children)
-					}
-				})
-			}
-			setArr(this.columns)
-			return arr
-		},
-		setClass() {
-			let arr = [];
-			if (this.border) {
-				arr.push('to-table-border');
-			}
-			if (this.even) {
-				arr.push('to-table-even');
-			}
-			if (this.type) {
-				arr.push('to-table-type-' + this.type);
-			}
-			if (this.nodata) {
-				arr.push('to-table-nodata');
-			}
-			if (this.linePosition) {
-				arr.push('to-table-line-position-' + this.linePosition);
-			}
-			if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
-				arr.push('to-table-row-selectable');
-			}
-			if (this.height && this.isRowHeight) {
-				arr.push(`to-table-height-${this.height}`)
-			}
-			if (this.notfull) {
-				arr.push('to-table-notfull')
-			}
-			if (this.height && this.height === 'full') {
-				arr.push('to-table-height-full')
-			}
-			if (this.fixed) {
-				arr.push('to-table-fixed')
-			}
-			if (this.msgTop && this.isMsgTopRowHeight) {
-				arr.push(`to-table-msg-top-${this.msgTop}`)
-			}
-			if (this.itemFillet) {
-				arr.push(`to-table-item-fillet-${this.itemFillet}`)
-			}
-			return arr;
-		},
-		setStyle() {
-			let obj = {}
-			if (this.height && !this.isRowHeight) {
-				if (this.height !== 'full' || this.height === 0) {
-					obj.height = this.height + 'em'
-				}
-			}
-			return obj
-		},
-		setMsgTopStyle() {
-			let obj = {}
-			if (this.msgTop && !this.isMsgTopRowHeight) {
-				obj.top = this.msgTop + 'em'
-			}
-			return obj
-		}
-	},
-	watch: {
-		contextSelection(val) {
-			if (!val) {
-				this.iData.map(item => {
-					item._checked = false
-				})
-				this.checkedCache = []
-			}
-		},
-		loading: {
-			handler() {
-				if (this.$refs.loading) {
-					if (this.loading) {
-						this.$refs.loading.open()
-					} else {
-						this.$refs.loading.close()
-					}
-				}
-			},
-			immediate: true
-		},
-		heads: {
-			handler(heads) {
-				heads && (this.iHeads = heads.split(','))
-			},
-			immediate: true
-		},
-		iData: {
-			handler() {
-				if (this.changeIDataType === 'default') {
-					this.changeType = 'update'
-					this.formatData(this.iData)
-					this.$emit('update:data', this.iData)
-					this.$nextTick(()=>{
-						this.changeType = 'default'
-					})
-				}
-			},
-			deep: true
-		},
-		data: {
-			handler(data = []) {
-				if (this.changeType === 'default') {
-					if (this.remember) {
-
-						// 页面切换 idata 变化之前记住勾选了哪些
-						if (this.hasRadio) {
-							if (this.checkedRadio) {
-								let obj = JSON.parse(JSON.stringify(this.iData[Number(this.checkedRadio)]))
-								delete obj._index
-								delete obj._checked
-								delete obj._level
-								delete obj._show
-								delete obj._hover
-								delete obj._active
-								this.checkedRadioCache = JSON.stringify(obj)
-							}
-						} else if (this.hasSelection) {
-							this.iData.map(item => {
-								if (item._checked) {
-									delete item._index
-									delete item._checked
-									delete item._level
-									delete item._show
-									delete item._hover
-									delete item._active
-									this.checkedCache.push(JSON.parse(JSON.stringify(item)))
-								}
-							})
-							this.checkedCache = unique(this.checkedCache)
-						}
-
-						// 页面切换 idata 变化之后
-						this.$nextTick(()=>{
-
-							// 单选
-							this.formatData(data)
-							if (this.hasRadio) {
-								this.checkedRadio = ''
-								this.iData.map((data, index)=> {
-									let _data = JSON.parse(JSON.stringify(data))
-									delete _data._checked
-									delete _data._hover
-									delete _data._active
-									delete _data._on
-									if (this.checkedRadioCache === JSON.stringify(_data)) {
-										this.iData[index]._checked = true
-										this.checkedRadio = String(index)
-									}
-								})
-							} else if (this.hasSelection) {
-								this.checked.map((item)=>{
-									this.iData.map((data, index)=> {
-										let _item = JSON.parse(JSON.stringify(item))
-										let _data = JSON.parse(JSON.stringify(data))
-										delete _item._index
-										delete _item._checked
-										delete _item._level
-										delete _item._show
-										delete _item._hover
-										delete _item._active
-										delete _data._index
-										delete _data._checked
-										delete _data._level
-										delete _data._show
-										delete _data._hover
-										delete _data._active
-										if (JSON.stringify(_item) === JSON.stringify(_data)) {
-											this.iData[index]._checked = true
-										}
-									})
-								})
-							}
-							this.setSelectAll()
-							this.adjust()
-						})
-
-					} else {
-						this.checkedRadio = ''
-						this.formatData(data)
-						this.setSelectAll()
-						this.adjust()
-					}
-					this.$nextTick(()=>{
-						if (this.hasRadio) {
-							this.iData.map((item, index) => {
-								if (item._checked) {
-									this.checkedRadio = String(index)
-								}
-							})
-						}
-					})
-				} else {
-					this.formatData(data)
-					this.setSelectAll()
-					this.adjust()
-				}
-			},
-			immediate: true,
-			deep: true
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	activated() {
-		this.init()
-	},
-	deactivated() {
-		this.destroy()
-	},
-	beforeDestroy() {
-		this.destroy()
-	},
-	methods: {
-		init() {
-			if (this.$refs && this.$refs.tbody) {
-				// 监听 slot 中的 DOM 变化
-				let tbody = this.$refs.tbody.$el || this.$refs.tbody
-				const observer = new MutationObserver(this.adjust)
-				observer.observe(tbody, {
-					childList: true,
-					subtree: true
-				})
-				this.observer = observer
-			}
-			window.addEventListener('resize', this.dbSetFix)
-			window.addEventListener('touchend', this.restoreClick)
-		},
-		destroy() {
-			// 停止监听 slot 中的 DOM 变化
-			if (this.heads && this.$refs.tbody) {
-				this.observer.disconnect()
-			}
-			window.removeEventListener('resize', this.dbSetFix)
-			window.removeEventListener('touchend', this.restoreClick)
-		},
-		startBatch() {
-			this.$emit('update:contextSelection', true)
-			this.current._checked = true
-			this.$refs.action.close()
-		},
-		restoreClick() {
-			setTimeout(() => {
-				this.stopClick = false
-			}, 300);
-		},
-		hasVScroll() {
-			return this.$refs.table.offsetHeight > this.$el.offsetHeight
-		},
-		hasHScroll() {
-			return this.$refs.table.offsetWidth > this.$el.offsetWidth
-		},
-		getBarWidth() {
-			var scrollTester = document.createElement('div')
-			scrollTester.id = 'scrollTester'
-			scrollTester.style.width = '200px'
-			scrollTester.style.height = '200px'
-			scrollTester.style.position = 'absolute'
-			scrollTester.style.visibility = 'hidden'
-			scrollTester.style.overflow = 'scroll'
-			document.body.appendChild(scrollTester)
-			var barWidth = document.getElementById('scrollTester').offsetWidth - document.getElementById('scrollTester').scrollWidth;
-			document.body.removeChild(scrollTester)
-			scrollTester = null;
-			return barWidth
-		},
-		adjust() {
-			(db(()=>{
-				this.setBottomLine()
-				this.setNodata()
-				this.setFix()
-			}, 200))()
-		},
-		dbSetFix() {
-			(db(()=>{
-				this.setFix()
-			}, 200))()
-		},
-		setFix() {
-			if (this.type === 'v') {
-				return
-			}
-			setTimeout(() => {
-				this.setFixDiv()
-				this.syncThWidth()
-				this.syncTrHeight()
-			}, 200);
-		},
-		syncTrHeight() {
-			if (this.type === 'v' || !this.syncHeight) { return }
-			if (this.$refs.tbody && this.$refs.tbody.$el.children.length) {
-				for (let i = 0; i < this.$refs.tbody.$el.children.length; i++) {
-					const tr = this.$refs.tbody.$el.children[i];
-					if (Number(this.fixRight) > 0 && this.$refs.rightBody) {
-						this.$refs.rightBody.$el.children[i].style.height = tr.getBoundingClientRect().height + 'px'
-					}
-					if (Number(this.fixLeft) > 0 && this.$refs.leftBody) {
-						this.$refs.leftBody.$el.children[i].style.height = tr.getBoundingClientRect().height + 'px'
-					}
-				}
-			}
-		},
-		syncThWidth() {
-			if (this.columns.length > 0) {
-				if (!(this.$refs && this.$refs.thead && this.$refs.thead.$refs && this.$refs.thead.$refs.row)) {
-					return
-				}
-				const trs = this.$refs.thead.$refs.row.children
-				if (Number(this.fixTop) > 0 && this.$refs.topHead) {
-					const topTrs = this.$refs.topHead.$refs.row.children
-					for (let i = 0; i < topTrs.length; i++) {
-						const ths = trs[i].children
-						const topThs = topTrs[i].children
-						for (let j = 0; j < ths.length; j++) {
-							const th = ths[j];
-							const topTh = topThs[j];
-							topTh.style.width = th.getBoundingClientRect().width + 'px'
-						}
-					}
-				}
-				if (Number(this.fixRight) > 0 && this.$refs.rightHead) {
-					const rightTrs = this.$refs.rightHead.$refs.row.children
-					for (let i = 0; i < rightTrs.length; i++) {
-						const ths = trs[i].children
-						const rightThs = rightTrs[i].children
-						if (rightThs.length > 0) {
-							for (let j = ths.length - rightThs.length; j < ths.length; j++) {
-								const th = ths[j]
-								const rightTh = rightThs[j - ths.length + rightThs.length]
-								rightTh.style.width = th.getBoundingClientRect().width + 'px'
-								rightTh.style.height = th.getBoundingClientRect().height + 'px'
-							}
-						}
-					}
-					if (Number(this.fixTop) > 0 && this.$refs.rightTopHead) {
-						const rightTopTrs = this.$refs.rightTopHead.$refs.row.children
-						for (let i = 0; i < rightTopTrs.length; i++) {
-							const ths = trs[i].children
-							const rightTopThs = rightTopTrs[i].children
-							if (rightTopThs.length > 0) {
-								for (let i = ths.length - rightTopThs.length; i < ths.length; i++) {
-									const th = ths[i]
-									const rightTopTh = rightTopThs[i - ths.length + rightTopThs.length]
-									rightTopTh.style.width = th.getBoundingClientRect().width + 'px'
-									rightTopTh.style.height = th.getBoundingClientRect().height + 'px'
-								}
-							}
-						}
-					}
-				}
-				if (Number(this.fixLeft) > 0 && this.$refs.leftHead) {
-					const leftTrs = this.$refs.leftHead.$refs.row.children
-					for (let i = 0; i < leftTrs.length; i++) {
-						const ths = trs[i].children
-						const leftThs = leftTrs[i].children
-						if (leftThs.length > 0) {
-							for (let j = 0; j < leftThs.length; j++) {
-								const th = ths[j]
-								const leftTh = leftThs[i]
-								leftTh.style.width = th.getBoundingClientRect().width + 'px'
-								leftTh.style.height = th.getBoundingClientRect().height + 'px'
-							}
-						}
-					}
-					if (Number(this.fixTop) > 0 && this.$refs.leftTopHead) {
-						const leftTopTrs = this.$refs.leftTopHead.$refs.row.children
-						for (let i = 0; i < leftTopTrs.length; i++) {
-							const ths = trs[i].children
-							const leftTopThs = leftTopTrs[i].children
-							if (leftTopThs.length > 0) {
-								for (let i = 0; i < leftTopThs.length; i++) {
-									const th = ths[i]
-									const leftTopTh = leftTopThs[i]
-									leftTopTh.style.width = th.getBoundingClientRect().width + 'px'
-									leftTopTh.style.height = th.getBoundingClientRect().height + 'px'
-								}
-							}
-						}
-					}
-				}
-			}
-		},
-		setFixDiv() {
-			if (Number(this.fixTop) > 0 && this.$refs.top && this.$refs.topTable) {
-				if (this.hasVScroll()) {
-					this.$refs.top.style.width = this.$refs.body.offsetWidth - this.getBarWidth() + 'px'
-				}
-				this.$refs.topTable.style.width = this.$refs.table.offsetWidth + 'px'
-				this.$refs.table.style.width = this.$refs.table.offsetWidth + 'px'
-			}
-			if (Number(this.fixRight) > 0 && this.$refs.right && this.$el) {
-				if (this.hasHScroll()) {
-					this.$refs.right.style.height = this.$el.offsetHeight - this.getBarWidth() + 'px'
-				}
-				if (this.hasVScroll()) {
-					this.$refs.right.style.right = this.getBarWidth() + 'px'
-					if (Number(this.fixTop) > 0) {
-						this.$refs.rightTop.style.right = this.getBarWidth() + 'px'
-					}
-				}
-			}
-			if (Number(this.fixLeft) > 0 && this.$refs.left && this.$el) {
-				if (this.hasHScroll()) {
-					this.$refs.left.style.height = this.$el.offsetHeight - this.getBarWidth() + 'px'
-				}
-			}
-		},
-		setNodata() {
-			if (!this.$refs.tbody) return
-			let tbody = this.$refs.tbody.$el || this.$refs.tbody
-			if (tbody.children.length === 0) {
-				this.nodata = true
-			} else {
-				this.nodata = false
-			}
-		},
-		setBottomLine() {
-			if (this.height && this.$refs.table.offsetHeight < this.$el.offsetHeight - 3 && this.linePosition !== 'none' && this.linePosition !== 'v') {
-				this.notfull = true
-			} else {
-				this.notfull = false
-			}
-		},
-		formatData(data = []) {
-			this.changeIDataType = 'change'
-			let that = this
-			var dataTemp = JSON.parse(JSON.stringify(data))
-
-			// 初始化级别为 1
-			let level = 1
-
-			// 初始化一个数组，用于存储最后生成的 data
-			let arr = []
-
-			// 递归生成 data，计算出表格树每一行的 level，并标识其是否具有子对象
-			function setData(data) {
-				data.map((dataItem, dataIndex) => {
-					if (dataItem._index === undefined) {
-						that.$set(dataItem, '_index', dataItem._index || dataIndex + 1)
-					}
-					if (dataItem._checked === undefined) {
-						that.$set(dataItem, '_checked', dataItem._checked !== undefined ? dataItem._checked : false)
-					}
-					if (dataItem._level === undefined) {
-						that.$set(dataItem, '_level', level)
-					}
-					if (dataItem._show === undefined) {
-						if (level === 1 || that.expand) {
-							that.$set(dataItem, '_show', true)
-						} else {
-							that.$set(dataItem, '_show', false)
-						}
-					}
-					if (that.expand && dataItem._showChild === undefined) {
-						that.$set(dataItem, '_showChild', true)
-					}
-					arr.push(dataItem)
-					if (dataItem.children && (dataItem._hasChild === undefined || dataItem._hasChild === true)) {
-						that.$set(dataItem, '_hasChild', true)
-						level++
-						setData(dataItem.children)
-					}
-					delete dataItem.children
-				})
-				level--
-			}
-			setData(dataTemp)
-			this.iData = arr
-			setTimeout(() => {
-				this.changeIDataType = 'default'
-			}, 100);
-		},
-		// 设置全选或者不全选
-		toggleAllSelection(checked) {
-			this.iData.map(item => {
-				if (!item.disabled) {
-					this.$set(item, '_checked', checked)
-				}
-			})
-		},
-		// 全选中事件
-		handleSelectionAllChange(checked) {
-			this.isSelectAll = checked
-			this.toggleAllSelection(checked)
-			this.iData.map(item => {
-				if (!item._checked) {
-					this.removeFromCache(item)
-				}
-			})
-			this.$emit('change', this.checked, checked)
-			this.$emit('selectionChange', this.checked)
-			this.$emit('selection-change', this.checked)
-		},
-		// 根据 checkbox 计算是否全选
-		setSelectAll() {
-			let isAll = true
-			this.iData.map(item=>{
-				if (!item._checked) {
-					isAll = false
-				}
-			})
-			this.isSelectAll = isAll
-		},
-		// 行勾选事件
-		handleTableRowChecked(checked, dataIndex) {
-			const current = this.iData[dataIndex]
-			if (!checked) {
-				this.removeFromCache(this.iData[dataIndex])
-			}
-			this.setSelectAll()
-			this.$emit('change', this.checked, checked, current)
-			this.$emit('selectionChange', this.checked, current)
-			this.$emit('selection-change', this.checked, current)
-		},
-		// 从记录中移除
-		removeFromCache(rowData) {
-			for (let i = 0; i < this.checkedCache.length; i++) {
-				let _item = JSON.parse(JSON.stringify(rowData))
-				let _data = JSON.parse(JSON.stringify(this.checkedCache[i]))
-				delete _item._index
-				delete _item._checked
-				delete _item._level
-				delete _item._show
-				delete _item._hover
-				delete _item._active
-				delete _data._index
-				delete _data._checked
-				delete _data._level
-				delete _data._show
-				delete _data._hover
-				delete _data._active
-				if (JSON.stringify(_item) === JSON.stringify(_data)) {
-					this.checkedCache.splice(i, 1)
-					i--
-				}
-			}
-		},
-		// 单选框点击
-		handleTableRowRadio(current) {
-			this.$emit('change', current, true)
-			this.$emit('radioChange', current, true)
-			this.$emit('radio-change', current, true)
-		},
-		// table 点击事件
-		handleTableClick(event, eventPath) {
-			if (this.stopClick) { return}
-			if (this.rowSelectable || this.selectable || this.cellSelectable || this.autoShowDetail || this.longTapAction) {
-				const composedPath = eventPath ? eventPath : getEventPath(event)
-				for (let i = 0; i < composedPath.length; i++) {
-					const dom = composedPath[i]
-					if (String(dom.tagName).toLowerCase() === 'tr') {
-
-						this.lastSelectedRow = dom
-						const rowIndex = Number(getDataSet(dom).index)
-
-						if (this.rowSelectable || this.selectable) {
-
-							// 行点击事件
-							this.$emit('row-click', this.iData[rowIndex], rowIndex, event)
-							if (this.highlightCurrentRow) {
-								this.iData.map((item, index) => {
-									if (index === rowIndex) {
-										if (this.clearable) {
-											if (item._on) {
-												item._on = false
-											} else {
-												this.$set(item, '_on', true)
-											}
-										} else {
-											this.$set(item, '_on', true)
-										}
-									} else {
-										this.$set(item, '_on', false)
-									}
-								})
-							}
-
-							// 多选联动
-							if (this.hasSelection && !this.iData[rowIndex].disabled) {
-								this.iData[rowIndex]._checked = !this.iData[rowIndex]._checked
-								this.handleTableRowChecked(this.iData[rowIndex]._checked, rowIndex)
-							}
-
-							// 单选联动
-							if (this.hasRadio && !this.iData[rowIndex].disabled) {
-								if (this.clickRadio(this.iData[rowIndex], rowIndex)) {
-									this.selectRadio(rowIndex)
-								}
-							}
-						}
-
-						if (this.autoShowDetail) {
-							this.current = this.iData[rowIndex]
-							this.currentIndex = rowIndex
-							this.$refs.detail.open()
-						}
-
-					} else if (String(dom.tagName).toLowerCase() === 'td' && (this.cellSelectable || this.selectable)) {
-						// 单元格点击事件
-						const cellIndex = getDataSet(dom).index || -1
-						cellIndex > -1 && this.$emit('cell-click', this.iData[cellIndex], this.columns_, dom, event)
-					}
-				}
-			}
-		},
-		// table 双击事件
-		handleTableDblClick(event) {
-			if (this.stopClick) { return}
-			if (this.$listeners['row-dblclick'] || this.$listeners['cell-dblclick']) {
-				const composedPath = getEventPath(event)
-				for (let i = 0; i < composedPath.length; i++) {
-					const dom = composedPath[i]
-					if (String(dom.tagName).toLowerCase() === 'tr') {
-						// 行点击事件
-						this.lastSelectedRow = dom
-						const rowIndex = Number(getDataSet(dom).index)
-						this.$emit('row-dblclick', this.iData[rowIndex], this.columns_, event)
-
-					} else if (String(dom.tagName).toLowerCase() === 'td') {
-						// 单元格点击事件
-						const cellIndex = Number(getDataSet(dom).index) || -1
-						cellIndex > -1 && this.$emit('cell-dblclick', this.iData[cellIndex], cellIndex, dom, event)
-					}
-				}
-			}
-		},
-		// table鼠标悬移事件
-		handleTableMouseover(event) {
-			if (!this.$pc) return
-			if (this.rowSelectable || this.selectable) {
-				const composedPath = getEventPath(event)
-				for (let i = 0; i < composedPath.length; i++) {
-					const dom = composedPath[i]
-					if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable)) {
-						this.lastSelectedRow = dom
-						const rowIndex = Number(getDataSet(dom).index)
-						this.iData.map((item, index) => {
-							if (index === rowIndex) {
-								this.$set(item, '_hover', true)
-							}
-						})
-					}
-				}
-			}
-		},
-		// table鼠标悬移事件
-		handleTableMouseout(event) {
-			if (!this.$pc) return
-			if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
-				const composedPath = getEventPath(event)
-				for (let i = 0; i < composedPath.length; i++) {
-					const dom = composedPath[i]
-					if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction)) {
-						this.lastSelectedRow = dom
-						const rowIndex = Number(getDataSet(dom).index)
-						this.changeIDataType = 'change'
-						this.iData.map((item, index) => {
-							if (index === rowIndex) {
-								this.$set(item, '_hover', false)
-								this.$set(item, '_active', false)
-							}
-						})
-						this.$nextTick(()=>{
-							this.changeIDataType = 'default'
-						})
-					}
-				}
-			}
-		},
-		// table鼠标按下事件
-		handleTableMousedown(event) {
-			if (((this.$pad || this.$phone) && event.type === 'touchstart') || (this.$pc && event.type === 'mousedown')) {
-				if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
-					const composedPath = getEventPath(event)
-					for (let i = 0; i < composedPath.length; i++) {
-						const dom = composedPath[i]
-						if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction)) {
-							this.lastSelectedRow = dom
-							const rowIndex = Number(getDataSet(dom).index)
-							if (this.$phone) {
-								this.isStartLongtap = true
-								this.longtapTimer = setTimeout(() => {
-									if (this.isStartLongtap) {
-										event.preventDefault()
-										this.$emit('contextmenu', this.iData[rowIndex], rowIndex, event)
-										this.stopClick = true
-
-										this.changeIDataType = 'change'
-										this.iData.map((item, index) => {
-											if (index === rowIndex) {
-												this.$set(item, '_active', false)
-											}
-										})
-										this.$nextTick(()=>{
-											this.changeIDataType = 'default'
-										})
-
-										// 弹出功能列表
-										if (this.type === 'v' && ((this.columns.some(item => item.type === 'action') && this.contextAction) || this.contextSelection !== null)) {
-											this.current = this.iData[rowIndex]
-											this.currentIndex = rowIndex
-											this.$refs.action.open()
-										}
-									}
-									this.isStartLongtap = false
-								}, 300);
-							}
-							this.changeIDataType = 'change'
-							if (this.rowSelectable || this.selectable || this.autoShowDetail) {
-								this.iData.map((item, index) => {
-									if (index === rowIndex) {
-										this.$set(item, '_active', true)
-									}
-								})
-							}
-							this.$nextTick(()=>{
-								this.changeIDataType = 'default'
-							})
-						}
-					}
-				}
-			}
-		},
-		// table鼠标松开事件
-		handleTableMouseup(event) {
-			if (((this.$pad || this.$phone) && event.type === 'touchend') || (this.$pc && event.type === 'mouseup')) {
-				if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
-					const composedPath = getEventPath(event)
-					for (let i = 0; i < composedPath.length; i++) {
-						const dom = composedPath[i]
-						if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction)) {
-							this.lastSelectedRow = dom
-							const rowIndex = Number(getDataSet(dom).index)
-							this.changeIDataType = 'change'
-							this.iData.map((item, index) => {
-								if (index === rowIndex) {
-									this.$set(item, '_active', false)
-								}
-							})
-							this.$nextTick(()=>{
-								this.changeIDataType = 'default'
-							})
-							if (this.$phone) {
-								this.isStartLongtap = false
-								clearInterval(this.longtapTimer)
-							}
-						}
-					}
-				}
-			}
-		},
-		// table鼠标移动事件
-		handleTableMousemove(event) {
-			this.isStartLongtap = false
-			if (this.rowSelectable || this.selectable || this.autoShowDetail) {
-				const composedPath = getEventPath(event)
-				for (let i = 0; i < composedPath.length; i++) {
-					const dom = composedPath[i]
-					if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail)) {
-						this.lastSelectedRow = dom
-						const rowIndex = Number(getDataSet(dom).index)
-						this.changeIDataType = 'change'
-						this.iData.map((item, index) => {
-							if (index === rowIndex) {
-								this.$set(item, '_active', false)
-							}
-						})
-						this.$nextTick(()=>{
-							this.changeIDataType = 'default'
-						})
-					}
-					if (this.$phone) {
-						this.isStartLongtap = false
-						clearInterval(this.longtapTimer)
-					}
-				}
-			}
-		},
-		// table右击事件
-		handleTableRowRightClick(item, index, event) {
-			if (this.$pc) {
-				event.preventDefault()
-				this.$emit('contextmenu', item, index, event)
-				this.$emit('row-right-click', item, index, event)
-				if (this.longTapAction) {
-					this.current = item
-					this.$refs.action.open(event)
-				}
-			}
-		},
-		handleTableHeadCellClick(item, index, event, propKey) {
-			if (item.sortable) {
-				this.handleSortClick(item, index);
-			} else {
-				this.$emit('head-cell-click', item, index, event);
-			}
-		},
-		handleSortClick(item, index) {
-			const orderType = item.orderType
-			this.columns.map((column, columnIndex) => {
-				if (columnIndex === index) {
-					if (!orderType) {
-						this.$set(column, 'orderType', 'asc')
-					} else if (orderType === 'asc') {
-						this.$set(column, 'orderType', 'desc')
-					} else if (orderType === 'desc') {
-						this.$set(column, 'orderType', '')
-					}
-				} else {
-					if (column.sortable) {
-						this.$set(column, 'orderType', '')
-					}
-				}
-			})
-			if (this.initData.length === 0) {
-				this.initData = JSON.parse(JSON.stringify(this.data))
-			}
-			if (this.sortFunction) {
-				this.sortFunction(index, item.orderType)
-			} else {
-				this.processOrder(index, item.orderType)
-			}
-		},
-		processOrder(index, orderType) {
-			let property = this.columns[index].prop
-			if (orderType === '') {
-				for (let i = 0; i < this.initData.length; i++) {
-					this.$set(this.data, i, this.initData[i])
-				}
-				this.initData = []
-				return
-			}
-			this.data.sort((a, b)=>{
-				if (orderType === 'asc') {
-					return String(a[property]).localeCompare(String(b[property]));
-				} else if (orderType === 'desc') {
-					return String(b[property]).localeCompare(String(a[property]));
-				}
-			})
-		},
-		scrollHandle() {
-			var scrollLeft = this.$refs.body.scrollLeft;
-			var scrollTop = this.$refs.body.scrollTop;
-			if (typeof scrollLeft !== 'undefined') {
-				if (this.fixTop && this.$refs.topTable) {
-					this.$refs.topTable.style.left = 0 - scrollLeft + 'px';
-				}
-				if (this.fixRight && this.$refs.rightTable) {
-					this.$refs.rightTable.style.top = 0 - scrollTop + 'px';
-				}
-				if (this.fixLeft && this.$refs.leftTable) {
-					this.$refs.leftTable.style.top = 0 - scrollTop + 'px';
-				}
-			}
-		},
-		columnStyle(column) {
-			var obj = {};
-			if (column.width) {
-				if (!isNaN(column.width)) {
-					obj.width = column.width + 'em';
-				} else {
-					obj.width = column.width;
-				}
-			}
-			return obj;
-		},
-		checkedRadioHandle(item, dataIndex) {
-			if (this.clickRadio(item, dataIndex)) {
-				this.selectRadio(dataIndex)
-			}
-		},
-		clickRadio(item, dataIndex) {
-			if (this.checkedRadio === String(dataIndex) && this.clearable) {
-				this.checkedRadio = ''
-				this.$set(item, '_checked', false)
-				this.$emit('change', item, false)
-				this.$emit('radioChange', item, false)
-				this.$emit('radio-change', item, false)
-				return false
-			} else {
-				return true
-			}
-		},
-		selectRadio(rowIndex) {
-			// 先将所有单选都设为 false ，再选中
-			this.iData.forEach(item => {
-				item._checked = false
-			})
-
-			this.$set(this.iData[rowIndex], '_checked', true)
-
-			this.checkedRadio = String(rowIndex)
-			if (this.remember) {
-				let obj = JSON.parse(JSON.stringify(this.iData[rowIndex]))
-				delete obj._on
-				delete obj._active
-				delete obj._hover
-				delete obj._checked
-				this.checkedRadioCache = JSON.stringify(obj)
-			}
-
-			this.$emit('change', this.iData[rowIndex], true)
-			this.$emit('radioChange', this.iData[rowIndex], true)
-			this.$emit('radio-change', this.iData[rowIndex], true)
-		},
-		clear() {
-			this.iData.map(item => {item._checked = false})
-			if (this.remember) {
-				this.checkedCache = []
-			}
-			if (this.hasRadio) {
-				this.checkedRadio = ''
-				this.$emit('change', {}, false)
-			}
-		},
-		select(row) {
-			let targetIndex = this.iData.findIndex(item =>
-				Object.entries(row)
-					.filter(([key]) => !key.startsWith('_')) // 过滤掉 "_" 开头的键
-					.every(([key, value]) => item[key] === value) // 确保所有属性都匹配
-			)
-			let target = this.iData[targetIndex]
-			if (this.hasSelection) {
-				target._checked = true
-				this.$emit('change', this.checked, true, target)
-			}
-			if (this.hasRadio) {
-				this.selectRadio(targetIndex)
-			}
-		},
-		unselect(row) {
-			let target = this.iData.find(item =>
-				Object.entries(row)
-					.filter(([key]) => !key.startsWith('_')) // 过滤掉 "_" 开头的键
-					.every(([key, value]) => item[key] === value) // 确保所有属性都匹配
-			)
-			if (this.hasSelection) {
-				target._checked = false
-				this.$emit('change', this.checked, false, target)
-			}
-			if (this.hasRadio) {
-				if (target._checked) {
-					this.clear()
-				}
-			}
-		},
-		columnChangeHandle(data) {
-			this.$emit('update:columns', data)
-		}
-	}
-}
-</script>
+<template>
+	<div class="to-table" :class="setClass" :style="setStyle">
+		<template v-if="columns_ && columns_.length > 0">
+			<div v-if="Number(fixTop) > 0 && type !== 'v'" ref="top" class="top">
+				<table ref="topTable">
+					<table-head ref="topHead" :data="columns_" :configurable="configurable && !(Number(fixRight) > 0)" @select-all="handleSelectionAllChange" @column-change="columnChangeHandle">
+						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
+							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
+						</template>
+					</table-head>
+				</table>
+			</div>
+
+			<div v-if="Number(fixLeft) > 0 && type !== 'v'" ref="left" class="left">
+				<table ref="leftTable">
+					<table-head ref="leftHead" name="leftHead" :data="columns_.slice(0, Number(fixLeft))" @select-all="handleSelectionAllChange" @column-change="columnChangeHandle">
+						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
+							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
+						</template>
+					</table-head>
+					<table-body ref="leftBody" :data="iData" :column-data="columns_.slice(0, Number(fixLeft))">
+						<template v-for="columnx in flatColumns" :slot="columnx.prop" slot-scope="{row,column,index}">
+							<slot :name="columnx.prop" :row="row" :column="column" :index="index"></slot>
+						</template>
+					</table-body>
+				</table>
+			</div>
+
+			<div v-if="Number(fixTop) > 0 && Number(fixLeft) > 0 && type !== 'v'" ref="leftTop" class="leftTop">
+				<table>
+					<table-head ref="leftTopHead" :data="columns_.slice(0, Number(fixLeft))" @column-change="columnChangeHandle" @select-all="handleSelectionAllChange">
+						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
+							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
+						</template>
+					</table-head>
+				</table>
+			</div>
+			<div v-if="Number(fixRight) > 0 && type !== 'v'" ref="right" class="right">
+				<table ref="rightTable">
+					<table-head ref="rightHead" :data="columns_.slice(columns_.length - Number(fixRight), columns_.length)" :configurable="configurable && !(Number(fixTop) > 0)" @column-change="columnChangeHandle" @select-all="handleSelectionAllChange">
+						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
+							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
+						</template>
+					</table-head>
+					<table-body ref="rightBody" :data="iData" :column-data="columns_.slice(columns_.length - Number(fixRight), columns_.length)">
+						<template v-for="columnx in flatColumns" :slot="columnx.prop" slot-scope="{row,column,index}">
+							<slot :name="columnx.prop" :row="row" :column="column" :index="index"></slot>
+						</template>
+					</table-body>
+				</table>
+			</div>
+			<div v-if="Number(fixTop) > 0 && Number(fixRight) > 0 && type !== 'v'" ref="rightTop" class="rightTop">
+				<table>
+					<table-head ref="rightTopHead" :data="columns_.slice(columns_.length - Number(fixRight), columns_.length)" :configurable="configurable" @column-change="columnChangeHandle" @select-all="handleSelectionAllChange">
+						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
+							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
+						</template>
+					</table-head>
+				</table>
+			</div>
+			<div ref="body" class="body" @scroll="scrollHandle">
+				<table ref="table">
+					<colgroup>
+						<col v-for="(item, index) in columns_" :key="index" :style="columnStyle(item)" />
+					</colgroup>
+					<table-head ref="thead" name="body" :data="columns_" :configurable="configurable && (!Number(fixTop) > 0) && (!Number(fixRight) > 0)" @select-all="handleSelectionAllChange" @column-change="columnChangeHandle">
+						<template v-for="columnx in columns_" :slot="columnx.prop + '_th'" slot-scope="{column,index}">
+							<slot :name="columnx.prop + '_th'" :column="column" :index="index"></slot>
+						</template>
+					</table-head>
+					<table-body ref="tbody" :data="iData" :column-data="columns_">
+						<template slot="toTitle" slot-scope="{row,index}">
+							<slot name="toTitle" :row="row" :index="index"></slot>
+						</template>
+						<template v-for="columnx in flatColumns" :slot="columnx.prop" slot-scope="{row,column,index}">
+							<slot :name="columnx.prop" :row="row" :column="column" :index="index"></slot>
+						</template>
+					</table-body>
+				</table>
+			</div>
+			<to-msg v-if="nodata && !loading" :style="setMsgTopStyle" :pic="emptyPic" position="full" :title="emptyText || emptyTitle" :content="emptyContent" show></to-msg>
+			<to-msg v-if="loading" :style="setMsgTopStyle" pic="loading" position="full" show></to-msg>
+		</template>
+		<!-- 兼容旧版本 heads 配置 或 slot配置 -->
+		<template v-else>
+			<div class="body">
+				<table ref="table">
+					<thead ref="thead">
+						<tr>
+							<th v-for="(item, index) in iHeads" :key="index">{{ item }}</th>
+						</tr>
+					</thead>
+					<tbody ref="tbody" @click="handleTableClick">
+						<slot></slot>
+					</tbody>
+				</table>
+			</div>
+			<to-msg v-if="nodata && !loading" position="full" :title="emptyText || emptyTitle" :content="emptyContent" show></to-msg>
+			<to-msg v-if="loading" pic="loading" position="full" show></to-msg>
+		</template>
+		<to-float ref="action" :width="$phone?'full':actionLayerWidth" :slide="$phone" position="bottom" class="to-table-actionLayer" @click.native="$refs.action.close()">
+			<div class="to-table-actionLayerWrapper">
+				<slot v-if="current && contextAction" name="action" :row="current" :index="currentIndex"></slot>
+				<template v-if="contextSelection !== null">
+					<to-button v-if="!contextSelection" mode="text" @click="startBatch">多选</to-button>
+					<to-button v-else mode="text" @click="$emit('update:contextSelection',false); $refs.action.close();">取消多选</to-button>
+				</template>
+			</div>
+		</to-float>
+		<to-float ref="detail" slide :position="$phone?'bottom':'right'" :width="$phone?'full':'31.25'" class="to-table-detail">
+			<to-padding v-if="current" :value="1.5">
+				<to-grid :space="1.5">
+					<to-grid-item v-if="columns_.some(column => column.type === 'icon')" side>
+						<slot :detail="true" :name="columns_.find(column => column.type === 'icon').prop" :row="current" :index="currentIndex">
+							<to-icon v-size="iconSize" :value="current[columns_.find(column => column.type === 'icon').prop] || icon" v-bind="iconProps"></to-icon>
+						</slot>
+					</to-grid-item>
+					<to-grid-item>
+						<to-card padding="0">
+							<to-card-item main align="center">
+								<template v-if="columns_.some(column => column.type === 'key')" slot="title">
+									<slot :detail="true" :name="columns_.find(column => column.type === 'key').prop" :row="current" :index="currentIndex">
+										{{ current[columns_.find(column => column.type === 'key').prop] }}
+									</slot>
+								</template>
+								<template v-if="columns_.some(column => column.type === 'desc')" slot="content">
+									<slot :detail="true" :name="columns_.find(column => column.type === 'desc').prop" :row="current" :index="currentIndex">
+										{{ current[columns_.find(column => column.type === 'desc').prop] }}
+									</slot>
+								</template>
+							</to-card-item>
+							<to-card-item v-if="columns_.some(column => column.type === 'state')">
+								<slot :detail="true" :name="columns_.find(column => column.type === 'state').prop" :row="current" :index="currentIndex">
+									<to-tag mode="plain" color="primary" fillet="pill">
+										{{ current[columns_.find(column => column.type === 'state').prop] }}
+									</to-tag>
+								</slot>
+							</to-card-item>
+						</to-card>
+						<to-space v-if="hasKey"></to-space>
+						<to-param>
+							<template v-for="(column, index) in columns_">
+								<li v-if="(!['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type) && column.show !== false) || column.detail" :key="index">
+									<div class="label">{{ column.label }}</div>
+									<div class="value">
+										<slot :detail="true" :name="column.prop" :row="current" :index="currentIndex">
+											{{ current[column.prop] }}
+										</slot>
+									</div>
+								</li>
+							</template>
+						</to-param>
+					</to-grid-item>
+				</to-grid>
+			</to-padding>
+		</to-float>
+		<template v-if="!hasAction && configurable">
+			<table-config :data="columns" @change="columnChangeHandle"></table-config>
+		</template>
+	</div>
+</template>
+<script>
+import { getEventPath, getDataSet } from '../../../src/utils/dom.js'
+import tableHead from './table-head'
+import tableBody from './table-body'
+import tableConfig from './table-config'
+import { unique } from '../../../src/utils/array.js'
+import { t } from 'ai.touchui-vue/src/locale';
+function db(fn, wait = 50) {
+	// 通过闭包缓存一个定时器 id
+	let timer = null
+	// 将 debounce 处理结果当作函数返回
+	// 触发事件回调时执行这个返回函数
+	return function(...args) {
+		// 如果已经设定过定时器就清空上一次的定时器
+		if (timer) clearTimeout(timer)
+		// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
+		timer = setTimeout(() => {
+			fn.apply(this, args)
+
+			clearTimeout(timer)
+			timer = null
+		}, wait)
+	}
+}
+export default {
+	name: 'ToTable',
+	componentName: 'ToTable',
+	components: {
+		tableHead,
+		tableBody,
+		tableConfig
+	},
+	provide() {
+		return {
+			ToTable: this
+		};
+	},
+	props: {
+		// 固定列时同步 tr 的高度
+		syncHeight: Boolean,
+		loading: Boolean,
+		autoDetail: Boolean,
+		// 数据
+		data: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 高度
+		height: {
+			type: [Number, String],
+			default: ''
+		},
+		// 分割线位置
+		linePosition: {
+			type: String,
+			default: ''
+		},
+		// table列配置
+		columns: {
+			type: Array,
+			default: () => []
+		},
+		// 序号列的名称
+		indexColumnName: {
+			type: String,
+			default: () => t('to.common.index')
+		},
+		// table 无数据时显示文字
+		emptyText: {
+			type: String,
+			default: () => t('to.common.noData')
+		},
+		emptyTitle: {
+			type: String,
+			default: ''
+		},
+		emptyContent: {
+			type: String,
+			default: ''
+		},
+		emptyPic: {
+			type: String,
+			default: 'empty'
+		},
+		// 是否要高亮当前行 false
+		highlightCurrentRow: Boolean,
+		// 可选设定
+		selectable: Boolean,
+		rowSelectable: Boolean,
+		cellSelectable: Boolean,
+		remember: Boolean,
+		// 特殊行设置
+		even: Boolean,
+		// 排序方法
+		sortFunction: {
+			type: Function,
+			default: null
+		},
+		heads: {
+			type: String,
+			default: ''
+		},
+		// 固定表头/表列设置
+		fixLeft: {
+			type: [Number, String],
+			default: 0
+		},
+		fixRight: {
+			type: [Number, String],
+			default: 0
+		},
+		fixTop: {
+			type: [Number, String],
+			default: 0
+		},
+		// 外观设置
+		border: {
+			type: Boolean,
+			default: true
+		},
+		type: {
+			type: String,
+			default: ''
+		},
+		showColumns: {
+			type: [Number, String],
+			default: ''
+		},
+		space: {
+			type: [Number, String],
+			default: 0
+		},
+		itemFillet: {
+			type: String,
+			default: 'none'
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: [String, Number],
+			default: 2
+		},
+		iconProps: {
+			type: Object,
+			default() {
+				return {
+					mode: 'plain',
+					color: 'primary',
+					fillet: 'round'
+				}
+			}
+		},
+		contextSelection: {
+			type: Boolean,
+			default() {
+				return null
+			}
+		},
+		contextAction: Boolean,
+		configurable: Boolean,
+		actionLayerWidth: {
+			type: [Number, String],
+			default() {
+				return 10
+			}
+		},
+		isNeedSelectAll: { // 是否需要表头的全选按钮
+			type: Boolean,
+			default: true
+		},
+		expand: Boolean,
+		clearable: Boolean,
+		msgTop: {
+			type: [Number, String],
+			default: function _default() {
+				return this.height && !this.fixTop ? '0r' : '1r'
+			}
+		}
+	},
+	data() {
+		return {
+			current: null,
+			currentIndex: 0,
+			random: Math.floor(Math.random() * 100000000),
+			checkedRadio: '',
+			checkedRadioCache: '',
+			checkedCache: [],
+			preventAdjust: false,
+			nodata: false,
+			notfull: false,
+			observer: null,
+			initData: [],
+			lastSelectedRow: null,
+			isSelectAll: false,
+			changeType: 'default',
+			changeIDataType: 'default',
+			radioValue: '',
+			iData: [],
+			iHeads: [],
+			fixed: false,
+			isStartLongtap: false,
+			longtapTimer: null,
+			stopClick: false
+		};
+	},
+	computed: {
+
+		hasAction() {
+			return this.columns.some(column => column.type === 'action')
+		},
+
+		// 普通列
+		normalColumn() {
+			if (this.type === 'v') {
+				return this.columns_.filter(column => !['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type))
+			} else {
+				return this.columns_.filter(column => !['icon', 'selection', 'radio'].includes(column.type))
+			}
+		},
+
+		// 自动支持显示详情
+		// 当默认显示的普通列数小于全部的列数时可点击当前行弹出全部列数信息作为详情
+		autoShowDetail() {
+			if (this.showColumns && this.autoDetail) {
+				if (!isNaN(this.showColumns)) {
+					if (this.showColumns < this.normalColumn.length) {
+						return true
+					} else {
+						return false
+					}
+				} else {
+					if (this.showColumns.split(',').length < this.normalColumn.length) {
+						return true
+					} else {
+						return false
+					}
+				}
+			} else {
+				return false
+			}
+		},
+
+		// 支持长按显示 action
+		longTapAction() {
+			if (this.contextAction || (this.contextSelection !== null && this.type === 'v')) {
+				let flag = false
+				this.columns.map(item => {
+					if (item.type === 'action') {
+						flag = true
+					}
+				})
+				return flag
+			} else {
+				return false
+			}
+		},
+		hasKey() {
+			let flag = false
+			this.columns.map(item => {
+				if (item.type === 'key') {
+					flag = true
+				}
+			})
+			return flag
+		},
+		hasRadio() {
+			let flag = false
+			this.columns.map(item => {
+				if (item.type === 'radio') {
+					flag = true
+				}
+			})
+			return flag
+		},
+		hasSelection() {
+			let flag = false
+			this.columns.map(item => {
+				if (item.type === 'selection') {
+					flag = true
+				}
+			})
+			return flag
+		},
+		checked() {
+			let arr = []
+			this.iData.map(item => {
+				if (item._checked) {
+					const obj = JSON.parse(JSON.stringify(item))
+					delete obj._index
+					delete obj._checked
+					delete obj._level
+					delete obj._show
+					delete obj._hover
+					delete obj._active
+					arr.push(obj)
+				}
+			})
+			if (this.remember) {
+				return unique(arr.concat(this.checkedCache))
+			} else {
+				return arr
+			}
+		},
+		// 是否是按行设置的高度
+		isRowHeight() {
+			return String(this.height).charAt(this.height.length - 1) === 'r'
+		},
+		// msg是否是按行设置的高度
+		isMsgTopRowHeight() {
+			return String(this.msgTop).charAt(this.msgTop.length - 1) === 'r'
+		},
+		columns_() {
+			let columns = this.columns
+			for (let i = 0; i < columns.length; i++) {
+				const el = columns[i]
+				if (['action', 'selection', 'radio', 'index'].includes(el.type)) {
+					continue
+				} else {
+					el._isFirst = true
+					break
+				}
+			}
+			return columns
+		},
+		flatColumns() {
+
+			// 打平多级 columns 数组，用于 slot 遍历
+			let arr = []
+			function setArr(data) {
+				data.map(column => {
+					let tempColumn = JSON.parse(JSON.stringify(column))
+					if (tempColumn.children) {
+						delete tempColumn.children
+					}
+					arr.push(tempColumn)
+					if (column.children) {
+						setArr(column.children)
+					}
+				})
+			}
+			setArr(this.columns)
+			return arr
+		},
+		setClass() {
+			let arr = [];
+			if (this.border) {
+				arr.push('to-table-border');
+			}
+			if (this.even) {
+				arr.push('to-table-even');
+			}
+			if (this.type) {
+				arr.push('to-table-type-' + this.type);
+			}
+			if (this.nodata) {
+				arr.push('to-table-nodata');
+			}
+			if (this.linePosition) {
+				arr.push('to-table-line-position-' + this.linePosition);
+			}
+			if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
+				arr.push('to-table-row-selectable');
+			}
+			if (this.height && this.isRowHeight) {
+				arr.push(`to-table-height-${this.height}`)
+			}
+			if (this.notfull) {
+				arr.push('to-table-notfull')
+			}
+			if (this.height && this.height === 'full') {
+				arr.push('to-table-height-full')
+			}
+			if (this.fixed) {
+				arr.push('to-table-fixed')
+			}
+			if (this.msgTop && this.isMsgTopRowHeight) {
+				arr.push(`to-table-msg-top-${this.msgTop}`)
+			}
+			if (this.itemFillet) {
+				arr.push(`to-table-item-fillet-${this.itemFillet}`)
+			}
+			return arr;
+		},
+		setStyle() {
+			let obj = {}
+			if (this.height && !this.isRowHeight) {
+				if (this.height !== 'full' || this.height === 0) {
+					obj.height = this.height + 'em'
+				}
+			}
+			return obj
+		},
+		setMsgTopStyle() {
+			let obj = {}
+			if (this.msgTop && !this.isMsgTopRowHeight) {
+				obj.top = this.msgTop + 'em'
+			}
+			return obj
+		}
+	},
+	watch: {
+		contextSelection(val) {
+			if (!val) {
+				this.iData.map(item => {
+					item._checked = false
+				})
+				this.checkedCache = []
+			}
+		},
+		loading: {
+			handler() {
+				if (this.$refs.loading) {
+					if (this.loading) {
+						this.$refs.loading.open()
+					} else {
+						this.$refs.loading.close()
+					}
+				}
+			},
+			immediate: true
+		},
+		heads: {
+			handler(heads) {
+				heads && (this.iHeads = heads.split(','))
+			},
+			immediate: true
+		},
+		iData: {
+			handler() {
+				if (this.changeIDataType === 'default') {
+					this.changeType = 'update'
+					this.formatData(this.iData)
+					this.$emit('update:data', this.iData)
+					this.$nextTick(()=>{
+						this.changeType = 'default'
+					})
+				}
+			},
+			deep: true
+		},
+		data: {
+			handler(data = []) {
+				if (this.changeType === 'default') {
+					if (this.remember) {
+
+						// 页面切换 idata 变化之前记住勾选了哪些
+						if (this.hasRadio) {
+							if (this.checkedRadio) {
+								let obj = JSON.parse(JSON.stringify(this.iData[Number(this.checkedRadio)]))
+								delete obj._index
+								delete obj._checked
+								delete obj._level
+								delete obj._show
+								delete obj._hover
+								delete obj._active
+								this.checkedRadioCache = JSON.stringify(obj)
+							}
+						} else if (this.hasSelection) {
+							this.iData.map(item => {
+								if (item._checked) {
+									delete item._index
+									delete item._checked
+									delete item._level
+									delete item._show
+									delete item._hover
+									delete item._active
+									this.checkedCache.push(JSON.parse(JSON.stringify(item)))
+								}
+							})
+							this.checkedCache = unique(this.checkedCache)
+						}
+
+						// 页面切换 idata 变化之后
+						this.$nextTick(()=>{
+
+							// 单选
+							this.formatData(data)
+							if (this.hasRadio) {
+								this.checkedRadio = ''
+								this.iData.map((data, index)=> {
+									let _data = JSON.parse(JSON.stringify(data))
+									delete _data._checked
+									delete _data._hover
+									delete _data._active
+									delete _data._on
+									if (this.checkedRadioCache === JSON.stringify(_data)) {
+										this.iData[index]._checked = true
+										this.checkedRadio = String(index)
+									}
+								})
+							} else if (this.hasSelection) {
+								this.checked.map((item)=>{
+									this.iData.map((data, index)=> {
+										let _item = JSON.parse(JSON.stringify(item))
+										let _data = JSON.parse(JSON.stringify(data))
+										delete _item._index
+										delete _item._checked
+										delete _item._level
+										delete _item._show
+										delete _item._hover
+										delete _item._active
+										delete _data._index
+										delete _data._checked
+										delete _data._level
+										delete _data._show
+										delete _data._hover
+										delete _data._active
+										if (JSON.stringify(_item) === JSON.stringify(_data)) {
+											this.iData[index]._checked = true
+										}
+									})
+								})
+							}
+							this.setSelectAll()
+							this.adjust()
+						})
+
+					} else {
+						this.checkedRadio = ''
+						this.formatData(data)
+						this.setSelectAll()
+						this.adjust()
+					}
+					this.$nextTick(()=>{
+						if (this.hasRadio) {
+							this.iData.map((item, index) => {
+								if (item._checked) {
+									this.checkedRadio = String(index)
+								}
+							})
+						}
+					})
+				} else {
+					this.formatData(data)
+					this.setSelectAll()
+					this.adjust()
+				}
+			},
+			immediate: true,
+			deep: true
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	activated() {
+		this.init()
+	},
+	deactivated() {
+		this.destroy()
+	},
+	beforeDestroy() {
+		this.destroy()
+	},
+	methods: {
+		init() {
+			if (this.$refs && this.$refs.tbody) {
+				// 监听 slot 中的 DOM 变化
+				let tbody = this.$refs.tbody.$el || this.$refs.tbody
+				const observer = new MutationObserver(this.adjust)
+				observer.observe(tbody, {
+					childList: true,
+					subtree: true
+				})
+				this.observer = observer
+			}
+			window.addEventListener('resize', this.dbSetFix)
+			window.addEventListener('touchend', this.restoreClick)
+		},
+		destroy() {
+			// 停止监听 slot 中的 DOM 变化
+			if (this.heads && this.$refs.tbody) {
+				this.observer.disconnect()
+			}
+			window.removeEventListener('resize', this.dbSetFix)
+			window.removeEventListener('touchend', this.restoreClick)
+		},
+		startBatch() {
+			this.$emit('update:contextSelection', true)
+			this.current._checked = true
+			this.$refs.action.close()
+		},
+		restoreClick() {
+			setTimeout(() => {
+				this.stopClick = false
+			}, 300);
+		},
+		hasVScroll() {
+			return this.$refs.table.offsetHeight > this.$el.offsetHeight
+		},
+		hasHScroll() {
+			return this.$refs.table.offsetWidth > this.$el.offsetWidth
+		},
+		getBarWidth() {
+			var scrollTester = document.createElement('div')
+			scrollTester.id = 'scrollTester'
+			scrollTester.style.width = '200px'
+			scrollTester.style.height = '200px'
+			scrollTester.style.position = 'absolute'
+			scrollTester.style.visibility = 'hidden'
+			scrollTester.style.overflow = 'scroll'
+			document.body.appendChild(scrollTester)
+			var barWidth = document.getElementById('scrollTester').offsetWidth - document.getElementById('scrollTester').scrollWidth;
+			document.body.removeChild(scrollTester)
+			scrollTester = null;
+			return barWidth
+		},
+		adjust() {
+			(db(()=>{
+				this.setBottomLine()
+				this.setNodata()
+				this.setFix()
+			}, 200))()
+		},
+		dbSetFix() {
+			(db(()=>{
+				this.setFix()
+			}, 200))()
+		},
+		setFix() {
+			if (this.type === 'v') {
+				return
+			}
+			setTimeout(() => {
+				this.setFixDiv()
+				this.syncThWidth()
+				this.syncTrHeight()
+			}, 200);
+		},
+		syncTrHeight() {
+			if (this.type === 'v' || !this.syncHeight) { return }
+			if (this.$refs.tbody && this.$refs.tbody.$el.children.length) {
+				for (let i = 0; i < this.$refs.tbody.$el.children.length; i++) {
+					const tr = this.$refs.tbody.$el.children[i];
+					if (Number(this.fixRight) > 0 && this.$refs.rightBody) {
+						this.$refs.rightBody.$el.children[i].style.height = tr.getBoundingClientRect().height + 'px'
+					}
+					if (Number(this.fixLeft) > 0 && this.$refs.leftBody) {
+						this.$refs.leftBody.$el.children[i].style.height = tr.getBoundingClientRect().height + 'px'
+					}
+				}
+			}
+		},
+		syncThWidth() {
+			if (this.columns.length > 0) {
+				if (!(this.$refs && this.$refs.thead && this.$refs.thead.$refs && this.$refs.thead.$refs.row)) {
+					return
+				}
+				const trs = this.$refs.thead.$refs.row.children
+				if (Number(this.fixTop) > 0 && this.$refs.topHead) {
+					const topTrs = this.$refs.topHead.$refs.row.children
+					for (let i = 0; i < topTrs.length; i++) {
+						const ths = trs[i].children
+						const topThs = topTrs[i].children
+						for (let j = 0; j < ths.length; j++) {
+							const th = ths[j];
+							const topTh = topThs[j];
+							topTh.style.width = th.getBoundingClientRect().width + 'px'
+						}
+					}
+				}
+				if (Number(this.fixRight) > 0 && this.$refs.rightHead) {
+					const rightTrs = this.$refs.rightHead.$refs.row.children
+					for (let i = 0; i < rightTrs.length; i++) {
+						const ths = trs[i].children
+						const rightThs = rightTrs[i].children
+						if (rightThs.length > 0) {
+							for (let j = ths.length - rightThs.length; j < ths.length; j++) {
+								const th = ths[j]
+								const rightTh = rightThs[j - ths.length + rightThs.length]
+								rightTh.style.width = th.getBoundingClientRect().width + 'px'
+								rightTh.style.height = th.getBoundingClientRect().height + 'px'
+							}
+						}
+					}
+					if (Number(this.fixTop) > 0 && this.$refs.rightTopHead) {
+						const rightTopTrs = this.$refs.rightTopHead.$refs.row.children
+						for (let i = 0; i < rightTopTrs.length; i++) {
+							const ths = trs[i].children
+							const rightTopThs = rightTopTrs[i].children
+							if (rightTopThs.length > 0) {
+								for (let i = ths.length - rightTopThs.length; i < ths.length; i++) {
+									const th = ths[i]
+									const rightTopTh = rightTopThs[i - ths.length + rightTopThs.length]
+									rightTopTh.style.width = th.getBoundingClientRect().width + 'px'
+									rightTopTh.style.height = th.getBoundingClientRect().height + 'px'
+								}
+							}
+						}
+					}
+				}
+				if (Number(this.fixLeft) > 0 && this.$refs.leftHead) {
+					const leftTrs = this.$refs.leftHead.$refs.row.children
+					for (let i = 0; i < leftTrs.length; i++) {
+						const ths = trs[i].children
+						const leftThs = leftTrs[i].children
+						if (leftThs.length > 0) {
+							for (let j = 0; j < leftThs.length; j++) {
+								const th = ths[j]
+								const leftTh = leftThs[i]
+								leftTh.style.width = th.getBoundingClientRect().width + 'px'
+								leftTh.style.height = th.getBoundingClientRect().height + 'px'
+							}
+						}
+					}
+					if (Number(this.fixTop) > 0 && this.$refs.leftTopHead) {
+						const leftTopTrs = this.$refs.leftTopHead.$refs.row.children
+						for (let i = 0; i < leftTopTrs.length; i++) {
+							const ths = trs[i].children
+							const leftTopThs = leftTopTrs[i].children
+							if (leftTopThs.length > 0) {
+								for (let i = 0; i < leftTopThs.length; i++) {
+									const th = ths[i]
+									const leftTopTh = leftTopThs[i]
+									leftTopTh.style.width = th.getBoundingClientRect().width + 'px'
+									leftTopTh.style.height = th.getBoundingClientRect().height + 'px'
+								}
+							}
+						}
+					}
+				}
+			}
+		},
+		setFixDiv() {
+			if (Number(this.fixTop) > 0 && this.$refs.top && this.$refs.topTable) {
+				if (this.hasVScroll()) {
+					this.$refs.top.style.width = this.$refs.body.offsetWidth - this.getBarWidth() + 'px'
+				}
+				this.$refs.topTable.style.width = this.$refs.table.offsetWidth + 'px'
+				this.$refs.table.style.width = this.$refs.table.offsetWidth + 'px'
+			}
+			if (Number(this.fixRight) > 0 && this.$refs.right && this.$el) {
+				if (this.hasHScroll()) {
+					this.$refs.right.style.height = this.$el.offsetHeight - this.getBarWidth() + 'px'
+				}
+				if (this.hasVScroll()) {
+					this.$refs.right.style.right = this.getBarWidth() + 'px'
+					if (Number(this.fixTop) > 0) {
+						this.$refs.rightTop.style.right = this.getBarWidth() + 'px'
+					}
+				}
+			}
+			if (Number(this.fixLeft) > 0 && this.$refs.left && this.$el) {
+				if (this.hasHScroll()) {
+					this.$refs.left.style.height = this.$el.offsetHeight - this.getBarWidth() + 'px'
+				}
+			}
+		},
+		setNodata() {
+			if (!this.$refs.tbody) return
+			let tbody = this.$refs.tbody.$el || this.$refs.tbody
+			if (tbody.children.length === 0) {
+				this.nodata = true
+			} else {
+				this.nodata = false
+			}
+		},
+		setBottomLine() {
+			if (this.height && this.$refs.table.offsetHeight < this.$el.offsetHeight - 3 && this.linePosition !== 'none' && this.linePosition !== 'v') {
+				this.notfull = true
+			} else {
+				this.notfull = false
+			}
+		},
+		formatData(data = []) {
+			this.changeIDataType = 'change'
+			let that = this
+			var dataTemp = JSON.parse(JSON.stringify(data))
+
+			// 初始化级别为 1
+			let level = 1
+
+			// 初始化一个数组，用于存储最后生成的 data
+			let arr = []
+
+			// 递归生成 data，计算出表格树每一行的 level，并标识其是否具有子对象
+			function setData(data) {
+				data.map((dataItem, dataIndex) => {
+					if (dataItem._index === undefined) {
+						that.$set(dataItem, '_index', dataItem._index || dataIndex + 1)
+					}
+					if (dataItem._checked === undefined) {
+						that.$set(dataItem, '_checked', dataItem._checked !== undefined ? dataItem._checked : false)
+					}
+					if (dataItem._level === undefined) {
+						that.$set(dataItem, '_level', level)
+					}
+					if (dataItem._show === undefined) {
+						if (level === 1 || that.expand) {
+							that.$set(dataItem, '_show', true)
+						} else {
+							that.$set(dataItem, '_show', false)
+						}
+					}
+					if (that.expand && dataItem._showChild === undefined) {
+						that.$set(dataItem, '_showChild', true)
+					}
+					arr.push(dataItem)
+					if (dataItem.children && (dataItem._hasChild === undefined || dataItem._hasChild === true)) {
+						that.$set(dataItem, '_hasChild', true)
+						level++
+						setData(dataItem.children)
+					}
+					delete dataItem.children
+				})
+				level--
+			}
+			setData(dataTemp)
+			this.iData = arr
+			setTimeout(() => {
+				this.changeIDataType = 'default'
+			}, 100);
+		},
+		// 设置全选或者不全选
+		toggleAllSelection(checked) {
+			this.iData.map(item => {
+				if (!item.disabled) {
+					this.$set(item, '_checked', checked)
+				}
+			})
+		},
+		// 全选中事件
+		handleSelectionAllChange(checked) {
+			this.isSelectAll = checked
+			this.toggleAllSelection(checked)
+			this.iData.map(item => {
+				if (!item._checked) {
+					this.removeFromCache(item)
+				}
+			})
+			this.$emit('change', this.checked, checked)
+			this.$emit('selectionChange', this.checked)
+			this.$emit('selection-change', this.checked)
+		},
+		// 根据 checkbox 计算是否全选
+		setSelectAll() {
+			let isAll = true
+			this.iData.map(item=>{
+				if (!item._checked) {
+					isAll = false
+				}
+			})
+			this.isSelectAll = isAll
+		},
+		// 行勾选事件
+		handleTableRowChecked(checked, dataIndex) {
+			const current = this.iData[dataIndex]
+			if (!checked) {
+				this.removeFromCache(this.iData[dataIndex])
+			}
+			this.setSelectAll()
+			this.$emit('change', this.checked, checked, current)
+			this.$emit('selectionChange', this.checked, current)
+			this.$emit('selection-change', this.checked, current)
+		},
+		// 从记录中移除
+		removeFromCache(rowData) {
+			for (let i = 0; i < this.checkedCache.length; i++) {
+				let _item = JSON.parse(JSON.stringify(rowData))
+				let _data = JSON.parse(JSON.stringify(this.checkedCache[i]))
+				delete _item._index
+				delete _item._checked
+				delete _item._level
+				delete _item._show
+				delete _item._hover
+				delete _item._active
+				delete _data._index
+				delete _data._checked
+				delete _data._level
+				delete _data._show
+				delete _data._hover
+				delete _data._active
+				if (JSON.stringify(_item) === JSON.stringify(_data)) {
+					this.checkedCache.splice(i, 1)
+					i--
+				}
+			}
+		},
+		// 单选框点击
+		handleTableRowRadio(current) {
+			this.$emit('change', current, true)
+			this.$emit('radioChange', current, true)
+			this.$emit('radio-change', current, true)
+		},
+		// table 点击事件
+		handleTableClick(event, eventPath) {
+			if (this.stopClick) { return}
+			if (this.rowSelectable || this.selectable || this.cellSelectable || this.autoShowDetail || this.longTapAction) {
+				const composedPath = eventPath ? eventPath : getEventPath(event)
+				for (let i = 0; i < composedPath.length; i++) {
+					const dom = composedPath[i]
+					if (String(dom.tagName).toLowerCase() === 'tr') {
+
+						this.lastSelectedRow = dom
+						const rowIndex = Number(getDataSet(dom).index)
+
+						if (this.rowSelectable || this.selectable) {
+
+							// 行点击事件
+							this.$emit('row-click', this.iData[rowIndex], rowIndex, event)
+							if (this.highlightCurrentRow) {
+								this.iData.map((item, index) => {
+									if (index === rowIndex) {
+										if (this.clearable) {
+											if (item._on) {
+												item._on = false
+											} else {
+												this.$set(item, '_on', true)
+											}
+										} else {
+											this.$set(item, '_on', true)
+										}
+									} else {
+										this.$set(item, '_on', false)
+									}
+								})
+							}
+
+							// 多选联动
+							if (this.hasSelection && !this.iData[rowIndex].disabled) {
+								this.iData[rowIndex]._checked = !this.iData[rowIndex]._checked
+								this.handleTableRowChecked(this.iData[rowIndex]._checked, rowIndex)
+							}
+
+							// 单选联动
+							if (this.hasRadio && !this.iData[rowIndex].disabled) {
+								if (this.clickRadio(this.iData[rowIndex], rowIndex)) {
+									this.selectRadio(rowIndex)
+								}
+							}
+						}
+
+						if (this.autoShowDetail) {
+							this.current = this.iData[rowIndex]
+							this.currentIndex = rowIndex
+							this.$refs.detail.open()
+						}
+
+					} else if (String(dom.tagName).toLowerCase() === 'td' && (this.cellSelectable || this.selectable)) {
+						// 单元格点击事件
+						const cellIndex = getDataSet(dom).index || -1
+						cellIndex > -1 && this.$emit('cell-click', this.iData[cellIndex], this.columns_, dom, event)
+					}
+				}
+			}
+		},
+		// table 双击事件
+		handleTableDblClick(event) {
+			if (this.stopClick) { return}
+			if (this.$listeners['row-dblclick'] || this.$listeners['cell-dblclick']) {
+				const composedPath = getEventPath(event)
+				for (let i = 0; i < composedPath.length; i++) {
+					const dom = composedPath[i]
+					if (String(dom.tagName).toLowerCase() === 'tr') {
+						// 行点击事件
+						this.lastSelectedRow = dom
+						const rowIndex = Number(getDataSet(dom).index)
+						this.$emit('row-dblclick', this.iData[rowIndex], this.columns_, event)
+
+					} else if (String(dom.tagName).toLowerCase() === 'td') {
+						// 单元格点击事件
+						const cellIndex = Number(getDataSet(dom).index) || -1
+						cellIndex > -1 && this.$emit('cell-dblclick', this.iData[cellIndex], cellIndex, dom, event)
+					}
+				}
+			}
+		},
+		// table鼠标悬移事件
+		handleTableMouseover(event) {
+			if (!this.$pc) return
+			if (this.rowSelectable || this.selectable) {
+				const composedPath = getEventPath(event)
+				for (let i = 0; i < composedPath.length; i++) {
+					const dom = composedPath[i]
+					if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable)) {
+						this.lastSelectedRow = dom
+						const rowIndex = Number(getDataSet(dom).index)
+						this.iData.map((item, index) => {
+							if (index === rowIndex) {
+								this.$set(item, '_hover', true)
+							}
+						})
+					}
+				}
+			}
+		},
+		// table鼠标悬移事件
+		handleTableMouseout(event) {
+			if (!this.$pc) return
+			if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
+				const composedPath = getEventPath(event)
+				for (let i = 0; i < composedPath.length; i++) {
+					const dom = composedPath[i]
+					if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction)) {
+						this.lastSelectedRow = dom
+						const rowIndex = Number(getDataSet(dom).index)
+						this.changeIDataType = 'change'
+						this.iData.map((item, index) => {
+							if (index === rowIndex) {
+								this.$set(item, '_hover', false)
+								this.$set(item, '_active', false)
+							}
+						})
+						this.$nextTick(()=>{
+							this.changeIDataType = 'default'
+						})
+					}
+				}
+			}
+		},
+		// table鼠标按下事件
+		handleTableMousedown(event) {
+			if (((this.$pad || this.$phone) && event.type === 'touchstart') || (this.$pc && event.type === 'mousedown')) {
+				if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
+					const composedPath = getEventPath(event)
+					for (let i = 0; i < composedPath.length; i++) {
+						const dom = composedPath[i]
+						if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction)) {
+							this.lastSelectedRow = dom
+							const rowIndex = Number(getDataSet(dom).index)
+							if (this.$phone) {
+								this.isStartLongtap = true
+								this.longtapTimer = setTimeout(() => {
+									if (this.isStartLongtap) {
+										event.preventDefault()
+										this.$emit('contextmenu', this.iData[rowIndex], rowIndex, event)
+										this.stopClick = true
+
+										this.changeIDataType = 'change'
+										this.iData.map((item, index) => {
+											if (index === rowIndex) {
+												this.$set(item, '_active', false)
+											}
+										})
+										this.$nextTick(()=>{
+											this.changeIDataType = 'default'
+										})
+
+										// 弹出功能列表
+										if (this.type === 'v' && ((this.columns.some(item => item.type === 'action') && this.contextAction) || this.contextSelection !== null)) {
+											this.current = this.iData[rowIndex]
+											this.currentIndex = rowIndex
+											this.$refs.action.open()
+										}
+									}
+									this.isStartLongtap = false
+								}, 300);
+							}
+							this.changeIDataType = 'change'
+							if (this.rowSelectable || this.selectable || this.autoShowDetail) {
+								this.iData.map((item, index) => {
+									if (index === rowIndex) {
+										this.$set(item, '_active', true)
+									}
+								})
+							}
+							this.$nextTick(()=>{
+								this.changeIDataType = 'default'
+							})
+						}
+					}
+				}
+			}
+		},
+		// table鼠标松开事件
+		handleTableMouseup(event) {
+			if (((this.$pad || this.$phone) && event.type === 'touchend') || (this.$pc && event.type === 'mouseup')) {
+				if (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction) {
+					const composedPath = getEventPath(event)
+					for (let i = 0; i < composedPath.length; i++) {
+						const dom = composedPath[i]
+						if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail || this.longTapAction)) {
+							this.lastSelectedRow = dom
+							const rowIndex = Number(getDataSet(dom).index)
+							this.changeIDataType = 'change'
+							this.iData.map((item, index) => {
+								if (index === rowIndex) {
+									this.$set(item, '_active', false)
+								}
+							})
+							this.$nextTick(()=>{
+								this.changeIDataType = 'default'
+							})
+							if (this.$phone) {
+								this.isStartLongtap = false
+								clearInterval(this.longtapTimer)
+							}
+						}
+					}
+				}
+			}
+		},
+		// table鼠标移动事件
+		handleTableMousemove(event) {
+			this.isStartLongtap = false
+			if (this.rowSelectable || this.selectable || this.autoShowDetail) {
+				const composedPath = getEventPath(event)
+				for (let i = 0; i < composedPath.length; i++) {
+					const dom = composedPath[i]
+					if (String(dom.tagName).toLowerCase() === 'tr' && (this.rowSelectable || this.selectable || this.autoShowDetail)) {
+						this.lastSelectedRow = dom
+						const rowIndex = Number(getDataSet(dom).index)
+						this.changeIDataType = 'change'
+						this.iData.map((item, index) => {
+							if (index === rowIndex) {
+								this.$set(item, '_active', false)
+							}
+						})
+						this.$nextTick(()=>{
+							this.changeIDataType = 'default'
+						})
+					}
+					if (this.$phone) {
+						this.isStartLongtap = false
+						clearInterval(this.longtapTimer)
+					}
+				}
+			}
+		},
+		// table右击事件
+		handleTableRowRightClick(item, index, event) {
+			if (this.$pc) {
+				event.preventDefault()
+				this.$emit('contextmenu', item, index, event)
+				this.$emit('row-right-click', item, index, event)
+				if (this.longTapAction) {
+					this.current = item
+					this.$refs.action.open(event)
+				}
+			}
+		},
+		handleTableHeadCellClick(item, index, event, propKey) {
+			if (item.sortable) {
+				this.handleSortClick(item, index);
+			} else {
+				this.$emit('head-cell-click', item, index, event);
+			}
+		},
+		handleSortClick(item, index) {
+			const orderType = item.orderType
+			this.columns.map((column, columnIndex) => {
+				if (columnIndex === index) {
+					if (!orderType) {
+						this.$set(column, 'orderType', 'asc')
+					} else if (orderType === 'asc') {
+						this.$set(column, 'orderType', 'desc')
+					} else if (orderType === 'desc') {
+						this.$set(column, 'orderType', '')
+					}
+				} else {
+					if (column.sortable) {
+						this.$set(column, 'orderType', '')
+					}
+				}
+			})
+			if (this.initData.length === 0) {
+				this.initData = JSON.parse(JSON.stringify(this.data))
+			}
+			if (this.sortFunction) {
+				this.sortFunction(index, item.orderType)
+			} else {
+				this.processOrder(index, item.orderType)
+			}
+		},
+		processOrder(index, orderType) {
+			let property = this.columns[index].prop
+			if (orderType === '') {
+				for (let i = 0; i < this.initData.length; i++) {
+					this.$set(this.data, i, this.initData[i])
+				}
+				this.initData = []
+				return
+			}
+			this.data.sort((a, b)=>{
+				if (orderType === 'asc') {
+					return String(a[property]).localeCompare(String(b[property]));
+				} else if (orderType === 'desc') {
+					return String(b[property]).localeCompare(String(a[property]));
+				}
+			})
+		},
+		scrollHandle() {
+			var scrollLeft = this.$refs.body.scrollLeft;
+			var scrollTop = this.$refs.body.scrollTop;
+			if (typeof scrollLeft !== 'undefined') {
+				if (this.fixTop && this.$refs.topTable) {
+					this.$refs.topTable.style.left = 0 - scrollLeft + 'px';
+				}
+				if (this.fixRight && this.$refs.rightTable) {
+					this.$refs.rightTable.style.top = 0 - scrollTop + 'px';
+				}
+				if (this.fixLeft && this.$refs.leftTable) {
+					this.$refs.leftTable.style.top = 0 - scrollTop + 'px';
+				}
+			}
+		},
+		columnStyle(column) {
+			var obj = {};
+			if (column.width) {
+				if (!isNaN(column.width)) {
+					obj.width = column.width + 'em';
+				} else {
+					obj.width = column.width;
+				}
+			}
+			return obj;
+		},
+		checkedRadioHandle(item, dataIndex) {
+			if (this.clickRadio(item, dataIndex)) {
+				this.selectRadio(dataIndex)
+			}
+		},
+		clickRadio(item, dataIndex) {
+			if (this.checkedRadio === String(dataIndex) && this.clearable) {
+				this.checkedRadio = ''
+				this.$set(item, '_checked', false)
+				this.$emit('change', item, false)
+				this.$emit('radioChange', item, false)
+				this.$emit('radio-change', item, false)
+				return false
+			} else {
+				return true
+			}
+		},
+		selectRadio(rowIndex) {
+			// 先将所有单选都设为 false ，再选中
+			this.iData.forEach(item => {
+				item._checked = false
+			})
+
+			this.$set(this.iData[rowIndex], '_checked', true)
+
+			this.checkedRadio = String(rowIndex)
+			if (this.remember) {
+				let obj = JSON.parse(JSON.stringify(this.iData[rowIndex]))
+				delete obj._on
+				delete obj._active
+				delete obj._hover
+				delete obj._checked
+				this.checkedRadioCache = JSON.stringify(obj)
+			}
+
+			this.$emit('change', this.iData[rowIndex], true)
+			this.$emit('radioChange', this.iData[rowIndex], true)
+			this.$emit('radio-change', this.iData[rowIndex], true)
+		},
+		clear() {
+			this.iData.map(item => {item._checked = false})
+			if (this.remember) {
+				this.checkedCache = []
+			}
+			if (this.hasRadio) {
+				this.checkedRadio = ''
+				this.$emit('change', {}, false)
+			}
+		},
+		select(row) {
+			let targetIndex = this.iData.findIndex(item =>
+				Object.entries(row)
+					.filter(([key]) => !key.startsWith('_')) // 过滤掉 "_" 开头的键
+					.every(([key, value]) => item[key] === value) // 确保所有属性都匹配
+			)
+			let target = this.iData[targetIndex]
+			if (this.hasSelection) {
+				target._checked = true
+				this.$emit('change', this.checked, true, target)
+			}
+			if (this.hasRadio) {
+				this.selectRadio(targetIndex)
+			}
+		},
+		unselect(row) {
+			let target = this.iData.find(item =>
+				Object.entries(row)
+					.filter(([key]) => !key.startsWith('_')) // 过滤掉 "_" 开头的键
+					.every(([key, value]) => item[key] === value) // 确保所有属性都匹配
+			)
+			if (this.hasSelection) {
+				target._checked = false
+				this.$emit('change', this.checked, false, target)
+			}
+			if (this.hasRadio) {
+				if (target._checked) {
+					this.clear()
+				}
+			}
+		},
+		columnChangeHandle(data) {
+			this.$emit('update:columns', data)
+		}
+	}
+}
+</script>