解放劳动力,拒绝crud【基于element-ui的表格模版】
2020/1/4 5:21:32
本文主要是介绍解放劳动力,拒绝crud【基于element-ui的表格模版】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
缘起
在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。
常规操作流程:
- 表格组件
- 分页组件
- 弹出层组件+表单组件一套
- 搜索栏表单组件一套
一把梭下来写了很多样版式代码,风格可能还不统一。
为了解放劳动力,特此,基于element-ui封装了一个table-template组件,现在只需加上少量配置项,就可以完成一套表格+表单+分页+搜索的页面。
参数说明:
-
data
显示的数据 -
config
配置项 -
@submit-add
新增提交时触发 -
@submit-edit
编辑提交时触发 -
@submit-search
点击搜索时触发 -
@page-change
点击分页时触发 -
page
分页参数
更多配置项说明请在项目中查看,仓库地址:戳这里
<template> <section> <table-template :data="userList" :config="config" :table-loading="tableLoading" @submit-add="submitAdd" @submit-edit="submitUpdate" @submit-search="handleSearch" @page-change="fetchList" :page='page'> </table-template> </section> </template> <script> export default { data() { return { tableLoading: false, userList: [ { id: "123", username: "xxx", phone: "13555555555", state: 1 } ], config: { dialogProps: {width: '500px'}, handlerProps: {width: '130px'}, columns: [ { label: 'ID', field: 'id', hideInDialog: true, hideInSearch: true, }, { label: '登录账号', field: 'username', }, { label: '手机', field: 'phone', hideInSearch: true, }, { label: '状态', field: 'state', type: 'tag', value: 1, options: [{value: 1, text: "正常"}, {value: 0, text: "禁用"}], stateMapping:{ 0:"danger", 1:"success" }, // render: (row) => { // return row.state ? <el-tag type="success">正常</el-tag> : <el-tag type="danger">禁用</el-tag> // }, formEl: { type: "radio", }, searchEl: { type: "select", props: { clearable: true } } }, ], handlerList: [ { label: '编辑', icon: 'el-icon-edit' }, { label: '删除', icon: 'el-icon-delete', click: row => { console.log("delete"); } } ], rules: { username: [ {required: true, message: '请输入登录账号', trigger: 'blur'} ], }, }, page: { current: 1, size: 10, total: 10 } }; }, methods:{ handleSearch(params) { console.log("search",params); }, submitAdd(row, hideLoading, done) { console.log("add"); }, submitUpdate(row, hideLoading, done) { console.log("update"); }, fetchList(){ console.log("pageChange"); } } } </script>
上面代码即可生成如下页面:
在线运行
完结
这篇关于解放劳动力,拒绝crud【基于element-ui的表格模版】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)