发现一个Element-Plus 小工具，用起来不要太爽

前言

一直以来我都被element-plus的from表单和table表格组件的开发困扰，每次改问题的时候就会发现组件一大堆表单代码，冗余太多了，然后又是不同开发者改。注释的代码，重复复制黏贴的代码。看着自己都头疼

新发现

突然，前两天我在网上冲浪的时候发现了一个可以解决我困扰的问题，而且使用起来很方便，基本在element-plus项目中使用毫无违和感，而且撰写了使用文档，不得不说有点东西。

入口在这里 element-plus-kit

活不多说，上效果

目前看了对应的文档，只有两个组件 QForm 和 QTable，但是用起来很清爽。而且作者目的很明确。

QForm

阅读文档发现，目前QForm支持了 19种组件 ，我发现16种是element-plus官方组件表单型组件，另外作者还补充了三种常用的组件，

使用效果

• html 部分

<template>
    <QForm ref="formRef" label-width="125px" :model="FormValue" :form-options="formOptions"
        :buttons="['search', 'reset', { label: '自定义提交按钮', type: 'submit' }]" @search="onSearch">
        <template #customslot>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </template>
    </QForm>
</template>

• js 部分

<script setup lang="ts" name="base">
import { ref } from "vue";
import { QForm } from "@meetjs/element-plus-kit";

const opts1 = [{ label: "选项1", value: "1" }, { label: "选项2", value: "2" }];

const opts = ref(opts1);
const formRef = ref<any>(null);
const FormValue = ref({
    name: "我爱你中国",
    sex: 1,
    count10: "我是text",
    html1: `<font color="red" size="5">我是html</font>`
});
const formOptions = ref([
    { type: "input", label: "输入框", prop: "name" },
    { type: "textarea", label: "文本域", prop: "textarea" },
    { type: "input-number", label: "数字输入", prop: "count", },
    { type: "radio", label: "单选框", prop: "sex", required: false, options: opts.value, },
    { type: "checkbox", label: "多选框", prop: "checkbox", options: opts.value, },
    { type: "select", label: "选择器", prop: "region", options: opts.value, },
    { type: "select-v2", label: "虚拟化选择器", prop: "count1", options: opts.value },
    { type: "cascader", label: "级联选择器", prop: "count2", },
    { type: "tree-select", label: "树形选择", prop: "treeSelect", options: []},
    { type: "time-select", label: "时间选择", prop: "count3", },
    { type: "slider", label: "滑块", prop: "count8" },
    { type: "switch", label: "开关", prop: "count9" },
    { type: "date-picker", label: "日期(时间)选择器", prop: "count4", attrs: { type: "datetime" }, },
    { type: "time-picker", label: "时间选择器", prop: "count5" },
    { type: "rate", label: "评分", prop: "count7" },
    { type: "color-picker", label: "颜色选择器", prop: "count6" },
    { type: "text", label: "渲染文本", prop: "count10" },
    { type: "html", label: "渲染html", prop: "html1" },
    { type: "slot", label: "自定插槽", prop: "customslot", },
]);

const onSearch = () => {
    console.log(FormValue.value);
};

</script>

• 效果

通过哐哐哐配置，好了，表单开发结束。而且，还支持栅格布局，表单检验，同时作者还细心的提供了很多配置示例。我觉得算是比较良心了 。

下面我们再来看看 QTable 组件。

QTable

先上效果

接口效果，你会发现他的table 还支持了头部区域和分页区域，这样在开发过程中我们就不需要再单独处理分页和表格头部区域，直接使用的他的配置配置就OK了。

复杂配置

我们看一个他官网比较完整的配置吧。

<template>
    <div class="">
        <QTable :title="title" :data="tableData" :columns="columns" v-model:page="page">
            <template #sex.header="{ row }">
                <el-tag size="small" type="warning">Sex</el-tag>
            </template>
            <template #sex="{ row }">
                <el-tag size="small" v-if="row.sex === 1">男</el-tag>
                <el-tag size="small" type="danger" v-if="row.sex === 2">女</el-tag>
            </template>
            <!-- <template #action>
                <el-button type="primary" size="small" text>查看</el-button>
                <el-button type="primary" size="small" text>编辑</el-button>
                <el-button type="danger" size="small" text>删除</el-button>
            </template> -->
        </QTable>
    </div>
</template>

<script lang="ts" setup>
<template>
    <div class="">
        <QTable :title="title" :data="tableData" :columns="columns" v-model:page="page">
             <template #headerRight>
                <el-button type="primary" size="small">添加</el-button>
            </template>
            <template #sex.header="{ row }">
                <el-tag size="small" type="warning">Sex</el-tag>
            </template>
            <template #sex="{ row }">
                <el-tag size="small" v-if="row.sex === 1">男</el-tag>
                <el-tag size="small" type="danger" v-if="row.sex === 2">女</el-tag>
            </template>
            <!-- <template #action>
                <el-button type="primary" size="small" text>查看</el-button>
                <el-button type="primary" size="small" text>编辑</el-button>
                <el-button type="danger" size="small" text>删除</el-button>
            </template> -->
        </QTable>
    </div>
</template>

<script lang="ts" setup>
import { ref, h } from 'vue'
import { QTable } from '@meetjs/element-plus-kit'
import { ElTag, ElButton } from 'element-plus'

const title = ref('用户信息表')

const page = ref({ current: 1, size: 10, total: 30 })

const tableData = ref([
    { name: '张三', age: 18, sex: 1, hobby: '打游戏，看电影' },
    { name: '李四', age: 35, sex: 2, hobby: '打游戏，看电影' },
    { name: '王五', age: 25, sex: 1, hobby: '打游戏，看电影' },
    { name: '赵六', age: 16, sex: 2, hobby: '打游戏，看电影' },
    { name: '钱七', age: 23, sex: 1, hobby: '打游戏，看电影' },
])

const columns = ref([
    {
        type: 'selection',
        align: 'center',
    },
    {
        label: '序号',
        type: 'index',
        align: 'center',
        width: 60
    },
    {
        prop: 'name',
        label: ({ column, $index }) => {
            return h(ElTag, {}, { default: () => '姓名' })
        }
    },
    {
        prop: 'age',
        label: '年龄',
        align: 'center',
        // 使用 render-header可以使用，但控制台会报警告，官网建议使用 scoped-slot 代替 render-header，
        'render-header': ({ column, $index }) => {
            return h(ElTag, {}, { default: () => '年龄' })
        },
        render: ({ row, column, $index }) => {
            return h('a', { style: { color: row.age > 20 ? 'green' : 'blue' } }, { default: () => row.age })
        },

    },
    {
        prop: 'sex',
        label: '性别',
    },
    {
        prop: 'hobby',
        label: '爱好'
    },
    {
        prop: 'action',
        fixed: 'right',
        label: '操作',
        width: 150,
        render: ({ row, column, $index }) => {
            return h('div', {}, [
                h(ElButton, { type: 'primary', size: 'small', text: true }, { default: () => '查看' }),
                h(ElButton, { type: 'danger', size: 'small', text: true }, { default: () => '删除' }),
            ])
        }
    },
])

</script>

效果图：

这一篇基本都满足了我日常开发所有的困惑或者使用案例。

最后

用作者一句话：简单，灵活，高效。不信你试试