hs-admin-ui 1.0.8 → 1.0.9

package/src/views/system/formSetting/default/baseTableConfig.ts

@@ -1,2352 +0,0 @@
-import { ref } from 'vue';
-import { IFormTable, ComponentAttr } from '/@/types';
-
-let baseVisible = ref(false);
-
-// 默认table配置
-let baseData = ref<ComponentAttr.RecursivePartial<IFormTable.TableBaseData>>({
-	id: '', // 表格唯一标识
-	tableName: '表格配置名称', // 表格配置名称
-	is_slot_loading: false, // 是否自定义加载中模板
-	is_slot_empty: false, // 是否自定义空数据模板
-	is_apply_page: true, // 是否分页
-	table_page_data: {
-		loading: false,
-		currentPage: 1,
-		pageSize: 10,
-		total: 0,
-		pagerCount: 7,
-		pageSizes: 'string=[10,15,20,50,100]',
-		align: 'right',
-		border: false,
-		background: false,
-		perfect: false,
-		autoHidden: false,
-	}, // 表格分页配置
-	// 'data': '', // 表格数据
-	height: 'auto', // 表格的高度
-	// 'min-height': '', // 表格最小高度
-	// 'max-height': '', // 表格的最大高度
-	// 'auto-resize': '', // 是否监听父元素变化重新计算表格
-	// 'sync-resize': '', // 是否随属性的变化重新计算表格
-	stripe: false, // 是否带有斑马纹
-	border: 'default', // 是否带有边框
-	round: false, // 是否为圆角边框
-	size: 'small', // 表格的尺寸
-	loading: false, //表格是否显示加载中
-	align: 'left', // 所有的列对齐方式
-	headerAlign: 'left', // 所有的表头列的对齐方式
-	footerAlign: 'left', //所有的表尾列的对齐方式
-	showHeader: true, // 是否显示表头
-	// rowClassName: '', // 给行附加样式类
-	// 'cell-class-name': '', // 给单元格附加样式类
-	// 'header-row-class-name': '', // 给表头的行附加样式类
-	// 'header-cell-class-name': '', // 给表头的单元格附加样式类
-	// 'footer-row-class-name': '', // 给表尾的行附加样式类
-	// 'footer-cell-class-name': '', // 给表尾的单元格附加样式类
-	showFooter: false, // 是否显示表尾
-	// 'footer-method': '',  // 表尾的数据获取方法
-	// 'merge-cells': '', // 临时合并指定的单元格
-	// 'merge-footer-items': '', // 临时合并表尾
-	// 'show-overflow': '', // 设置所有内容溢出显示
-	// 'show-header-overflow': '', // 设置表头内容溢出显示
-	// 'show-footer-overflow': '', // 设置表尾内容溢出显示
-	// 'keep-source': '', // 保持原始值的状态
-	// 'empty-text': '', // 空数据时显示的内容
-	// 'params': '', // 自定义参数
-	columnConfig: { useKey: false, isCurrent: true, isHover: true, resizable: false, maxFixedSize: 4 }, // 列的默认参数
-	rowConfig: { useKey: false, keyField: '_X_ROW_KEY', isCurrent: true, isHover: true }, // 行配置信息
-	resizeConfig: { refreshDelay: 250 }, // 响应式布局配置项
-	resizableConfig: { minWidth: 'auto' }, // 列宽拖动配置项
-	seqConfig: {}, // 序号配置项
-	sortConfig: {
-		defaultSort: {},
-		multiple: false,
-		chronological: false,
-		remote: false,
-		showIcon: true,
-	}, // 排序配置项
-	filterConfig: { remote: false, filterMethod: '', showIcon: true }, // 筛选配置项
-	radioConfig: { strict: true, reserve: false, highlight: false }, // 单选框配置项
-	checkboxConfig: {}, // 复选框配置项
-	tooltipConfig: {}, // tooltip 配置项
-	expandConfig: { expandAll: false, accordion: false, trigger: 'default', lazy: false, reserve: false, showIcon: true }, //展开行配置项（不支持虚拟滚动）
-	treeConfig: {
-		transform: false,
-		rowField: 'id',
-		parentField: 'parentId',
-		childrenField: 'children',
-		indent: 20,
-		showLine: false,
-		expandAll: false,
-		accordion: false,
-		trigger: 'default',
-		lazy: false,
-		hasChildField: 'hasChild',
-		reserve: false,
-		showIcon: true,
-	}, // 树形结构配置项
-	editConfig: {
-		trigger: 'click',
-		enabled: true,
-		mode: 'cell',
-		showIcon: true,
-		showStatus: false,
-		showUpdateStatus: false,
-		showInsertStatus: false,
-		showAsterisk: true,
-		autoClear: true,
-	}, // 可编辑配置项
-	validConfig: { autoPos: true, showMessage: true }, // 校验配置项
-	editRules: {}, // 校验规则配置项
-	emptyRender: {}, // 空内容渲染配置项，empty-render 的优先级大于 empty-text
-	loadingConfig: {}, // 加载中配置项
-	customConfig: {},
-	scrollX: {},
-	scrollY: {},
-});
-// 表格基本配置
-let baseTableConfig = ref<ComponentAttr.RecursivePartial<IFormTable.FormItem>[]>([
-	{
-		prop: 'id',
-		label: '表格唯一标识',
-		type: '',
-		tooltip: '唯一标识（被某些特定的功能所依赖）',
-		disabled: true,
-		el: 'hs-input',
-	},
-	{
-		prop: 'tableName',
-		label: '表格配置名称',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'data',
-		label: '表格数据',
-		tooltip: '表格数据（与 loadData 行为一致，更新数据是不会重置状态）',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'height',
-		label: '表格的高度',
-		type: '',
-		disabled: true,
-		tooltip: '表格的高度；支持铺满父容器或者固定高度，如果设置 auto 为铺满父容器（如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素）',
-		el: 'hs-input',
-	},
-	{
-		prop: 'minHeight',
-		label: '表格最小高度',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'maxHeight',
-		label: '表格的最大高度',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'border',
-		label: '是否带有边框',
-		type: '',
-		op: [
-			{ label: '默认', value: 'default' },
-			{ label: '完整边框', value: 'full' },
-			{ label: '外边框', value: 'outer' },
-			{ label: '内边框', value: 'inner' },
-			{ label: '无边框', value: 'none' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'size',
-		label: '表格的尺寸',
-		type: '',
-		op: [
-			{ label: '中等', value: 'medium' },
-			{ label: '小', value: 'small' },
-			{ label: '超小', value: 'mini' },
-			{ label: '内边框', value: 'inner' },
-			{ label: '无边框', value: 'none' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'align',
-		label: '所有的列对齐方式',
-		type: '',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'headerAlign',
-		label: '所有的表头列的对齐方式',
-		tooltip: '所有的表头列的对齐方式',
-		type: '',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'footerAlign',
-		label: '所有的表尾列的对齐方式',
-		type: '',
-		tooltip: '所有的表尾列的对齐方式',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'emptyText',
-		label: '空数据时显示的内容',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'showOverflow',
-		label: '设置所有内容溢出显示',
-		tooltip: '设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）',
-		type: '',
-		op: [
-			{ label: '省略号', value: 'ellipsis' },
-			{ label: 'title', value: 'title' },
-			{ label: 'tooltip', value: 'tooltip' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'showHeaderOverflow',
-		label: '设置表头内容溢出显示',
-		type: '',
-		tooltip: '设置表头所有内容过长时显示为省略号',
-		op: [
-			{ label: '省略号', value: 'ellipsis' },
-			{ label: 'title', value: 'title' },
-			{ label: 'tooltip', value: 'tooltip' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'showFooterOverflow',
-		label: '设置表尾内容溢出显示',
-		type: '',
-		tooltip: '设置表尾所有内容过长时显示为省略号',
-		op: [
-			{ label: '省略号', value: 'ellipsis' },
-			{ label: 'title', value: 'title' },
-			{ label: 'tooltip', value: 'tooltip' },
-		],
-		el: 'hs-select',
-		cel: 'hs-option',
-	},
-	{
-		prop: 'showHeader',
-		label: '是否显示表头',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'keepSource',
-		label: '保持原始值的状态',
-		type: '',
-		tooltip: '保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'loading',
-		label: '表格是否显示加载中',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'round',
-		label: '是否为圆角边框',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'stripe',
-		label: '是否带有斑马纹',
-		type: '',
-		tooltip: '是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式）',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'autoResize',
-		label: '监听父元素变化重新计算表格',
-		tooltip: '自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'syncResize',
-		label: '随属性的变化重新计算表格',
-		type: '',
-		tooltip: '自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来控制显示/隐藏切换时可能会用到）',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'showFooter',
-		label: '是否显示表尾',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'is_slot_loading',
-		label: '自定义加载中模板',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'is_slot_empty',
-		label: '自定义空数据时显示模板',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'rowClassName',
-		label: '给行附加样式类',
-		tooltip: '给行附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'cellClassName',
-		label: '给单元格附加样式类',
-		type: 'textarea',
-		tooltip: '给单元格附加 className',
-		el: 'hs-input',
-	},
-	{
-		prop: 'headerRowClassName',
-		label: '给表头的行附加样式类',
-		tooltip: '给表头的行附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'headerCellClass-name',
-		label: '给表头的单元格附加样式类',
-		type: 'textarea',
-		tooltip: '给表头的单元格附加 className',
-		el: 'hs-input',
-	},
-	{
-		prop: 'footerRowClassName',
-		label: '给表尾的行附加样式类',
-		tooltip: '给表尾的行附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'footerCellClassName',
-		label: '给表尾的单元格附加样式类',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'footerMethod',
-		label: '表尾的数据获取方法',
-		tooltip: '表尾的数据获取方法，返回一个二维数组',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'mergeCells',
-		label: '临时合并指定的单元格',
-		tooltip: '临时合并指定的单元格 (不能用于展开行，不建议用于固定列、树形结构)',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'mergeFooterItems',
-		label: '临时合并表尾',
-		tooltip: '临时合并表尾 (不能用于展开行，不建议用于固定列、树形结构)',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'params',
-		label: '自定义参数',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'is_apply_page',
-		label: '是否分页',
-		el: 'hs-switch',
-	},
-]);
-// 表格配置项配置
-const tableAttrConfig = ref([
-	{
-		key: 'columnConfig',
-		visible: false,
-		title: '列的默认参数',
-		columnConfig: [
-			{
-				prop: 'useKey',
-				label: '是否为每列设置key属性',
-				tooltip: '是否需要为每一列的 VNode 设置 key 属性',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'isCurrent',
-				label: '点击列头当前列是否高亮',
-				tooltip: '当鼠标点击列头时，是否要高亮当前列',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'isHover',
-				label: '当鼠标移到列头时，是否要高亮当前头',
-				tooltip: '当鼠标移到列头时，是否要高亮当前列头',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'resizable',
-				label: '每一列是否启用列宽调整',
-				type: '',
-				tooltip: '每一列是否启用列宽调整',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'width',
-				label: '每一列的宽度',
-				tooltip: '每一列的宽度',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'minWidth',
-				label: '每一列的最小宽度',
-				tooltip: '每一列的最小宽度',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'maxFixedSize',
-				label: '固定列允许设置的最大数量',
-				tooltip: '固定列允许设置的最大数量（如果是分组，则一个分组算一个',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'header-export-method',
-				label: '每一列的自定义表头单元格数据导出方法',
-				tooltip: '每一列的自定义表头单元格数据导出方法，返回自定义的标题',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'export-method',
-				label: '每一列的自定义单元格数据导出方法',
-				tooltip: '每一列的自定义单元格数据导出方法，返回自定义的值',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'footer-export-method',
-				label: '每一列的自定义表尾单元格数据导出方法',
-				tooltip: '每一列的自定义表尾单元格数据导出方法，返回自定义的值',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'rowConfig',
-		visible: false,
-		title: '行配置信息',
-		rowConfig: [
-			{
-				prop: 'useKey',
-				label: '是否为每行设置key属性',
-				type: '',
-				tooltip: '是否需要为每一行的 VNode 设置 key 属性',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'keyField',
-				label: '自定义行主键的字段名',
-				type: '',
-				tooltip: '自定义行数据唯一主键的字段名（默认自动生成）',
-				el: 'hs-input',
-			},
-			{
-				prop: 'isCurrent',
-				label: '点击行是否要高亮当前行',
-				tooltip: '当鼠标点击行时，是否要高亮当前行',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'isHover',
-				label: '鼠标悬浮行是否高亮显示',
-				tooltip: '当鼠标移到行时，是否要高亮当前行',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'height',
-				label: '每一行的高度',
-				tooltip: '只对 show-overflow 有效，每一行的高度',
-				type: 'number',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'resizeConfig',
-		visible: false,
-		title: '响应式布局配置项',
-		resizeConfig: [
-			{
-				prop: 'refreshDelay',
-				label: '刷新延时时长(毫秒)',
-				type: 'number',
-				el: 'hs-input',
-				tooltip: '只对 auto-resize 有效，刷新延时，当父容器发生变化时，至少多少毫秒刷新布局',
-			},
-		],
-	},
-	{
-		key: 'resizableConfig',
-		visible: false,
-		title: '列宽拖动配置项',
-		resizableConfig: [
-			{
-				prop: 'minWidth',
-				label: '列宽拖动的最小宽度',
-				type: '',
-				tooltip: '列宽拖动的最小宽度',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'seqConfig',
-		visible: false,
-		title: '序号配置项',
-		seqConfig: [
-			{
-				prop: 'seqMethod',
-				label: '自定义序号的方法',
-				type: 'textarea',
-				el: 'hs-input',
-				tooltip: '自定义序号的方法返回处理后的值',
-			},
-		],
-	},
-	{
-		key: 'sortConfig',
-		visible: false,
-		title: '排序配置项',
-		sortConfig: [
-			{
-				prop: 'orders',
-				label: '自定义序号的方法',
-				type: 'textarea',
-				tooltip: '自定义轮转顺序',
-				el: 'hs-input',
-			},
-			{
-				prop: 'sortMethod',
-				label: '全局排序方法',
-				type: 'textarea',
-				tooltip: '全局排序方法，当触发排序时会调用该函数返回排序后的列表',
-				el: 'hs-input',
-			},
-			{
-				prop: 'multiple',
-				label: '是否启用多列组合筛选',
-				type: '',
-				tooltip: '是否启用多列组合筛选',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'chronological',
-				label: '是否按照触发顺序进行排序',
-				type: '',
-				tooltip: '只对 multiple 有效，是否按照先后触发顺序进行排序',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'remote',
-				label: '所有列是否使用服务端排序',
-				type: '',
-				tooltip: '所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'trigger',
-				label: '触发方式',
-				type: '',
-				tooltip: '触发方式（注：当多种功能重叠时，会同时触发）',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{
-						label: '点击按钮',
-						value: 'default',
-					},
-					{
-						label: '点击表头',
-						value: 'cell',
-					},
-				],
-			},
-			{
-				prop: 'showIcon',
-				label: '是否显示列头排序图标',
-				type: '',
-				tooltip: '是否显示列头排序图标',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'iconAsc',
-				label: '自定义升序的图标',
-				tooltip: '自定义升序的图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'iconDesc',
-				label: '自定义降序的图标',
-				tooltip: '自定义降序的图标',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-		second_config: [
-			{
-				key: 'defaultSort',
-				visible: false,
-				title: '默认排序',
-				defaultSort: [
-					{
-						prop: 'field',
-						label: '列字段名',
-						el: 'hs-input',
-					},
-					{
-						prop: 'order',
-						label: '排序方式',
-						el: 'hs-input',
-					},
-				],
-			},
-		],
-	},
-	{
-		key: 'filterConfig',
-		visible: false,
-		title: '筛选配置项',
-		filterConfig: [
-			{
-				prop: 'remote',
-				label: '所有列是否使用服务端筛选',
-				type: '',
-				tooltip: '所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'filterMethod',
-				label: '全局筛选方法',
-				type: 'textarea',
-				tooltip: '全局筛选方法，当触发筛选时会调用该函数返回是否有效',
-				el: 'hs-input',
-			},
-			{
-				prop: 'showIcon',
-				label: '是否显示列头筛选图标',
-				tooltip: '是否显示列头筛选图标',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'iconNone',
-				label: '自定义无条件时显示的图标',
-				type: '',
-				tooltip: '自定义无条件时显示的图标',
-				el: 'hs-input',
-			},
-			{
-				prop: 'iconMatch',
-				label: '自定义带条件时显示的图标',
-				tooltip: '自定义带条件时显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'confirmButtonText',
-				label: '自定义确认按钮文本',
-				tooltip: '自定义确认按钮文本',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'resetButtonText',
-				label: '自定义重置按钮文本',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'radioConfig',
-		visible: false,
-		title: '单选框配置项',
-		radioConfig: [
-			{
-				prop: 'strict',
-				label: '严格模式，选中后不能取消',
-				tooltip: '严格模式，选中后不能取消',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'reserve',
-				label: '是否保留勾选状态',
-				tooltip: '是否保留勾选状态，例如：数据被刷新或者分页之后还保留之前选中的状态（需要有 rowConfig.keyField）',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'labelField',
-				label: '单选框显示的字段名',
-				tooltip: '单选框显示的字段名，可以直接显示在单选框中',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'checkRowKey',
-				label: '默认选中指定行',
-				tooltip: '默认选中指定行（只会在初始化时被触发一次，需要有 rowConfig.keyField）',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'visibleMethod',
-				label: '是否允许勾选的方法',
-				tooltip: '是否允许勾选的方法，该方法，的返回值用来决定这一行的 radio 是否显示',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'checkMethod',
-				label: '是否允许选中的方法',
-				tooltip: '是否允许选中的方法，该方法的返回值用来决定这一行的 radio 是否可以选中',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'trigger',
-				label: '触发方式',
-				type: '',
-				tooltip: '触发方式（注：当多种功能重叠时，会同时触发）',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '默认', value: 'default' },
-					{ label: '点击单元格触发', value: 'cell' },
-					{ label: '点击行触发', value: 'row' },
-				],
-			},
-			{
-				prop: 'highlight',
-				label: '高亮选中行',
-				type: '',
-				el: 'hs-switch',
-			},
-		],
-	},
-	{
-		key: 'checkboxConfig',
-		visible: false,
-		title: '复选框配置项',
-		checkboxConfig: [
-			{
-				prop: 'labelField',
-				label: '复选框显示的字段名',
-				tooltip: '复选框显示的字段名，可以直接显示在复选框中',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'checkField',
-				label: '绑定选中属性',
-				tooltip: '绑定选中属性（行数据中必须存在该字段，否则无效）',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'indeterminateField',
-				label: '绑定半选属性',
-				tooltip: '绑定半选属性（行数据中必须存在该字段，否则无效）',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'showHeader',
-				label: '是否显示全选按钮',
-				tooltip: '是否显示全选按钮（如果 checkStrictly=true 则默认为 false）',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'checkAll',
-				label: '默认勾选所有',
-				tooltip: '默认勾选所有（只会在初始化时被触发一次）',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'checkRowKeys',
-				label: '默认勾选指定行',
-				type: 'textarea',
-				tooltip: '默认勾选指定行（只会在初始化时被触发一次，需要有 rowConfig.keyField）',
-				el: 'hs-input',
-			},
-			{
-				prop: 'checkStrictly',
-				label: '是否严格的遵循父子不互相关联的做法',
-				type: '',
-				tooltip: '是否严格的遵循父子不互相关联的做法',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'strict',
-				label: '严格模式',
-				type: '',
-				tooltip: '严格模式，当数据为空或全部禁用时，列头的复选框为禁用状态',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'visibleMethod',
-				label: '是否允许勾选的方法',
-				tooltip: '是否允许勾选的方法，该方法，的返回值用来决定这一行的 checkbox 是否显示',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'checkMethod',
-				label: '是否允许勾选的方法',
-				tooltip: '是否允许勾选的方法，该方法的返回值用来决定这一行的 checkbox 是否可以勾选',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'trigger',
-				label: '触发方式',
-				type: '',
-				tooltip: '触发方式（注：当多种功能重叠时，会同时触发）',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '默认', value: 'default' },
-					{ label: '点击单元格触发', value: 'cell' },
-					{ label: '点击行触发', value: 'row' },
-				],
-			},
-			{
-				prop: 'highlight',
-				label: '高亮勾选行',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'reserve',
-				label: '是否保留勾选状态',
-				tooltip: '是否保留勾选状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前选中的状态（需要有 rowConfig.keyField）',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'range',
-				label: '开启复选框范围选择功能',
-				type: '',
-				tooltip: '开启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动选中或取消指定行）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'isShiftKey',
-				label: '开启复选框指定行选择功能',
-				tooltip: '开启复选框指定行选择功能（启用后通过鼠标点击和 shift 键选取指定范围的行）',
-				type: '',
-				el: 'hs-switch',
-			},
-		],
-	},
-	{
-		key: 'tooltipConfig',
-		visible: false,
-		title: 'tooltip 配置项',
-		tooltipConfig: [
-			{
-				prop: 'showAll',
-				label: '所有单元格开启工具提示',
-				tooltip: '所有单元格开启工具提示',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'theme',
-				label: '主题颜色',
-				tooltip: 'tooltip 的主题颜色',
-				type: '',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '暗黑', value: 'dark' },
-					{ label: '明亮', value: 'light' },
-				],
-			},
-			{
-				prop: 'enterable',
-				label: '鼠标是否可进入到工具提示中',
-				tooltip: '鼠标是否可进入到工具提示中',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'enterDelay',
-				label: '鼠标移入后延时多少才显示工具提示',
-				tooltip: '鼠标移入后延时多少才显示工具提示',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'leaveDelay',
-				label: '鼠标移出后延时多少才隐藏工具提示',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'contentMethod',
-				label: '通过返回值来重写默认的提示内容',
-				type: 'textarea',
-				el: 'hs-input',
-				tooltip: '该方法可以通过返回值来重写默认的提示内容，可以返回 null 使用默认的提示内容，可以返回空内容去掉指定单元格的提示内容',
-			},
-		],
-	},
-	{
-		key: 'expandConfig',
-		visible: false,
-		title: '展开行配置项（不支持虚拟滚动）',
-		expandConfig: [
-			{
-				prop: 'labelField',
-				label: '展开列显示的字段名',
-				type: '',
-				tooltip: '展开列显示的字段名，可以直接显示在单元格中',
-				el: 'hs-input',
-			},
-			{
-				prop: 'expandAll',
-				label: '默认展开所有行',
-				type: '',
-				tooltip: '默认展开所有行（只会在初始化时被触发一次）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'expandRowKeys',
-				label: '默认展开指定行',
-				type: 'textarea',
-				tooltip: '默认展开指定行（只会在初始化时被触发一次，需要有 rowConfig.keyField）',
-				el: 'hs-input',
-			},
-			{
-				prop: 'accordion',
-				label: '每次只能展开一行',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'height',
-				label: '展开内容的高度',
-				tooltip: '展开内容的高度，默认自适应高度',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'trigger',
-				label: '触发方式',
-				type: '',
-				tooltip: '触发方式（注：当多种功能重叠时，会同时触发）',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '默认', value: 'default' },
-					{ label: '点击单元格触发', value: 'cell' },
-					{ label: '点击行触发', value: 'row' },
-				],
-			},
-			{
-				prop: 'lazy',
-				label: '是否使用懒加载',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'loadMethod',
-				label: '该方法用于异步加载展开后的内容',
-				type: 'textarea',
-				tooltip: '该方法用于异步加载展开后的内容（必须返回 Promise<any[]> 对象）',
-				el: 'hs-input',
-			},
-			{
-				prop: 'toggleMethod',
-				label: '该方法在展开或关闭触发之前调用',
-				tooltip: '该方法在展开或关闭触发之前调用，可以通过返回值来决定是否允许继续执行',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'visibleMethod',
-				label: '是否允许显示展开按钮',
-				tooltip: '该函数的返回值用来决定是否允许显示展开按钮',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'reserve',
-				label: '是否保留展开状态',
-				type: '',
-				tooltip: '是否保留展开状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前展开的状态（需要有 rowConfig.keyField）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showIcon',
-				label: '是否显示图标按钮',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'iconOpen',
-				label: '自定义展开后显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'iconClose',
-				label: '自定义收起后显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'iconLoaded',
-				label: '自定义懒加载中显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'treeConfig',
-		visible: false,
-		title: '树形结构配置项',
-		treeConfig: [
-			{
-				prop: 'transform',
-				label: '自动将列表转为树结构',
-				tooltip: '自动将列表转为树结构（支持虚拟滚动）',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'rowField',
-				label: '树节点的字段名',
-				tooltip: '用于 treeConfig.transform，树节点的字段名',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'parentField',
-				label: '树父节点的字段名',
-				tooltip: '用于 treeConfig.transform，树父节点的字段名',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'childrenField',
-				label: '树子节点的字段名',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'indent',
-				label: '树节点的缩进',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'showLine',
-				label: '树节点的连接线',
-				type: '',
-				tooltip: '树节点的连接线（启用连接线会降低渲染性能）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'expandAll',
-				label: '默认展开所有子孙树节点',
-				type: '',
-				tooltip: '默认展开所有子孙树节点（只会在初始化时被触发一次）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'expandRowKeys',
-				label: '默认展开指定树节点',
-				type: 'textarea',
-				el: 'hs-input',
-				tooltip: '默认展开指定树节点（只会在初始化时被触发一次，需要有 rowConfig.keyField）',
-			},
-			{
-				prop: 'accordion',
-				label: '同级节点每次只展开一个',
-				tooltip: '对于同一级的节点，每次只能展开一个',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'trigger',
-				label: '触发方式',
-				type: '',
-				tooltip: '触发方式（注：当多种功能重叠时，会同时触发）',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '默认', value: 'default' },
-					{ label: '点击单元格触发', value: 'cell' },
-					{ label: '点击行触发', value: 'row' },
-				],
-			},
-			{
-				prop: 'lazy',
-				label: '是否使用懒加载',
-				type: '',
-				tooltip: '是否使用懒加载（启用后只有指定 hasChild 字段的节点才允许被点击）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'hasChildField',
-				label: '标识是否存在子节点',
-				tooltip: '只对 lazy 启用后有效，标识是否存在子节点，从而控制是否允许被点击',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'loadMethod',
-				label: '该方法用于异步加载子节点',
-				type: 'textarea',
-				tooltip: '该方法用于异步加载子节点（必须返回 Promise<any[]> 对象）',
-				el: 'hs-input',
-			},
-			{
-				prop: 'toggleMethod',
-				label: '在展开或关闭触发判断是否继续执行',
-				tooltip: '该方法在展开或关闭触发之前调用，可以通过返回值来决定是否允许继续执行',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'reserve',
-				label: '是否保留展开状态',
-				type: '',
-				tooltip: '是否保留展开状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前展开的状态（需要有 rowConfig.keyField）',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showIcon',
-				label: '是否显示图标按钮',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'iconOpen',
-				label: '自定义展开后显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'iconClose',
-				label: '自定义收起后显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'iconLoaded',
-				label: '自定义懒加载中显示的图标',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'editConfig',
-		visible: false,
-		title: '可编辑配置项',
-		editConfig: [
-			{
-				prop: 'trigger',
-				label: '触发方式',
-				type: '',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '手动触发(用于行编辑模式)', value: 'manual' },
-					{ label: '点击触发编辑', value: 'click' },
-					{ label: '双击触发编辑', value: 'dblclick' },
-				],
-			},
-			{
-				prop: 'enabled',
-				label: '是否启用',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'mode',
-				label: '编辑模式',
-				type: '',
-				el: 'hs-select',
-				cel: 'hs-option',
-				op: [
-					{ label: '单元格编辑模式', value: 'cell' },
-					{ label: '行编辑模式', value: 'row' },
-				],
-			},
-			{
-				prop: 'showIcon',
-				label: '是否显示列头编辑图标',
-				tooltip: '是否显示列头编辑图标',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showStatus',
-				label: '是否显示单元格新增与修改状态',
-				type: '',
-				tooltip: '只对 keep-source 开启有效，是否显示单元格新增与修改状态',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showUpdateStatus',
-				label: '是否显示单元格修改状态',
-				type: '',
-				tooltip: '只对 keep-source 开启有效，是否显示单元格修改状态',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showInsertStatus',
-				label: '是否显示单元格新增状态',
-				tooltip: '只对 keep-source 开启有效，是否显示单元格新增状态',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showAsterisk',
-				label: '是否显示必填字段的红色星号',
-				tooltip: '是否显示必填字段的红色星号',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'autoClear',
-				label: '点空白处是否清除激活状态',
-				type: '',
-				tooltip: '当点击非编辑列之后，是否自动清除单元格的激活状态',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'beforeEditMethod',
-				label: '该单元格是否允许编辑',
-				tooltip: '该方法的返回值用来决定该单元格是否允许编辑',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'icon',
-				label: '自定义可编辑列的状态图标',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'validConfig',
-		visible: false,
-		title: '校验配置项',
-		validConfig: [
-			{
-				prop: 'autoPos',
-				label: '是否自动定位到校验不通过的单元格',
-				tooltip: '是否自动定位到校验不通过的单元格',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'showMessage',
-				label: '是否显示错误显示',
-				type: '',
-				el: 'hs-switch',
-			},
-		],
-	},
-	{
-		key: 'editRules',
-		visible: false,
-		title: '校验规则配置项',
-		editRules: [
-			{
-				prop: 'required',
-				label: '是否必填',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'min',
-				label: '校验值最小长度',
-				tooltip: '校验值最小长度（如果 type=number 则比较值大小）',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'max',
-				label: '校验值最大长度',
-				tooltip: '校验值最大长度（如果 type=number 则比较值大小）',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'type',
-				label: '数据校验的类型',
-				type: '',
-				op: [
-					{ label: '数值', value: 'number' },
-					{ label: '字符串', value: 'string' },
-					{ label: '数组', value: 'array' },
-				],
-				el: 'hs-select',
-				cel: 'hs-option',
-			},
-			{
-				prop: 'pattern',
-				label: '正则校验',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'validator',
-				label: '"自定义校验方法',
-				tooltip: '自定义校验方法返回一个 Error 或者 Promise<new Error("提示消息")>',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'message',
-				label: '校验提示内容',
-				tooltip: '校验提示内容（支持开启国际化）',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'emptyRender',
-		visible: false,
-		title: '空内容渲染配置项',
-		emptyRender: [
-			{
-				prop: 'name',
-				label: '渲染器名称',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'loadingConfig',
-		visible: false,
-		title: '加载中配置项',
-		loadingConfig: [
-			{
-				prop: 'icon',
-				label: '显示图标',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'text',
-				label: '显示文字',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'customConfig',
-		visible: false,
-		title: '个性化信息配置项',
-		customConfig: [
-			{
-				prop: 'checkMethod',
-				label: '自定义列是否允许列选中的方法',
-				tooltip: '自定义列是否允许列选中的方法，该方法的返回值用来决定这一列的 checkbox 是否可以选中',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-		],
-		second_config: [
-			{
-				key: 'storage',
-				visible: false,
-				title: '是否启用缓存本地保存',
-				storage: [
-					{
-						prop: 'visible',
-						label: '启用显示/隐藏列状态缓存',
-						tooltip: '启用显示/隐藏列状态缓存',
-						type: '',
-						el: 'hs-switch',
-					},
-					{
-						prop: 'resizable',
-						label: '启用列宽状态缓存',
-						type: '',
-						el: 'hs-switch',
-					},
-					{
-						prop: 'fixed',
-						label: '启用固定列状态缓存',
-						type: '',
-						el: 'hs-switch',
-					},
-				],
-			},
-		],
-	},
-	{
-		key: 'scrollX',
-		visible: false,
-		title: '横向虚拟滚动配置',
-		scrollX: [
-			{
-				prop: 'enabled',
-				label: '是否启用',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'gt',
-				label: '指定大于指定列时自动启动横向虚拟滚动',
-				tooltip: '指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'oSize',
-				label: '指定每次渲染的数据偏移量',
-				tooltip: '指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久（对于低性能浏览器可以设置大一点，减低渲染次数）',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'scrollToLeftOnChange',
-				label: '数据改变滚动条是否复位',
-				tooltip: '当数据源被更改时，自动将横向滚动条滚动到左侧',
-				type: '',
-				el: 'hs-switch',
-			},
-		],
-	},
-	{
-		key: 'scrollY',
-		visible: false,
-		title: '纵向虚拟滚动配置',
-		scrollY: [
-			{
-				prop: 'enabled',
-				label: '是否启用',
-				type: '',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'mode',
-				label: '滚动模式',
-				type: '',
-				op: [
-					{ label: '默认', value: 'default' },
-					{ label: '无限滚动', value: 'wheel' },
-				],
-				el: 'hs-select',
-				cel: 'hs-option',
-			},
-			{
-				prop: 'gt',
-				label: '指定大于指定行时自动启动纵向虚拟滚动',
-				tooltip:
-					'指定大于指定行时自动启动纵向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false（注：启用纵向虚拟滚动之后将不能支持动态行高）',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'oSize',
-				label: '指定每次渲染的数据偏移量',
-				tooltip: '指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久（对于低性能浏览器可以设置大一点，减低渲染次数）',
-				type: 'number',
-				el: 'hs-input',
-			},
-			{
-				prop: 'scrollToTopOnChange',
-				label: '数据改变滚动条是否复位',
-				tooltip: '当数据源被更改时，自动将纵向滚动条滚动到顶部',
-				type: '',
-				el: 'hs-switch',
-			},
-		],
-	},
-]);
-let pageVisible = ref(false);
-// 表格分页配置
-const tablePageConfig = ref([
-	{
-		prop: 'size',
-		label: '尺寸',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '中等', value: 'medium' },
-			{ label: '小号', value: 'small' },
-			{ label: '迷你', value: 'mini' },
-		],
-	},
-	{
-		prop: 'loading',
-		label: '是否加载中',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'layouts',
-		label: '自定义布局',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'currentPage',
-		label: '当前页',
-		type: 'number',
-		el: 'hs-input',
-	},
-	{
-		prop: 'pageSize',
-		label: '每页大小',
-		type: 'number',
-		el: 'hs-input',
-	},
-	{
-		prop: 'total',
-		label: '总条数',
-		type: 'number',
-		el: 'hs-input',
-	},
-	{
-		prop: 'pagerCount',
-		label: '显示页码按钮的数量',
-		type: 'number',
-		el: 'hs-input',
-	},
-	{
-		prop: 'pageSizes',
-		label: '每页大小选项列表',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'align',
-		label: '对齐方式',
-		type: 'number',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-	},
-	{
-		prop: 'border',
-		label: '带边框',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'background',
-		label: '带背景颜色',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'perfect',
-		label: '配套的样式',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'className',
-		label: '给分页附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'autoHidden',
-		label: '当只有一页时自动隐藏',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'iconPrevPage',
-		label: '自定义上一页图标',
-		el: 'hs-input',
-	},
-	{
-		prop: 'iconJumpPrev',
-		label: '自定义向上跳页图标',
-		el: 'hs-input',
-	},
-	{
-		prop: 'iconJumpNext',
-		label: '自定义向下跳页图标',
-		el: 'hs-input',
-	},
-	{
-		prop: 'iconnextPage',
-		label: '自定义下一页图标',
-		el: 'hs-input',
-	},
-	{
-		prop: 'iconJumpMore',
-		label: '自定义跳页显示图标',
-		el: 'hs-input',
-	},
-]);
-
-// 表格展示列配置默认值
-const tableColumnConfigData = ref<IFormTable.TableItemData>({
-	type: null, //列的类型
-	field: '', // 列字段名
-	title: '展示列名称', // 列标题
-	isSlot: false, // 是否启用插槽
-	isApply: true, // 是否启用
-	isShow: true, // 是否显示
-	width: '', //列宽度
-	minWidth: '', // 最小列宽度
-	resizable: false, // 是否允许调整列宽
-	visible: true, // 默认是否显示
-	fixed: '', //列固定位置
-	align: '', // 列对齐方式
-	headerAlign: '', // 表头列的对齐方式
-	footerAlign: '', // 表尾列的对齐方式
-	showOverflow: '', // 当内容过长时显示为省略号
-	showHeaderOverflow: '', // 当表头内容过长时显示为省略号
-	showFooterOverflow: '', // 当表尾内容过长时显示为省略号
-	className: '', // 给单元格附加 className
-	headerClassName: '', // 给表头的单元格附加 className
-	footerClassName: '', // 给表尾的单元格附加 className
-	formatter: '', // 格式化显示内容
-	sortable: false, // 数据排序，是否允许列排序
-	sortBy: '', // 指定排序的字段
-	sortType: 'auto', // 排序的字段类型
-	filterMultiple: true, // 筛选是否允许多选
-	filterMethod: '', // 方法的返回值用来决定该行是否显示
-	filterResetMethod: '', // 数据筛选，只对 filters 有效，自定义筛选重置方法
-	filterRecoverMethod: '', // 数据筛选，只对 filters 有效，自定义筛选复原方法（使用自定义筛选时可能会用到）
-	cellType: 'auto', // 只对特定功能有效，单元格值类型（例如：导出数据类型设置）
-	treeNode: false, // 只对 treeConfig 配置时有效，指定为树节点
-	params: '', // 额外的参数（可以用来存放一些私有参数）
-	colId: '', // 自定义列的唯一主键
-	filters: [], // 数据筛选，配置筛选条件（注：筛选只能用于列表，如果是树结构则过滤根节点）
-	filterRender: {}, // 数据筛选，筛选渲染器配置项
-	titlePrefix: {}, // 标题前缀图标配置项
-	cellRender: {}, // 默认的渲染器配置项
-	editRender: {
-		name: '',
-		enabled: true,
-		props: '',
-		attrs: '',
-		options: '',
-		optionProps: '{ value, label }',
-		optionGroups: '',
-		optionGroupProps: '{ options, label }',
-		events: '',
-		content: '',
-		autofocus: '.el-input__inner',
-		autoselect: true,
-		defaultValue: null,
-		immediate: false,
-		placeholder: '',
-	}, // 可编辑渲染器配置项
-	contentRender: {}, // 内容渲染配置项
-	// ===================================
-	// 'filters':{'checked': false,}, // 数据筛选，配置筛选条件（注：筛选只能用于列表，如果是树结构则过滤根节点）
-	// 'filter-render': {},  // 数据筛选，筛选渲染器配置项
-	// 'title-prefix':{},  // 标题前缀图标配置项
-	// 'cell-render':{'optionProps':"{ value, label }", 'optionGroupProps':'{ options, label }',},  // 默认的渲染器配置项
-	// 'edit-render': {'enabled':true,'optionProps': '{ value, label }',  'optionGroupProps':'{ options, label }', 'autoselect':false, 'defaultValue':null, 'immediate':false,},  // 可编辑渲染器配置项
-	// 'content-render': {}, // 内容渲染配置项
-});
-// 表格展示列配置
-const tableColumnConfig = ref<ComponentAttr.RecursivePartial<IFormTable.FormItem>[]>([
-	{
-		prop: 'type',
-		label: '列的类型',
-		tooltip: '列的类型(部分功能需要设置 columnConfig.useKey',
-		type: '',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '序号', value: 'seq' },
-			{ label: '复选框', value: 'checkbox' },
-			{ label: '单选框', value: 'radio' },
-			{ label: '展开行', value: 'expand' },
-			{ label: 'HTML 标签', value: 'html' },
-		],
-	},
-	{
-		prop: 'title',
-		label: '列标题',
-		type: '',
-		required: true,
-		tooltip: '列标题(支持开启国际化)',
-		el: 'hs-input',
-		slotValue: 'title',
-	},
-	{
-		prop: 'field',
-		label: '列字段名',
-		required: true,
-		tooltip: '列字段名(注：属性层级越深，渲染性能就越差，例如：aa.bb.cc.dd.ee)',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'isSlot',
-		label: '是否自定义插槽',
-		el: 'hs-switch',
-		tooltip: '下拉选择，自定义模板，选择的名称就是模板名称',
-	},
-	{
-		prop: 'isApply',
-		label: '是否启用',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'isShow',
-		label: '是否显示',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'width',
-		label: '列宽度',
-		type: '',
-		tooltip: '列宽度(如果为空则均匀分配剩余宽度，如果全部列固定了，可能会存在宽屏下不会铺满，可以配合 % 或者 min-width 布局)',
-		el: 'hs-input',
-	},
-	{
-		prop: 'minWidth',
-		label: '最小列宽度',
-		type: '',
-		tooltip: '最小列宽度；会自动将剩余空间按比例分配',
-		el: 'hs-input',
-	},
-	{
-		prop: 'resizable',
-		label: '是否允许调整列宽',
-		type: '',
-		tooltip: '列是否允许拖动列宽调整大小',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'visible',
-		label: '默认是否显示',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'fixed',
-		label: '列固定位置',
-		tooltip: '将列固定在左侧或者右侧(注意：固定列应该放在左右两侧的位置)',
-		type: '',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '不固定', value: '' },
-			{ label: '固定左侧', value: 'left' },
-			{ label: '固定右侧', value: 'right' },
-		],
-	},
-	{
-		prop: 'align',
-		label: '列对齐方式',
-		type: '',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-	},
-	{
-		prop: 'headerAlign',
-		label: '表头列的对齐方式',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-	},
-	{
-		prop: 'footerAlign',
-		label: '表尾列的对齐方式',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '左对齐', value: 'left' },
-			{ label: '居中对齐', value: 'center' },
-			{ label: '右对齐', value: 'right' },
-		],
-	},
-	{
-		prop: 'showOverflow',
-		label: '当内容过长时显示为省略号',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '只显示省略号', value: 'ellipsis' },
-			{ label: '显示原生title', value: 'title' },
-			{ label: '显示tooltip提示', value: 'tooltip' },
-		],
-	},
-	{
-		prop: 'showHeaderOverflow',
-		label: '当表头内容过长时显示为省略号',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '只显示省略号', value: 'ellipsis' },
-			{ label: '显示原生title', value: 'title' },
-			{ label: '显示tooltip提示', value: 'tooltip' },
-		],
-	},
-	{
-		prop: 'showFooterOverflow',
-		label: '当表尾内容过长时显示为省略号',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '只显示省略号', value: 'ellipsis' },
-			{ label: '显示原生title', value: 'title' },
-			{ label: '显示tooltip提示', value: 'tooltip' },
-		],
-	},
-	{
-		prop: 'className',
-		label: '给单元格附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'headerClassName',
-		label: '给表头的单元格附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'footerClassName',
-		label: '给表尾的单元格附加 className',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'formatter',
-		label: '格式化显示内容',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'sortable',
-		label: '是否允许列排序',
-		tooltip: '数据排序，是否允许列排序',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'sortBy',
-		label: '指定排序字段',
-		tooltip: '数据排序，只对 sortable 有效，指定排序的字段(当值 formatter 格式化后，可以设置该字段，使用值进行排序)',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'sortType',
-		label: '排序的字段类型',
-		tooltip: '数据排序，排序的字段类型，比如字符串转数值等',
-		type: '',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: 'auto', value: 'auto' },
-			{ label: '数值', value: 'number' },
-			{ label: '字符串', value: 'string' },
-		],
-	},
-	// ================================ 数据筛选 start ===============================
-	{
-		prop: 'filterMultiple',
-		label: '筛选是否允许多选',
-		tooltip: '数据筛选，只对 filters 有效，筛选是否允许多选',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'filterMethod',
-		label: '列的筛选方法',
-		tooltip: '数据筛选，只对 filters 有效，列的筛选方法，该方法的返回值用来决定该行是否显示',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'filterResetMethod',
-		label: '自定义筛选重置方法',
-		tooltip: '数据筛选，只对 filters 有效，自定义筛选重置方法',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'filterRecoverMethod',
-		label: '自定义筛选复原方法',
-		tooltip: '数据筛选，只对 filters 有效，自定义筛选复原方法(使用自定义筛选时可能会用到)',
-		type: 'textarea',
-		el: 'hs-input',
-	},
-	{
-		prop: 'cellType',
-		label: '单元格值类型',
-		tooltip: '只对特定功能有效，单元格值类型(例如：导出数据类型设置)',
-		type: '',
-		el: 'hs-select',
-		cel: 'hs-option',
-		op: [
-			{ label: '默认自动转换', value: 'auto' },
-			{ label: '数值', value: 'number' },
-			{ label: '字符串', value: 'string' },
-		],
-	},
-	{
-		prop: 'treeNode',
-		label: '是否指定为树节点',
-		tooltip: '只对 treeConfig 配置时有效，指定为树节点',
-		type: '',
-		el: 'hs-switch',
-	},
-	{
-		prop: 'params',
-		label: '额外的参数',
-		tooltip: '额外的参数(可以用来存放一些私有参数)',
-		type: '',
-		el: 'hs-input',
-	},
-	{
-		prop: 'colId',
-		label: '自定义列的唯一主键',
-		tooltip: '自定义列的唯一主键(注：列主键必须确保唯一，操作不正确将导致出现问题)',
-		type: '',
-		el: 'hs-input',
-	},
-]);
-// 表格展示列配置校验规则
-const tableColumnRule = {
-	title: [{ required: true, message: '请输入列标题' }],
-	field: [{ required: true, message: '请输入列字段名' }],
-};
-
-// 表格展示列配置项配置
-const tableColumnConfigItem = ref([
-	{
-		key: 'filterRender',
-		visible: false,
-		title: '筛选渲染器配置项',
-		filterRender: [
-			{
-				prop: 'name',
-				label: '渲染器名称',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'props',
-				label: '渲染的参数',
-				tooltip: '渲染的参数(请查看自定义的 Props)',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'events',
-				label: '渲染组件的事件(请查看自定义的 Events)',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'content',
-				label: '渲染组件的内容(仅用于特殊组件)',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'titlePrefix',
-		visible: false,
-		title: '标题前缀图标配置项',
-		titlePrefix: [
-			{
-				prop: 'content',
-				label: '提示消息',
-				tooltip: '提示消息(支持开启国际化)',
-				el: 'hs-input',
-			},
-			{
-				prop: 'useHTML',
-				label: '是否显示为HTML标签',
-				tooltip: '是否显示为HTML标签(动态渲染任意 HTML 是非常危险的，很容易导致 XSS 攻击，请确保内容是可信的)',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'icon',
-				label: '自定义图标',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'cellRender',
-		visible: false,
-		title: '默认的渲染器配置项',
-		cellRender: [
-			{
-				prop: 'name',
-				label: '渲染器名称',
-				el: 'hs-input',
-			},
-			{
-				prop: 'props',
-				label: '渲染的参数',
-				tooltip: '渲染的参数(请查看自定义的 Props)',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'options',
-				label: '下拉选项列表',
-				tooltip: '只对 name=select 有效，下拉选项列表',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'optionProps',
-				label: '下拉选项属性参数配置',
-				tooltip: '只对 name=select 有效，下拉选项属性参数配置',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'optionGroups',
-				label: '下拉分组选项列表',
-				tooltip: '只对 name=select 有效，下拉分组选项列表',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'optionGroupProps',
-				label: '下拉分组选项属性参数配置',
-				tooltip: '只对 name=select 有效，下拉分组选项属性参数配置',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'events',
-				label: '渲染组件的事件',
-				tooltip: '渲染组件的事件(请查看自定义的 Events)',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'content',
-				label: '渲染组件的内容(仅用于特殊组件)',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'editRender',
-		visible: false,
-		title: '可编辑渲染器配置项',
-		editRender: [
-			{
-				prop: 'name',
-				label: '渲染器名称',
-				el: 'hs-input',
-			},
-			{
-				prop: 'enabled',
-				label: '是否启用',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'props',
-				label: '渲染的参数',
-				tooltip: '渲染的参数(请查看自定义的 Props)',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'attrs',
-				label: '渲染的属性',
-				tooltip: '渲染的属性(请查看自定义的 Attribute）',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'options',
-				label: '下拉选项列表',
-				tooltip: '只对 name=select 有效，下拉选项列表',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'optionProps',
-				label: '下拉选项属性参数配置',
-				tooltip: '只对 name=select 有效，下拉选项属性参数配置',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'optionGroups',
-				label: '下拉分组选项列表',
-				tooltip: '只对 name=select 有效，下拉分组选项列表',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'optionGroupProps',
-				label: '下拉分组选项属性参数配置',
-				tooltip: '只对 name=select 有效，下拉分组选项属性参数配置',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'events',
-				label: '渲染组件的事件(请查看自定义的 Events)',
-				type: '',
-				default: '{row,rowIndex,$rowIndex,column,columnIndex,$columnIndex}, ...[自定义的 arguments]',
-				param: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'content',
-				label: '渲染组件的内容',
-				tooltip: '渲染组件的内容(仅用于特殊组件)',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'autofocus',
-				label: '指定聚焦的选择器',
-				tooltip: '如果是自定义渲染可以指定聚焦的选择器，例如 .my-input',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'autoselect',
-				label: '自动选中内容',
-				tooltip: '是否在激活编辑之后自动选中输入框内容',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'defaultValue',
-				label: '默认值',
-				tooltip: '默认值(插入数据时列的默认值)',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'immediate',
-				label: '输入值实时更新',
-				tooltip: '输入值实时同步更新(默认情况下单元格编辑的值只会在被触发时同步，如果需要实时同步可以设置为 true)',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'placeholder',
-				label: '单元格占位符',
-				tooltip: '单元格占位符，但单元格为空值时显示的占位符',
-				type: '',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		key: 'contentRender',
-		visible: false,
-		title: '内容渲染配置项',
-		contentRender: [
-			{
-				prop: 'name',
-				label: '渲染器名称',
-				type: '',
-				el: 'hs-input',
-			},
-			{
-				prop: 'props',
-				label: '渲染的参数',
-				tooltip: '渲染的参数(请查看自定义的 Props)',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'attrs',
-				tooltip: '渲染的属性',
-				label: '渲染的属性（请查看自定义的 Attribute）',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-			{
-				prop: 'events',
-				label: '渲染组件的事件',
-				tooltip: '渲染组件的事件(请查看自定义的 Events)',
-				type: 'textarea',
-				el: 'hs-input',
-			},
-		],
-	},
-]);
-
-// 过滤条件配置
-const filterItemConfig = ref({
-	key: 'filters',
-	visible: false,
-	title: '配置数据筛选条件',
-	filters: [
-		{
-			prop: 'label',
-			label: '显示的值',
-			type: '',
-			el: 'hs-input',
-		},
-		{
-			prop: 'value',
-			label: '实际的值',
-			type: '',
-			el: 'hs-input',
-		},
-		{
-			prop: 'checked',
-			label: '默认是否选中',
-			type: '',
-			el: 'hs-switch',
-		},
-		{
-			prop: 'resetValue',
-			label: '重置时的默认值',
-			type: 'textarea',
-			el: 'hs-input',
-		},
-		{
-			prop: 'data',
-			label: '自定义渲染的数据值(当使用自定义模板时可能会用到)',
-			type: 'textarea',
-			el: 'hs-input',
-		},
-	],
-});
-
-let tableItemConfig = ref<IFormTable.TableItem>({
-	id: '',
-	// 配置绑定的值
-	data: tableColumnConfigData.value,
-	list: tableColumnConfig.value,
-	second_config: tableColumnConfigItem.value,
-	filterConfig: [],
-});
-
-let emptyTableItemData = ref<IFormTable.TableItem>({
-	id: '',
-	// 配置绑定的值
-	data: {},
-	list: [],
-});
-
-let tableTitleConfig = ref({
-	code: {
-		visible: false,
-		subTitle: '表格配置代码',
-		class: 'font-bold my-3',
-		iconSize: 20,
-	},
-	table: {
-		visible: false,
-		subTitle: '表格配置',
-		class: 'font-bold my-3',
-		iconSize: 20,
-	},
-	tableItem: {
-		visible: true,
-		subTitle: '表格元素配置项集合',
-		class: 'font-bold my-3',
-		iconSize: 20,
-	},
-	tableExample: {
-		visible: false,
-		subTitle: '表格配置示例',
-		class: 'font-bold my-3',
-		iconSize: 20,
-	},
-});
-
-export {
-	baseTableConfig,
-	baseData,
-	baseVisible,
-	tableAttrConfig,
-	tableColumnConfig,
-	tableColumnConfigData,
-	tableColumnConfigItem,
-	filterItemConfig,
-	tablePageConfig,
-	pageVisible,
-	tableItemConfig,
-	emptyTableItemData,
-	tableTitleConfig,
-	tableColumnRule,
-};