HOWUSE

Appearance

表单构建 ​

快速开始 ​

安装 ​

sh
pnpm add @howuse/element-plus-form
sh
npm i @howuse/element-plus-form
sh
yarn add @howuse/element-plus-form

简单查询示例 ​

<template>
    <ProForm :columns="formColumns" :span="8" @ok="submit"/>
</template>
<script setup lang="ts">
import { createProForm, ProForm } from '@howuse/element-plus-form'

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
    {
        label: "体重",
        key: "weight",
        value: "",
        is: "ElInput",
    },
    {
        label: "城市",
        key: "city",
        value: "",
        is: "ElSelect",
        data: [{ label: "北京", value: 1 }, { label: "上海", value: 2 }],
        optionLabel: "label",
        optionValue: "value",
    },
])

function submit(raw) {
    alert(JSON.stringify(raw))
}
</script>

修改按钮位置 ​

<template>
    <ElSpace>
        <ElButton v-for="p in ps" type="primary" @click="btnPosition = p">{{ p }}</ElButton>
    </ElSpace>
    <div style="margin-top: 10px;"></div>
    <ProForm :columns="formColumns" :span="8" :btn-position="btnPosition" @ok="submit" />
</template>
<script setup lang="ts">
import { createProForm, ProForm } from '@howuse/element-plus-form'
import { ElSpace, ElButton } from 'element-plus'
import { ref } from 'vue';

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])


function submit(raw) {
    alert(JSON.stringify(raw))
}
// === 按钮位置修改 ===
const btnPosition = ref("right")
const ps = ["right", "left", "center", "float-end", "col"]
</script>

表单验证 ​

<template>
    <ProForm :columns="formColumns" :span="12" ok-text="保存" @ok="submit" :display-expend="false" :btn-position="'center'" />
</template>
<script setup lang="ts">
import { createProForm, ProForm } from '@howuse/element-plus-form'

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
        rules: [
            { required: true, message: "请输入姓名" },
        ]
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
        rules: [
            { required: true, message: "请输入年龄" },
        ]
    },
    {
        label: "体重",
        key: "weight",
        value: "",
        is: "ElInput",
        rules: [
            { required: true, message: "请输入体重" },
        ]
    },
    {
        label: "城市",
        key: "city",
        value: "",
        is: "ElSelect",
        data: [{ label: "北京", value: 1 }, { label: "上海", value: 2 }],
        optionLabel: "label",
        optionValue: "value",
        rules: [
            { required: true, message: "请选择城市" },
        ]
    },
])

function submit(raw) {
    alert(JSON.stringify(raw))
}
</script>

弹窗操作 ​

clickOkClose 用于点击确定后关闭弹窗，默认是 false。

额外的数据值，指的是没有在createProForm当中声明的值，但是进行了赋值。



<template>
    <ProFormDialog v-model:visible="visible" clickOkClose title="编辑">
        <ProForm :columns="formColumns" :span="8" :btn-position="'center'" ok-text="保存" @ok="submit">
        </ProForm>
    </ProFormDialog>

    <ProFormDialog v-model:visible="visible2" title="编辑">
        <ProForm :columns="formColumns" :span="8" :btn-position="'center'" @ok="submit">
            <template #suffix-btn="{ close }">
                <ElButton @click="close()">关闭</ElButton>
            </template>
        </ProForm>
    </ProFormDialog>
    <ProFormDialog v-model:visible="visible3" :title="formModel3.id > 0 ? '编辑' : '新增'">
        <ProForm :columns="formColumns3" :span="8" :btn-position="'center'" @ok="submit">
            <template #suffix-btn="{ close }">
                <ElButton @click="close()">关闭</ElButton>
            </template>
        </ProForm>
    </ProFormDialog>

    <ElSpace>
        <ElButton @click="visible = true">打开弹窗</ElButton>
        <ElButton @click="visible2 = true">打开弹窗 自定义关闭按钮</ElButton>
    </ElSpace>
    <div><b>根据额外的数据值判断给定弹窗标题</b></div>
    <ElSpace>
        <ElButton @click="openAdd()" type="primary">新增</ElButton>
        <ElButton @click="openEdit()" type="warning">编辑</ElButton>
    </ElSpace>
</template>
<script setup lang="ts">
import { createProForm, ProForm, ProFormDialog } from '@howuse/element-plus-form'
import { ElButton, ElMessage, ElSpace } from 'element-plus';
import { ref } from 'vue';

const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])

