在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。
常规操作流程:
一把梭下来写了很多样版式代码,风格可能还不统一。
为了解放劳动力,特此,基于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>
上面代码即可生成如下页面:
在线运行