小工具

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

新发现

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

入口在这里 element-plus-kit

活不多说，上效果

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

QForm

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

使用效果

• html 部分

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 部分

ts
 代码解读
复制代码
<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>

• 效果

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