解放勞動力，拒絕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>

上面代碼便可生成以下頁面：

在線運行

完結