解放劳动力,拒绝crud【基于element-ui的表格模版】

缘起

在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。

常规操作流程:

  • 表格组件
  • 分页组件
  • 弹出层组件+表单组件一套
  • 搜索栏表单组件一套

一把梭下来写了很多样版式代码,风格可能还不统一。

为了解放劳动力,特此,基于element-ui封装了一个table-template组件,现在只需加上少量配置项,就可以完成一套表格+表单+分页+搜索的页面。

参数说明:

  • data 显示的数据
  • config 配置项
  • @submit-add 新增提交时触发
  • @submit-edit 编辑提交时触发
  • @submit-search 点击搜索时触发
  • @page-change 点击分页时触发
  • page 分页参数

更多配置项说明请在项目中查看,仓库地址:戳这里

在线运行


上面代码即可生成如下页面:
解放劳动力,拒绝crud【基于element-ui的表格模版】_第1张图片
在线运行

完结

你可能感兴趣的:(vue.js,element-ui,jsx)