基于Vue的动态通用table表格及dialog对话框处理技巧总结

前言：采用vue并结合element-ui制作网页端管理系统中的表格是不难的，对应的form，table，dialog基本都有现成的样例，再结合vue基于数据的方式，很轻松就可以实现一个表格展示并进行动态添加，那么问题来了，如果一个管理系统中有很多表格，难道我们要一个一个去制作？就没有一个一劳永逸的解决办法么？只要制作一个table模板，给我要展示的数据，告诉要展示那些列，就能自动生成表格？答案是有的，下面我就如何用vue处理这种情况的方式技巧进行说明。源代码已经上传到gitee中，连接地址在文末给出。

由于本案例仅仅是一个demo，所以组件很少，其中components中common.js主要是对数据进行clone操作（因为js数据都是引用类型，不clone会一处动处处动），models中的数据主要负责table中展示那些列，和dialog中展示那些数据。models中数据原来也在APP根组件中，后来整合到models中。table组件就是展示表格的组件，myDialog组件就是展示对话框的组件。filter文件就是过滤器，负责对时间戳和男女性别等数据进行转换使用。下面进入正文。

其实动态表格的核心就是展示数据的传输和控制列的展示，先看一下不是动态的情况下表格代码是什么样子的。

普通情况：

调整为动态后：

对应的列数据和表格内容数据：

调整为动态代码中:data="mydata"是从父组件APP中传递进来的展示数据，myColsShow是对models中列数据（如上）是否展示进行的一个过滤（models中增加了IsShow属性）。代码如下

在el-table中必须要给定data数据，同时在el-table-column中用prop属性绑定数据key值，就可以展示表格了。如果要自定义表格，就不用prop属性，通过prop是否存在判断是否为自定义列。然而在标签内设置插槽slot，其中是为了获取当前行的全部数据通过插槽作用域传递给父级，才是真正的插槽预留位，通过插槽作用域将数据传递到父级template中便于对日期等数据进行处理，最后再通过插槽将数据拿回来展示（具体的看源码）。

核心思想通过v-for对要展示的列进行循环，通过v-if、v-else-if进行判断展示的是那种情况列（后期还可以动态补充）

插槽作用域看这篇文章：

https://www.jianshu.com/p/0c9516a3be80

dialog对话框的情况也是类似于table表格，先绑定数据（和表格公用数据），之后通过循环确定要展示的列，根据v-if进行判断列的类型进行展示。代码如下：

这里我只列举了五种情况，后续若有新的数据形式仍然可以动态添加。

效果如下：

这里面在动态页码处理的时候出现了子组件更改父组件的情况，我用到了.sync的用法，代码如下：

针对.sync具体用法看如下连接：

官网：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

其他：https://www.jianshu.com/p/6b062af8cf01

本文对动态表格和对话框的思路进行简单说明，核心就是写了个框架，其他地方只要给数据，要展示的列就可生成对应表格，并且可以和对话框关联。因为这里面涉及较多的组件间通信，所以通过叙述很难描述的清楚。

为此我把全部项目demo放到了gitee中，想要研究的同学可以自行下载。

gitee连接：

https://gitee.com/fan-shuchang/The-dynamic-form