函数式组件劫持替代json封装element表格_vue.js_

背景

系统有个整改需求，要求系统内的所有表格支持本地动态列显隐，拖拽排序列位置，固定列功能，涉及的页面很多

上效果图：

思路

其实最开始想的肯定是json配置表单的形式，再由循环出来的列去控制对应的位置和属性 但是！很多页面啊！每个页面都要去转json配置意味着大量的工作量和极高的风险

能不能我就写个自己的组件来包一层，这样我就能实现最小改动的情况下只需要替换组件标签来实现这个功能

与实际的不同只是我将原来的el-table换成了hf-table，同时支持原本el-table的所有功能

想法与实践

el-table-column获取

我们不可能去自己实现一个el-table的组件，所以无非我们的组件就是在el-table的基础上套一层壳，给他加上一个设置按钮，同时设置的内容能够去影响整个表格的渲染。

那既然我们不自己实现el-table则意味着原先代码中的el-table-column我们要拿到，并且要传给el-table，这样我们才能去渲染出来原先的那个表格

在一个组件的实例中，我们能够通过vnode去获取到当前的一个虚拟dom，vnode去获取到当前的一个虚拟dom，vnode去获取到当前的一个虚拟dom，vnode有一个componentOptions组件配置项的属性，通过他的children就能获取到所有的el-table-column 虚拟dom数组

如何渲染表格

上一步我们已经拿到了所有的el-table-column虚拟dom，那怎么将虚拟dom去渲染成对应的表格组件呢？

这不render就该登场了吗！！

这个children就是我们拿到的el-table-column的数组，我们只需要将该虚拟dom的数组以组件属性的形式传传进来了，再创建一个el-table,将对应的children传给他！卧槽，这不就又和原本xxx的效果一毛一样吗，是的 ，我做的就是挂羊头卖狗肉。

也就是说，实际上我的hf-table只是劫持了el-table，他的作用只是拿到原本写的el-table-colunm的虚拟dom，去渲染成一个表格

操作表格

此时我们的任务已经完成大半了，就是我原本el-table的标签已经可以被替换了，那我们要做的就只剩下操作表格了。 实际我做的很简单，既然我已经拿到了所有的子节点，那我就在hf-table组件中去操作成我想要的数组，再丢给render函数去渲染就好了

组件代码

整个组件的代码，代码量除掉样式也就不到100行

表格函数式组件

import Vue from 'vue' export default Vue.component('newtable', { functional: true, props: {}, listeners: {}, render: function(h, context) { return h( 'el-table', { props: context.data.attrs.config.attrs, on: context.data.attrs.config.listeners }, context.data.attrs.config.children ) } }) 

问题点与优化

当真的推行到项目中时，发现了以上代码存在了几个问题:

1.函数式组件没有生命周期和实例，也就是table.js帮我们渲染了el-table,我们却没办法拿到el-table 的实例，也就没办法去调用table原生的方法，例如clearSelection等

2.忘了做插槽传递。例如空数据自定义插槽等

hf-table.vue