饿了么框架的表格自定义
直接展示表格组件代码table.vue。
数据格式tableData包含表格所需信息。
分页代码参考饿了么文档,操作栏由父组件传递isShow控制显示与隐藏。操作栏采用作用域插槽,支持自定义配置。
调用代码:tableData="tableData"传递数据,v-on:del_data="showChild"接收子组件传来的id值。删除按钮触发deleteClick(scope)事件,获取当前行信息,使用axios执行相应操作。
批量操作功能通过具名插槽实现,子组件定义selection-change事件。
父组件接收事件,完成批量功能。
至此,具备复用性的表格组件构建完成。此组件设计思路对初次使用element-ui做表格的前端人员具有指导意义。欢迎指正错误和补充不足之处,共同进步。
多重随机标签