el-form-render

Appearance

element-plus 表单渲染 ​

支持 el-form 所有属性

安装 ​

请确保已安装 element-plus

bash
pnpm add el-form-render

基础用法 ​

基础用法 ​

登录表单 ​

评论表单 ​

个人信息 ​

头像组件 使用了 el.is 属性自定义 上传组件

格式化值 ​

通过设置 get set 控制组件的值

  • get：相当于组件的 model-value 属性
  • set：相当于组件 @update:model-value 事件

组件联动 ​

vIf 控制元素是否渲染

vIf 可以控制任何元素

自定义组件 ​

INFO

大部分情况 type 提供的组件已足够满足需求，但总有需要定制化的场景，这时候 el.is 属性就派上用场了

接入标准 ​

自定义组件接入的关键是在组件内部实现 v-model

  • props 需要接收 modelValue
  • 对外触发 update:modelValue 事件

自定义布局 ​

3 列布局 ​

使用 css 的网格布局实现 3 列布局 grid grid-cols-3 gap-x-8

多列布局 ​

折叠面板 布局 ​

Tabs 布局 ​

Results ​

TIP

lp 是 label prop 的缩写

如果不指定 type 则默认为 input