element plus el-form双列布局及拓展任意布局

最新推荐文章于 2024-08-19 00:22:47 发布
最新推荐文章于 2024-08-19 00:22:47 发布
阅读量4.7k 收藏 21
点赞数 38
分类专栏： scene vue element ui 文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56624286/article/details/135513688
版权
vue 同时被 3 个专栏收录
53 篇文章 0 订阅
订阅专栏
scene
15 篇文章 0 订阅
订阅专栏
element ui
3 篇文章 0 订阅
订阅专栏

1 场景

一般表单我们直接默认布局，也就是单列布局，突然有个人员信息表单，需要双列布局的需求，简单实现并拓展下

2 思路

直接无脑div+flex布局实现

3 代码

<template>
  <el-form ref="formRef" :model="formData" label-width="80px">
    <div class="form-top">
      <div class="form-top--left">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formData.age" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="formData.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>

        <el-form-item label="排序" prop="sort" placeholder="请输入排序号">
          <el-input-number v-model="formData.sort" :min="1" />
        </el-form-item>
      </div>
      <div class="form-top--right">
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入备注"
            maxlength="100"
            show-word-limit
            resize="none"
          />
        </el-form-item>
        <el-form-item label="说明" prop="config">
          <el-input
            v-model="formData.config"
            placeholder="请输入说明"
            type="textarea"
            show-word-limit
            maxlength="200"
            :autosize="{ minRows: 6, maxRows: 6 }"
          />
        </el-form-item>
      </div>
    </div>
    <div class="form-bottom">
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button type="warning" @click="handleClose">取 消</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup lang="ts">
const formRef = ref();

const formData = reactive({
  remark: "",
  age: 10,
  config: "",
  email: "",
  sex: "",
  id: null,
  name: "",
  sort: 0,
});

