Quasar的自定义Table组件

描述：
在上篇文章当中，分页组件+Table表格+编程式导航基本能够实现所需。但是如果对表格的字段进行排序功能，需要自定义表头，且点击触发排序事件。

后来发现，如果每个页面都这样写，会显得很冗余，想着能否尽量的减少代码。经过实践，将q-table进行了简单的自定义封装。

结果：

• 将过滤匹配操作、排序操作放到了c-table中
• 将分页组件嵌入c-table中
• 能够自定义表内容，body部分
• 能够自定义筛选项部分，top部分
• 能够支持多选multiple，默认为none
• 默认左对齐

实现代码

使用代码

使用注意

1.
由于c-table经历了一层q-table，存在父组件到孙子组件通讯。

在能够让c-table自定义body的过程中

    
      
      
        
        
          {{props.row[item.name]}}
        
      
    

props包含了key=xxx，而在slot中添加key一直报错

// 出错

所以干脆把props整个当作props传入，然后把row也一同传入

而在自定义body中，

q-td原来直接传入props，而由于经历了一层，所以此处的:props传入的是props.props从而保证了q-td找不到key的问题。
2.
在点击筛选，触发过滤项匹配事件时，这里的问题在于如何从父组件向子组件传递点击事件，而触发子组件的事件。利用了vue的ref。

同时传递了筛选内容。此外，在使用ref时，需要在c-table中添加ref='xxx'

最后

可能采用的方式和逻辑比较怪异，应该还有其他地方做的不够兼容。望指正。