hs-admin-ui 1.0.0

package/src/components/business/bcPageConfig/default/baseTableConfig.ts

@@ -0,0 +1,2399 @@
+import { ref } from 'vue';
+import IFormTable from '/@/types/formTable';
+// import ICustomData from '/@/types/customData';
+
+import ComponentAttr from '/@/types/components';
+// ============================ 表格table属性 start ==========================
+// 默认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: false, 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: 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: IFormTable.Data[] = [
+	{
+		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',
+			},
+		],
+	},
+];
+
+// 表格分页配置
+const tablePageConfig: IFormTable.Data[] = [
+	{
+		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',
+	},
+];
+// ============================ 表格table属性 end ==========================
+
+// 表格展示列配置默认值 【ICustomData.TableItemData】
+const tableColumnConfigData = ref<IFormTable.Data>({
+	type: null, //列的类型
+	field: '', // 列字段名
+	title: '展示列名称', // 列标题
+	isSlot: false, // 是否启用插槽
+	isApply: true, // 是否启用
+	isShow: true, // 是否显示
+	returnValueType: '', // 返回值类型
+	// width: '', //列宽度
+	minWidth: '100', // 最小列宽度
+	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 tableItemType = {
+	seq: '序号',
+	checkbox: '复选框',
+	radio: '单选框',
+	expand: '展开行',
+	html: 'HTML 标签',
+};
+// 表格展示列配置
+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: 'returnValueType',
+		label: '返回值类型',
+		el: 'hs-select',
+		cel: 'hs-option',
+		op: [
+			{ label: 'String', value: 'string' },
+			{ label: 'Number', value: 'number' },
+			{ label: 'String|Number', value: 'string|number' },
+			{ label: 'Boolean', value: 'boolean' },
+		],
+	},
+	{
+		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: '请输入列字段名' }],
+	returnValueType: [{ 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,
+	// 按钮配置
+	btnData: [],
+});
+// 表格项配置
+const tableConfig = {
+	list: tableColumnConfig.value,
+	second_config: tableColumnConfigItem.value,
+	filterConfig: filterItemConfig.value,
+	rules: {
+		list: tableColumnRule,
+	}, // 校验规则
+};
+// 表格列空配置
+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,
+	},
+});
+// 模拟通过类名调接口获取表格属性数据
+let fieldList = [
+	{ field: 'create_time', title: '创建时间' },
+	{ field: 'update_time', title: '更新时间' },
+	{ field: 'company_id', title: '公司id' },
+	{ field: 'page_id', title: '页面id' },
+	{ field: 'menu_type', title: '菜单类型' },
+	{ field: 'sort', title: '排序' },
+	{ field: 'menu_name', title: '菜单名称' },
+];
+// 表格baseData的配置
+let baseConfig = {
+	baseTableConfig,
+	baseVisible: false,
+	pageVisible: false,
+	tableAttrConfig,
+	tablePageConfig,
+};
+
+export {
+	baseTableConfig,
+	baseData,
+	tableAttrConfig,
+	tableColumnConfig,
+	tableColumnConfigData,
+	tableColumnConfigItem,
+	filterItemConfig,
+	tablePageConfig,
+	tableItemConfig,
+	tableConfig,
+	emptyTableItemData,
+	tableTitleConfig,
+	tableColumnRule,
+	tableItemType,
+	fieldList, // 模拟类名解析结果
+	baseConfig, // 表格baseData配置
+};