const handleClose = () => {};
const handleSubmit = () => {};
</script>
<style lang="scss" scoped>
.container {
  width: 600px;
  margin-top: 100px;
  .form-top {
    display: flex;
    justify-content: space-between;
    .form-top--right {
      flex: 1;
    }
  }
  .form-bottom {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

在这里插入图片描述

这样的无脑实现实在是对不起付出的时间，不嫩复用是最大问题

4 拓展

封装el-form，增加slot

// Form.vue

<template>
  <el-form>
    <slot></slot>
    <div class="form-top" v-if="!slot.default">
      <div class="form-top--left" v-if="slot.left">
        <slot name="left"></slot>
      </div>
      <div class="form-top--right" v-if="slot.right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="form-bottom" v-if="slot.bottom">
      <slot name="bottom"></slot>
    </div>
  </el-form>
</template>

<script setup lang="ts">
const slot = useSlots();
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--left {
    flex: 1;
  }
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

// index.vue

<template>
  <Form ref="formRef" :model="formData" label-width="80px">
    <template #left>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱" />
      </el-form-item>

      <el-form-item label="排序" prop="sort" placeholder="请输入排序号">
        <el-input-number v-model="formData.sort" :min="1" />
      </el-form-item>
    </template>
    <template #right>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注"
          maxlength="100"
          show-word-limit
          resize="none"
        />
      </el-form-item>
      <el-form-item label="说明" prop="config">
        <el-input
          v-model="formData.config"
          placeholder="请输入说明"
          type="textarea"
          show-word-limit
          maxlength="200"
          :autosize="{ minRows: 6, maxRows: 6 }"
        />
      </el-form-item>
    </template>
    <template #bottom>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button type="warning" @click="handleClose">取 消</el-button>
      </el-form-item>
    </template>
  </Form>
</template>

<script setup lang="ts">
import Form from "./Form.vue";
const formRef = ref();

//添加人员表单
const formData = reactive({
  remark: "",
  age: 10,
  config: "",
  email: "",
  sex: "",
  id: null,
  name: "",
  sort: 0,
});

const handleClose = () => {};
const handleSubmit = () => {};
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

依然不够通用，因为布局是固定的，如果想要其他布局，要么修改Form.vue，要么重新封装

5 继续拓展

抽出layout，形成Layout.vue组件，拿出祖传技艺slot传递
// Layout.vue

<template>
  <div>
    <slot></slot>
    <div class="form-top" v-if="!slot.default">
      <div class="form-top--left" v-if="slot.left">
        <slot name="left"></slot>
      </div>
      <div class="form-top--right" v-if="slot.right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="form-bottom" v-if="slot.bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const slot = useSlots();
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--left {
    flex: 1;
  }
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

// Form.vue

<template>
  <el-form>
    <Layout>
      <template v-for="item in Object.keys(slot)" :key="item" #[item]>
        <slot :name="item"></slot>
      </template>
    </Layout>
  </el-form>
</template>

<script setup lang="ts">
import Layout from "./Layout.vue";
const slot = useSlots();
</script>
<style lang="scss" scoped></style>

// index.vue

<template>
  <Form ref="formRef" :model="formData" label-width="80px">
    <template #left>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱" />
      </el-form-item>

      <el-form-item label="排序" prop="sort" placeholder="请输入排序号">
        <el-input-number v-model="formData.sort" :min="1" />
      </el-form-item>
    </template>
    <template #right>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注"
          maxlength="100"
          show-word-limit
          resize="none"
        />
      </el-form-item>
      <el-form-item label="说明" prop="config">
        <el-input
          v-model="formData.config"
          placeholder="请输入说明"
          type="textarea"
          show-word-limit
          maxlength="200"
          :autosize="{ minRows: 6, maxRows: 6 }"
        />
      </el-form-item>
    </template>
    <template #bottom>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button type="warning" @click="handleClose">取 消</el-button>
      </el-form-item>
    </template>
  </Form>
</template>

<script setup lang="ts">
import Form from "./Form.vue";
const formRef = ref();

//添加人员表单
const formData = reactive({
  remark: "",
  age: 10,
  config: "",
  email: "",
  sex: "",
  id: null,
  name: "",
  sort: 0,
});

const handleClose = () => {};
const handleSubmit = () => {};
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

6 总结

  1. 布局和数据分离

  2. 灵活扩展layout

    2.1 可以建立多个layout文件，批量引入（或动态引入）Form.vue中 ，Form.vue中利用动态组件component加载各个layout文件

    2.2 可以建立多个layout文件，批量引入（或动态引入）LayoutIndex.vue文件中，LayoutIndex.vue文件利用动态组件component加载各个layout文件，然后Form.vue中只渲染LayoutIndex，同时通过传参决定渲染那个layout

  3. 新增layout时，只需要新增文件（所有layout文件已经被批量引入<或动态引入>），符合“开闭”原则

tip:

批量引入(vite)：import.meta.glob(‘./layout/**/*.vue’);

动态引入：defineAsyncComponent(() => import(./components/${layoutName}.vue));

无心使然云中漫步
关注
专栏目录
element组件---Form
weixin_45343878的博客
08-07 1064
Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框...
循环添加el-form表单，并加校验； 循环a-form表单
qq_42401946的博客
12-09 2386
<template> <div> <el-form :model="formData" :inline="true" ref="formData" label-width="65px" size="medium" > <el-row v-for="(item, index) in formData.loopFormList" :key="ite
在vue项目里，Element-Ui中el-form 实现一行两个表单效果
weixin_47390575的博客
03-03 1万+
在vue项目里，Element-Ui中el-form 实现一行两个表单效果
基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
基于element-ui 的form表单实现的一个高拓展性的表格布局组件，能够用于日常使用表单的布局实现。
Element-06.案例
最新发布
程小白的博客
08-19 729
data () {return {name:"",gender:"",},methods: {alert("开始查询数据~")},alert("当前页面条数为:" + val)},alert("当前页为：" + val)
element-ui 动态表单实现一行两列
m0_67273584的博客
08-11 3211
参考element-ui的文档,再用el-row与el-col相结合实现动态表单一行两列功能
Element Form表单布局（一行多列）
热门推荐
我的博客
05-27 2万+
ElementUI的页面布局，跟bootstrap一样，是24格栅栏形式的。因此，可以通过row和col组件，以及col组件的span属性，完成Form的布局。 <template> <div> <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini"> <e
element之表单el-form布局
weixin_36352085的博客
04-21 8760
element表单el-form布局 最近表单用的比较多，简单总结一下 行内表单 普通表单 自定义表单 以上两个都是element官网的例子，但并不足以满足业务需求。例如下图： element官方文档里并没有这种布局，那么直接上代码 <el-form label-width="150px"> <el-row align="middle" :gutter="10"> <el-col :span="10"> <el-form-item pro
vue element-ui 表单纵排改为两列排放
souwer的博客
09-06 4384
vue element-ui 表单纵排改为两列排放
vue+element创建动态的form表单及动态生成表格的行和列
10-16
在本文中，作者详细讲解了如何使用Vue.js框架配合Element UI库来创建动态表单以及动态生成表格的行和列。本文基于实例代码，从实际操作的角度出发，介绍了技术实现的过程和方法，具有很高的参考价值。 首先，我们...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
el-table是Element-UI中的表格组件，它可以展示多行多列的数据。在动态表单验证场景中，el-table常用于展示和编辑表单数据。通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行...
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2. 导入 import elformdesign from 'el-form-design' # 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入 Vue.use(ElementUI); Vue.use(elformdesign); # 3 使用 # 直接在页面中 使用 标签 即可展示出 表单编辑页面 示列代码 (表单设计页面) <di
Element-UI组件之表单Form
TwentyOne__的博客
07-03 5496
Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框 基础用法 &...
ElementUI的el-form怎样格式化布局
BADAO_LIUMANG_QIZHI的博客
07-30 3507
场景 如果使用el-form默认的布局代码如下： <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocom...
一、Element-Plus 表单
weixin_67530155的博客
06-11 440
学习笔记，关于element-plus中的表单
Vue ElementPlus Form、Form-item 表单
小楼一夜听春雨，深巷明朝卖杏花
03-31 3923
每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，组件升级采用了 flex 布局，以替代旧版本的 float 布局。包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。属性传入约定的验证规则，并将 Form-Item 的。Form 组件提供了表单验证的功能，只需要通过。
vue的elementUI分两列
userzou的博客
06-03 4736
<el-row> <el-col :span="12"><div class="grid-content"></div></el-col> <el-col :span="12"><div class="grid-content"></div></el-col> </el-row>
vue elementUI实现双（多）列表格，内容均自定义
是日前端
02-07 7419
需求类似这样的： 使用普通table实现，样式需要自己设置： <table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &
elementUI 页面布局
BIG_PEI的博客
12-30 1610
<div id="rrapp" v-cloak> <el-row :gutter="20"> <el-col :span="5"> <div style="atsc-nav-left: #div2 #div1;" v-for=""> <h3 style="font-weight: bold;">名片分配情况</h3> <div style="margin-t
element-plus el-form
09-15
Element Plus 是一套基于 Vue.js 的组件库，而 el-form 是 Element Plus 中的一个表单组件。el-form 提供了一套灵活且强大的表单验证机制，可以快速地构建各种类型的表单。它支持自定义验证规则、表单布局配置、表单项的增删改查等功能，同时也提供了丰富的表单项类型（如输入框、复选框、下拉框等）以及预设的表单布局（如行内表单、网格布局等）。通过结合 Element Plus 的其他组件，el-form 可以在 Vue.js 项目中轻松地创建出美观且交互友好的表单页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值