通过对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组件,