缘起

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

常规操作流程：

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

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

为了解放劳动力，特此，基于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>

上面代码即可生成如下页面：

在线运行

完结