el-table二次封装表格组件

在日常开发后端管理系统项目中，用于展示数据多会用表格进行展示，这样我们可以把相同的部分处理出来，二次封装一个基于elementUI中的el-table封装一个简单的表格组件，进行多页面的数据展示的复用。

首先第一步肯定要引入elementUI组件库，我们可以使用全局引入和局部引入两种的方式

elementUI具体使用方法可以参考elementUI官网：

Element - The world's most popular Vue UI framework

这边个人推荐使用局部引入，这样可以减少项目的体积

引入之后，接下来我们就可以进行表格的二次封装了：

子组件template部分：

template部分的复选框、状态改变、操作栏使用v-if判断是否显示，父组件传入Boolean值选择是否需要，使用示例请看父组件template部分

一般表格会需要操作栏，那么我们使用插槽在子组件中对操作栏进行自定义，父组件中使用插槽添加自己想要的按钮，例子见代码中详情按钮

有时候会需要使用formatter解析表格中的部分参数（对时间进行处理、钱加$符号、后端返回状态对它进行展示），需要在子组件中定义formatter方法，让它使用父组件中传入的formatter函数即可，具体可看父组件data中的tableColumns

子组件script部分：

子组件在data中规定父组件传递给子组件数据的类型，默认值等

子组件添加一些基础方法，把值传递给父组件，例如点击多选框后，触发子组件中复选框方法，利用$emit子传父自定义方法名，把选中数据传递给父组件，父组件中调用 @selectionData="getData"

父组件template部分：

父组件sccript部分：

在父组件data中tableColumns传入formatter方法，就可以对部分数据进行解析、处理。

以上就是基于el-table做的一个简单地二次封装，可以满足基础表格的使用，建议收藏文章，后续会继续完善，更加完美！