element-ui封装一个Table模板组件的示例

一般这些功能都是使用第三方组件库实现，比如说element-ui，或者vuetify。这两个组件库都各有各的优点，但就table组件来说，我还是比较喜欢vuetify的实现，不用手写一个个column，只要传入headers的配置数组就行，甚至分页器都内置在了table组件里，用起来十分方便。有兴趣可以看看：上面是一个经典的用element-ui开发的table页面，而且实际工作中如果每个table页面都写一遍，重复代码太多了，所以不妨写一个table模板组件，减少重复代码。我的思路是这样的：搜索功能区：提供searchBar插槽，可以自定义搜索输入框，搜索、重置按钮必有，新增按钮通过props控制显隐。这里对应的代码如下：表格内容区：通过传入headers自动生成columns，参数如下：可对应如下代码：注意，只支持全局filter。