先看一下我的项目的页面构成
![](https://img.haomeiwen.com/i22517122/95f4dd9ba3a992cd.png)
几乎每个页面都是上下结构,上边是筛选条件区域,下边则是表格和分页
这里我定义了两个组件:myFilter和myTable
myFilter组件
![](https://img.haomeiwen.com/i22517122/af770c36176e2442.png)
该组件由五部分构成:input输入框、select下拉框、查询按钮、新增按钮、slot五部分构成,它们都是可选的
input
![](https://img.haomeiwen.com/i22517122/8d210885f4cfc44d.png)
![](https://img.haomeiwen.com/i22517122/edc8c1cb1debe5e0.png)
select
![](https://img.haomeiwen.com/i22517122/6b67977e52658e72.png)
![](https://img.haomeiwen.com/i22517122/617d033fb738e613.png)
查询和新增按钮
![](https://img.haomeiwen.com/i22517122/327e61b5a1c7cf7c.png)
slot
![](https://img.haomeiwen.com/i22517122/38f9dfc6ffb4d0ca.png)
使用
![](https://img.haomeiwen.com/i22517122/f4399858cbcdffa9.png)
![](https://img.haomeiwen.com/i22517122/9d79eb75770ba905.png)
myTable组件
![](https://img.haomeiwen.com/i22517122/e8c71882225f69a0.png)
该组件由两部分构成,分别为表格和分页器,它必须接收如下参数
![](https://img.haomeiwen.com/i22517122/57a3cbff6fc5f821.png)
table
![](https://img.haomeiwen.com/i22517122/ff372685af0e35f0.png)
框红一的位置,对索引列进行处理
![](https://img.haomeiwen.com/i22517122/3272414460270e68.png)
框红二的位置,对特殊的列进行处理,如展示图片,提供slot由父组件传入
框红三的位置,为父组件保留操作按钮
最后通过cell-click将数据向父组件传递一份
![](https://img.haomeiwen.com/i22517122/b9b6ea3e955ae5f1.png)
分页
![](https://img.haomeiwen.com/i22517122/e63ab23cd533d190.png)
![](https://img.haomeiwen.com/i22517122/32b1b0f28a3b6062.png)
使用
![](https://img.haomeiwen.com/i22517122/0888279df69acbd7.png)
![](https://img.haomeiwen.com/i22517122/3de001d5518f56c3.png)
网友评论