起源是在开发后台管理系统页面时，使用频率最高的是：表单+表单+分页+搜索。大致操作流程：表格组件，分页组件，弹出层组件+表单组件，一组搜索栏表单组件，一组飞梭写了很多布局代码，样式可能不统一。为了解放劳动力，特此在element-ui的基础上封装了一个table-template组件，现在只需要添加几个配置项就可以完成一套表格+表单+分页+搜索页面。参数说明：data显示的数据config配置项@submit-add添加新提交时触发@submit-edit编辑提交时触发@submit-search点击搜索时触发@page-change点击页面时触发页面分页参数更多配置项使用说明请查看项目，仓库地址：点此在线运行<脚本>exportdefault{data(){return{tableLoading:false,userList:[{id:"123",username:"xxx",phone:"13555555555",state:1}],config:{dialogProps:{宽度：'500px'}，handlerProps：{width：'130px'}，列：[{标签：'ID'，字段：'id'，hideInDialog：true，hideInSearch:true,},{label:'登录账号',field:'用户名',},{label:'手机',field:'电话',hideInSearch:true,},{label:'状态',field:'state',type:'tag',value:1,选项:[{value:1,text:"normal"},{value:0,text:"disabled"}],stateMapping:{0:"danger",1:"success"},//render:(row)=>{//返回row.state?normal:禁用//},formEl:{type:"radio",},searchEl:{type:"select",props:{clearable:true}}},],handlerList:[{label:'Edit',icon:'el-icon-edit'},{label:'Delete',icon:'el-icon-delete',click:row=>{console.log(“删除”）;}}],rules:{username:[{required:true,message:'Pleaseenteryourloginaccount',trigger:'blur'}],},},page:{current:1,size:10,total:10}};},方法：{handleSearch(params){console.log("search",params);},submitAdd(row,hideLoading,done){console.log("add");,submitUpdate(row,hideLoading,done){console.log("update");},fetchList(){console.log("pageChange");}}}以上代码可以生成如下页面：Online运行后，后续代码生成器快速生成前端+后端CRUD模板，进行中...
