基于element-plus的二次封装，助你快速开发后台。

本人主要从事后端开发，前端菜鸟一枚，封装组件主要为了方便快速开发后台，写的差勿喷。

首先大部分人开发后台无非就是CRUD的过程，这个过程就是个重复的没有意义的过程，而我们要想着的是怎么减少这一部分的时间，让我们愉快的摸鱼。所以二次封装ui组件是必要的。

怎么封装？封装后有什么显著的提升？先看看效果

这是一个普通的编辑页，在没封装情况下要实现这个页面的所有功能，包括保存、验证需要多久？代码需要写多少？我不知道哈，这边就不做对比，先放下封装后的代码：

<template>
    <els-container>
        <els-menu-tool :data="toolData"></els-menu-tool>
        <els-form v-model="editData" style="margin-top: 10px;" labelWidth="60">
            <els-input label="名字" prop="name"  required  >
            </els-input>
            <els-input label="身价" prop="revenue" required validType="Price"></els-input>
            <els-select label="类型" prop="type" :url="apiUrl" label-field="Name" value-field="ID" required
                clearable>
            </els-select>
            <els-radio label="城市" prop="city" required>
                <els-option>北京</els-option>
                <els-option>天津</els-option>
                <els-option>福州</els-option>
                <els-option>厦门</els-option>
            </els-radio>
            <els-checkbox label="多选" prop="mutiCity" required>
                <els-option>北京</els-option>
                <els-option>天津</els-option>
                <els-option>福州</els-option>
                <els-option>厦门</els-option>
            </els-checkbox>
            <els-textarea prop="remark" label="备注" width="500" ></els-textarea>
        </els-form>
    </els-container>
</template>
  
<script setup lang="ts">
import { ref } from 'vue'
const editData = ref({ name:'彭于晏',revenue:100000000,type: '', city: '天津',mutiCity:'北京',remark:'',test:''})
const apiUrl = 'http://localhost:5000/home/test2'
const toolData = ref<any>(
    [
        {
            "MenuID": "9edf0d1964cc4c22a039fb329bb05e6a",
            "MenuName": "保存",
            "ActionType": "Save",
            "ButtonColor": "primary",
            "ImageUrl": "el-icon-edit",
            "TargetUrl": "/Add",
        },
        {
            "MenuID": "55d5ff6b2bc346c197ddcb8b419788d8",
            "MenuName": "返回",
            "ActionType": "Search",
            "ButtonColor": "info",
            "ImageUrl": "el-icon-back",
            "TargetUrl": "/ReadData"
        }
    ]
)
</script>

发现了没，表单里面我直接省略了el-form-item，没错，我将el-form-item和组件进行了融合，并且省略了v-model，代码量大大减少，页面瞬间清晰了许多不是吗，接下来我们再看看列表页：

代码：

<template>
    <els-container>
        <els-menu-tool :data="toolData"></els-menu-tool>
        <els-form-query style="margin-top: 10px;"  >
            <els-input label="ID" prop="ID" clearable ></els-input>
            <els-select label="作者" prop="AuthorName" clearable>
                <els-option>无敌元气妹</els-option>
                <els-option>稚葵</els-option>
                <els-option>伊人妆</els-option>
                <els-option>海浪无声</els-option>
            </els-select>
        </els-form-query>
        <els-table :url="apiUrl" :page-size="10" isClientPage row-key="WallID">
            <els-column-checkbox />
            <els-column prop="ID" label="ID" align="left" sortable></els-column>
            <els-column prop="AuthorName" label="作者" align="left"></els-column>
        </els-table>
    </els-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const apiUrl = ref('http://localhost:5000/home/test')
const toolData = ref<any>(
    [
        {
            "MenuID": "9edf0d1964cc4c22a039fb329bb05e6a",
            "MenuName": "新增数据",
            "ActionType": "Target",
            "ButtonColor": "primary",
            "ImageUrl": "el-icon-edit",
            "TargetUrl": "/Add",
        },
        {
            "MenuID": "55d5ff6b2bc346c197ddcb8b419788d8",
            "MenuName": "查询",
            "ActionType": "Search",
            "ButtonColor": "primary",
            "ImageUrl": "el-icon-search",
            "TargetUrl": "/ReadData",
        }
    ]
)
</script>

这个页面包含顶部菜单，查询表单，表格右键菜单，本地分页，而我们只需要写不到50行代码就能轻松实现。

好了，再过半小时就要下班了，就先写这么多把。

使用elementui已经有五六年之久，公司的后台也是用vue+elementui构建的，所以积累了一些经验希望能帮助到大家。