vue可填写表格_17.Vue技术栈开发实战-可编辑表格的实现

通过对iview的table表格的封装，实现如何自定义表格的内容。实现一个可编辑的表格。

为了节省时间，首先已经做了一些准备

首先是已经创建了table页

然后写了一个api，用来获取表格数据。

然后在mock里面也进行了处理。返回了数据的响应

tools里面封装了一个方法doCustomTImes

times是循环的次数，callback是回调函数。

执行循环5次，根据template生成5条数据记录。

最后在table页调用访问api的方法

可编辑表格组件

创建edit-table组件。

index.js内，引入并导出组件

组装封装，只用到iview里面的table组件。外面不用包裹顶层的div直接用Table就可以了。

有两个需要传的重要的属性，一个是定义列的数组，一个是数据的数组。在table.vue里面我们已经定义好了。

key就是绑定的字段值，title就是列的标题。editable是我们自定义的属性，并不是iview的属性。

引入组件并注册

组件内定义属性 columns是一个空的数组，数组设置默认值，要写一个回调函数，返回一个空数组。

把属性传入Table组件。

给表格添加可编辑的按钮

要给这个表格添加一个可编辑的按钮。是不是要在columns里面给这个列添加一个render回调函数呢？如果你在这里要自己写的话，是要加一个render，然后传入一个回调函数。

我们既然要封装一个可编辑表格，那么这个工作肯定是要内部做了。

所以在哪去处理，这里列数组的东西呢？

首先在计算属性里面 我们拿到了列

在这里我们就要会columns做处理了。在这里定义一个indiseColumns，因为我们不能直接修改父组件传递过来的数据的。如果要修改就必须抛出一个事件，在父组件内接收事件，在事件的绑定回调函数里面去做数据的修改。

这里我们用map做映射

如果传入的列有render函数，说明在外面自定义了render

只要是没有自带render，并且editable为true的情况下。

这里是一个解构赋值的形式

第一个参数是组件名，第二个参数是可配置的属性，第二个参数是可选的。

如果没有需要可设置的值，就把它删掉。

第三个参数是当前这个节点的子节点，如果里面就写一个字符串。它渲染出来的就是包含这个字符串的div

如果你是一个组件，第三个参数就是一个数组，比如我们渲染之前封装的CountTo组件，