后台管理项目封装表格组件实现项目全部通用

1.先创建组件tableData组件在需要表格的地方引入注册使用

2.因为每个页面的表格head都是不一样的所以这个需要自己定义 首先我们定义一个文件  然后定义一个对象名称 里面是这个页面的表格head名 里面key需要和你的接口里面的key对应 title则是你head显示的title width则是td的宽度

3.然后和入口文件main文件同级定义个配置文件config.js。里面在vue原型链上定义了页码以及head数据等等

4.所以有了一图的:tableHead="$tableHead.user.tableHead"    然后再props里面设置required以及数据类型 然后在el-table表格里面使用template模板循环tableHead   :label绑定里面的title 这样表格head就可以根据每个页面的自己定义不用去写死

5.数据处理 每个页面表格数据都不一样  有的需要显示图片  有的需要显示按钮操作 有的需要input框以及开关操作等等这就需要我们先定义个文件处理需要显示的列表数据。首先我们先定义个总的BaseEntity.js文件来格式每个页面数据的规范

6.定义过后下面就是每个页面的处理 现在我们以user页面为例子 首先引入BaseEntity然后定义个class类user继承它 然后开始处理数据 如果普通显示就直接this.id = props.id这种形式就行。但是特殊显示就需要特殊处理 首先要有个判断类型的type值 组件就是根据这个值来判断类型是img 还是按钮以及其他的  className到时候动态添加的class名字，title是表格显示的内容 value是传入的数据。

7.处理数据弄好以后就是在哪里使用了，首先我们建一个user的页面接口的js  引入的user就是处理数据的class类 然后接口返回list数据  code码 以及总条数

8.数据都处理好了下面就是怎么使用了找到user.vue页面正常使用正常调用就行啦 然后把tableList输入父传子传入组件

9.首先我们需要判断是否有表格head定义的key 以及是否是特殊的数据 图6的数据特殊的node值是true  普通的就else直接显示

10.然后如果type值是img 然后就是用img标签显示  这里我是使用了element的组件 就是可以点击方大图片的 如果是star就是评分功能 colors就是user类中定义好的 （你需要什么你就可以再类中定义什么） 操作事件也是一样 icon都是在类中定义的（一般都是根据权限判断操作显示的） 因为不确定操作按钮数量是循环渲染按钮的 所以要根据操作的id判断事件来派发父组件事件类型

11.根据id判断emit派发 然后根据每个页面的不同定义事件以及接口就行。

12.最后因为到时候一个页面会有一个处理接口的js 一个样式的scss这样引入太麻烦 所以也要处理 定一个index.scss 然后引入所有的样式 然后再main里面引入就行了  不需要每个页面都要引入

13.同样道理 接口也能定义一个js全部引入 然后每个页面值全部引入main就行了

虽然刚开始可能有点麻烦 但是随着项目页面越来越多 体积越来越大 这样处理到时候会非常方便快捷。新的需求页面只需要引入组件定一个类就可以完成页面了都不需要去关心表格。而且维护起来非常容易  不需要进去组件看 只需要维护类就行 需要更改字段直接在类中改 （别忘了和head对应）