【论术】基于t-Table的三开表头渲染问题

"你的暗影已在镜子里等候多时" —— DeepSeek

背景：基于t-table封装的三开框架

需求： 页签变动时对应的表头内容也要进行变动

问题点： 正常逻辑是使用计算属性来描述columns，当对应的页签变动时，计算属性会根据对应的页签展示对应的columns数组，但是奇怪的是columns变动了，但dom上的表头并没有变动。

其实说到这里就很清晰了，大概是三开框架内部没有处理好响应式表头问题。

表格底层基于t-table，公司对其进行了二开，拓展了其功能，项目组对其进行了三开，拓展了其用法，公共组件+公共hook组合使用。这种方法很值得借鉴

hook自不必多说，将界面里的公有变量抽离出来，本质上也是封装的一种形式。

时间关系，简略说下用法以及解决方案，读者也可以通过简略描述体会下

1. 导入hook，

2. 从hook中解构表格组件，重置函数，勾选列 。 同时传入表头组、请求函数、是否分页等配置项，表格组件接收isInit属性，根据此属性判定界面加载完毕后立即调用request函数。

回归主题

引入unref概念：

下方代码描述了hook函数在接收到传入的配置项后进行的操作：

收集配置，遍历配置后将各个配置项解除响应式后赋给新对象 ，尔后将这个新对象解构到表格组件中。

注意： 作为computed的columns也是其中一员。

而在传入基于computed的columns时，则须传入计算属性本身而不是.value，这是为了使其不丢失响应式。

大概可以推演一下整个过程： 界面初始化时表头(colnums.value)在被接收时就已丢失了响应式，unref对一个普通对象的做法是返回对象本身，这样它虽然被赋值，但也丧失了响应式，这就导致在遇到需要即时切换时，虽然columns在直接打印时会出现正常的表头数组，但在传入的时候由于丧失了响应式，也就无法将本该更新的数据渲染到表格上，所以也就无法渲染更新后的表格，有点类似巧东子难为无米之炊的意思。

大概就是这些，抽空详细写下这个组件。

以上。