const { formColumns: formColumns3, formModel: formModel3, setValue } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])


function submit(raw) {
    ElMessage.success(JSON.stringify(raw))
}

// 新增
function openAdd() {
    formModel3.value = {
        name: '',
        age: '',
    }
    visible3.value = true
}

// 编辑
function openEdit() {
    formModel3.value = {
        name: '张三',
        age: '100',
        id: 1,
    }
    visible3.value = true
}
</script>

抽屉操作 ​

clickOkClose 用于点击确定后关闭弹窗，默认是 false。



<template>
    <ProFormDrawer v-model:visible="visible" clickOkClose title="编辑">
        <ProForm :columns="formColumns" :span="24" :btn-position="'center'" :display-expend="false" @ok="submit">
        </ProForm>
    </ProFormDrawer>

    <ProFormDrawer v-model:visible="visible2" clickOkClose title="编辑">
        <ProForm :columns="formColumns" :span="24" :btn-position="'center'" :display-expend="false" @ok="submit">
            <template #suffix-btn="{ close }">
                <ElButton @click="close()">关闭</ElButton>
            </template>
        </ProForm>
    </ProFormDrawer>
    <ElSpace>
        <ElButton @click="visible = true">打开抽屉</ElButton>
        <ElButton @click="visible2 = true">打开抽屉 自定义关闭按钮</ElButton>
    </ElSpace>
</template>
<script setup lang="ts">
import { createProForm, ProForm, ProFormDrawer } from '@howuse/element-plus-form'
import { ElButton, ElMessage, ElSpace } from 'element-plus';
import { ref } from 'vue';

const visible = ref(false)
const visible2 = ref(false)

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])


function submit(raw) {
    ElMessage.success(JSON.stringify(raw))
}
</script>

Api ​

ProForm ​

属性 ​

属性名说明类型默认值
span对应el-row的span属性number4
okText查询按钮文字string查询
displayExpend是否展示展开按钮，常用于搜索项折叠booleanfalse
btnPosition按钮位置，可选值："right","left","center","float-end","col","none"。stringright
isRule是否开启表单验证booleantrue
hiddenReset是否隐藏重置按钮booleanfalse
immediate是否立即执行booleantrue

事件 ​

属性名说明类型默认值
ok点击查询按钮触发（raw: any）=> void{}

插槽 ​

属性名说明类型默认值
prefix-btn在重置按钮之前加入新的元素, 调用 close 可关闭按钮--
suffix-btn在查询按钮之后加入新的元素, 调用 close 可关闭按钮--

createProForm ​

参数：

typescript
{
    label: string;
    key: string; // 向后端提交的数据的键值
    value: any; // 必要字段，向后端提交的数据
    resetVal?: any; // 默认值，需要和value保持一致，如果value没有设置，则赋值resetVal
    rules?: Recordable[];
    span?: number; // 表单占据的宽度, 参数取值于 el-col 
    is: FormItemType, // element或者自定义组件名称
    optionLabel?: MaybeRef<string> | ComputedRef<string>; // 下拉框使用
    optionValue?: string; // 下拉框使用
    optionChildren?: string; // 下拉框使用
    data?: any; // 数据源，下拉框使用
    props?: Recordable;
    formItemProps?: Recordable;
    hidden?: MaybeRef<boolean>;//是否隐藏
}[]

返回值：

属性名说明默认值
formModel表单数据-
formColumnsProForm组件对应的columns属性-
setValue设置某个key值对应的value-
getValue获取对应key的值-
updateRestValue更新触发重置时，输入框的默认值value 对应的值

ProFormDialog ​

属性 ​

属性名说明默认值
v-model:visible打开/关闭弹窗-
clickOkClose点击ProForm的查询/保存按钮时，关闭弹窗-

ProFormDrawer ​

属性 ​

属性名说明默认值
v-model:visible打开/关闭抽屉-
clickOkClose点击ProForm的查询/保存按钮时，关闭抽屉-
btnFixedBtm操作按钮是否固定底部 ， 默认固定在底部-

FAQ ​

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/dayjs.min.js?v=2e96311a' does not provide an export named 'default' ​

这个错误出现在element-plus 自带 dayjs 的 1.x 版本，如果不是此版本，请尝试本方法或者寻找新的解决方案。

安装 pnpm add dayjs@1

vite 配置

ts
export default defineConfig({
    optimizeDeps: {
        include: [
        'dayjs',
        'dayjs/plugin/*'
        ]
    },
})