记录一个vue3+ts的全功能表格封装

type

status

date

slug

summary

📝 主要代码

一.表格主体

ref="tableRef"：为这个表格组件设置一个引用，方便在脚本部分通过 this.$refs.tableRef 访问。

:data="data"：绑定表格的数据源，data 是一个数组。

:default-sort="defaultSort"：设置表格的默认排序方式。

:class="{ 'empty-table': data.length === 0 }"：根据 data 数组的长度动态添加 empty-table 类，当数据为空时应用这个类。

row-key="date"：指定每行数据的唯一键为 date。

width="100%" 和 max-height="540"：设置表格的宽度和最大高度。

@selection-change="handleSelectionChange"、@sort-change="handleSortChange"、@filter-change="handleFilterChange" 和 @row-click="handleRowClick"：这些是表格的事件监听器，分别处理选择变化、排序变化、过滤变化和行点击事件。

动态组件 <component>，它使用 :is="componentData[item.type]" 动态选择组件类型，并通过 v-for 指令遍历 paramsFormat 数组，为每个 item 渲染一个组件。每个组件都有一个唯一的 key，由 item.type 和 index 组合而成，并且传递了 item 作为 params 属性。组件还绑定了一个 @row-change="handleRowChange" 事件监听器。

1. `const componentData = markRaw<any>({});`

这行代码使用 markRaw 函数创建了一个空对象 componentData，并且这个对象不会被 Vue 的响应式系统追踪。markRaw 通常用于存储不需要响应式的数据。

2. `const modules: any = import.meta.glob("./fragment/*.vue");`

这行代码使用 Vite 的 import.meta.glob 函数动态导入 ./fragment 目录下的所有 .vue 文件，并将这些模块存储在 modules 对象中。modules 的键是文件路径，值是导入的模块。

3. `for (const path in modules) { ... }`

这个循环遍历 modules 对象的每一个键（文件路径），并对每个模块进行处理。

3.1 `const componentName = path.replace(/^\.\/fragment\/(.*)\.vue$/, "$1");`

这行代码使用正则表达式从文件路径中提取组件名称。例如，./fragment/MyComponent.vue 会被转换为 MyComponent。

3.2 `componentData[componentName] = defineAsyncComponent(modules[path]);`

这行代码使用 defineAsyncComponent 函数将模块定义为异步组件，并将其存储在 componentData 对象中，以组件名称为键。

功能：对 props.params 进行映射，生成一个新的数组，每个元素包含一些默认属性（如 fixed, sort, defaultSort, filter）和 filterList。

步骤：

遍历 props.params。

如果元素的 type 属于 complexTypes，则处理其 filterList 属性。

将处理后的 filterList 和一些默认属性合并到元素中，返回新的对象。

返回值：一个新的数组，每个元素包含处理后的属性

排序

功能：初始化 defaultSort，并根据 formItemFull 的结果设置其值。

步骤：

定义一个 ref 类型的 defaultSort，初始值为 undefined。

从 formItemFull 的结果中过滤出 sort 和 defaultSort 属性都为 true 的第一个元素。

如果找到了这样的元素，则根据其 defaultSort 属性设置 defaultSort.value，order 默认为 "ascending"。

二.各列封装

二——一时间栏

二——二 tag栏

columnFromat：根据 param 的配置格式化列的显示内容。

如果 param 有 unit 属性，返回带单位的值。
如果 param 有 paramList 属性，查找匹配的项并返回其 text 属性。
否则，返回原始值。

typeFormat：根据 param 的配置确定标签的类型。

查找 paramList 中匹配的项并返回其 type 属性。

二——三 switch开关栏

二——四超链接栏

插槽中，使用<a>标签来创建链接，链接地址是scope.row.domain，即表格行数据中的domain属性。链接的文本内容是通过调用columnFromat函数来生成的，该函数接受两个参数：scope.row表示当前行的数据，params表示props中的params属性。

columnFromat的函数，它接受两个参数row和param。这个函数根据param的不同，对row[param.paramKey]进行格式化，并返回格式化后的结果。如果param中有unit属性，那么将单位添加到值的后面；如果param中有paramList属性，那么根据值在paramList中查找对应的文本；否则，直接返回原始值。

总结一下，该组件用于渲染一个带有链接的表格列。它接受一个名为params的属性，根据params的不同对表格列的内容进行格式化，并生成一个带有链接的文本。

📝 主要代码

一.表格主体

1. const componentData = markRaw<any>({});

2. const modules: any = import.meta.glob("./fragment/*.vue");

3. for (const path in modules) { ... }

3.1 const componentName = path.replace(/^\.\/fragment\/(.*)\.vue$/, "$1");

3.2 componentData[componentName] = defineAsyncComponent(modules[path]);