Element-05.组件-Form表单

于 2024-08-17 10:51:37 发布
阅读量457 收藏 1
点赞数 6
分类专栏： Javaweb 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45055856/article/details/141276631
版权

 一.Form表单组件

Form表单组件可以定义在Dialog对话框组件中

与Dialog对话框组件中的属性dialogTableVisible相似，dialogFormVisible的默认值也为false，这也说明了Dialog对话框中的Form表单默认是不显示的，只有当绑定的click事件发生后才会将false改为true，从而显示。

参数：visible.sync    说明：是否显示Dialog，支持 .sync 修饰符    类型：boolean    默认值：false

<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> 
        <!-- 参数：visible.sync    说明：是否显示Dialog，支持 .sync 修饰符    类型：boolean    默认值：false -->
        <el-dialog title="表单" :visible.sync="dialogFormVisible">

在表单提交时触发submit方法，因此要在vue对象中声明submit方法。用于提交数据，而submit所提交的表单对象form还未定义，因此要在vue对象的数据模型中定义form对象。通过v-model将表单元素上创建双向数据绑定，将数据模型中的数据与视图中的数据进行绑定。

<el-select v-model="form.region" placeholder="请选择活动区域">  

export default {
    data() {
        return {
            form: {   /*  一旦通过v-bind或者v-model绑定的变量，必须在数据模型中声明   在这里form是一个对象 */
                name: '',
                region: '',
                date1: '',
                date2: ''
            },

submit方法所提交的是form对象，使用alert在浏览器中弹出会显示[object Object]而无法显示出所提交的内容，因此要使用将JSON格式的对象转换成string字符串的方法，即使用JSON.stringify(JSON格式对象)来将JSON格式的对象转换为字符串。

 methods: {
        onSubmit:function() {
            alert(JSON.stringify(this.form))  // this代表当前vue对象，但是是JS对象，因此alert中只显示Object，因此要使用JSON的stringify(jsObject)转为字符串
        }
    }

this代表当前vue对象，通过this拿到当前vue对象的表单对象，因此为this.form。 

二.完整代码

<template>
    <div> <!-- div是根标签，一个<template>标签中只能有一个根标签，也即只能有一个<template>标签 -->
        <!-- Button按钮组件 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <br>

        <!-- Table表格组件 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>

        <!-- Pagination分页组件 -->
        <!-- background	是否为分页按钮添加背景色	boolean     有background即添加，没有则不添加 -->
        <!-- layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot -->
        <!-- sizes 控制每页能够显示多少条 -->
        <!-- prev   显示前一页箭头 -->
        <!-- pager  显示页码    -->
        <!-- next   显示后一页箭头      -->
        <!-- jumper     显示跳转到某一页     -->
        <!-- total      显示总条数       -->
        <!-- ->     布局中所有位于 -> 后面的元素都会被移到分页组件的右侧  -->
        <!-- slot   自定义组件   -->
        <!-- 可以更改layout组件布局顺序来控制展示顺序 -->
        <el-pagination background layout="sizes, prev, pager, next, jumper, total, slot" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
            <!-- :total="1000", 写全 v-bind:total="1000", ":"语法是 v-bind: 的简写，用于绑定一个动态的值到属性 -->
            <!-- size-change	pageSize 改变时会触发	回调参数：每页条数 -->
            <!-- current-change	currentPage 改变时会触发	回调参数：当前页 -->
            <!-- @:v-on的简写 v-on为el-button标签绑定了一个事件click-->
        </el-pagination>

        <br>
        <br>

        <!-- Dialog对话框组件 -->
        <!-- @click="dialogTableVisible = true" 当点击操作触发时，dialogTableVisible为true，显示对话框中的内容 -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> 
        <!-- 参数：visible.sync    说明：是否显示Dialog，支持 .sync 修饰符    类型：boolean    默认值：false -->
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">   
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>

        <br>

        <!-- Dialog对话框组件-Form表单组件 -->
        <!-- @click="dialogFormVisible = true" 当点击操作触发时，dialogFormVisible为true，显示对话框中的内容 -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> 
        <!-- 参数：visible.sync    说明：是否显示Dialog，支持 .sync 修饰符    类型：boolean    默认值：false -->
        <el-dialog title="表单" :visible.sync="dialogFormVisible">   
            <el-form ref="form" :model="form" label-width="80px">   <!-- :=v-bind 为该标签绑定一个变量名为model，是一个form对象 -->
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>   <!-- 一旦通过v-bind或者v-model绑定的变量，必须在数据模型中声明 -->
                </el-form-item>
                <el-form-item label="活动区域">
                    <!-- v-model   在表单元素上创建双向数据绑定，将数据模型中的数据与视图中的数据进行绑定 -->
                    <el-select v-model="form.region" placeholder="请选择活动区域">  
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>  <!-- 当点击提交按钮时触发onSubmit方法 -->
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {   /*  一旦通过v-bind或者v-model绑定的变量，必须在数据模型中声明   在这里form是一个对象 */
                name: '',
                region: '',
                date1: '',
                date2: ''
            },
            gridData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogTableVisible: false,  // 定义一个表格属性，表示是否显示表格
            dialogFormVisible: false,   // 定义一个表单属性，表示是否显示表单
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄",
                },
            ],
        };
    },
    methods: {
        handleSizeChange: function (val) {
            alert("当前页面条数为:" + val)
        },
        handleCurrentChange: function (val) {
            alert("当前页为：" + val)
        },
        onSubmit:function() {
            alert(JSON.stringify(this.form))  // this代表当前vue对象，但是是JS对象，因此alert中只显示Object，因此要使用JSON的stringify(jsObject)转为字符串
        }
    }
};
</script>

<style></style>

天上掉下来个程小白
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
from表单el-form-item绑定值为数组的prop写法
qq_41008008的博客
11-14 2803
prop绑定，表单校验
el-form中表单赋值无法响应式
MISS_zhang_0110的博客
11-26 1583
elementui中表单赋值无法响应式一、背景二、项目代码 一、背景 表单el-form-item中的v-model初始化复制，然后在页面输入框修改值时候，修改不了 二、项目代码 <el-form-item label="企业编号："> <el-input placeholder="请输入企业编号" v-model="productForm.spCode" ></el-input&g
设置radio单选框默认值
最新发布
学习学习再学习
06-28 306
【代码】设置radio单选框默认值。
双重循环el-form-item
weixin_44707050的博客
11-09 565
<div> <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item v-for="(item,index) in formData.gradeList" :key="index"> <el-form-item label="年级名字" > <el-in...
＜Element-ui el-form＞动态添加表单项-el-select
weixin_42622780的博客
12-08 4504
1.场景描述，根据下拉选择框，选定某个值然后动态添加一个下拉框2 目录 1.场景描述，根据下拉选择框，选定某个值然后动态添加一个下拉框2 <template> <div> <template> <el-form ref="form" :model="form" label-width="80px" class="demo-dynamic"> <el-form-item label="活动名称"&...
el table里的label赋值为变量
Belle_Chou的博客
07-27 1万+
&lt;el-dialog title="修改信息" :visible.sync="dialogFormVisible" :data="editRow"&gt; &lt;el-form :label-position="labelPosition" label-width="80px" &gt; &lt;el-fo
element-ui.rar element-ui核心库压缩包
12-20
除了基础组件，Element UI 还提供了一些高级功能，如表单验证、动态表单生成、弹窗服务等。例如，使用 Element UI 的表单验证功能，你可以这样做： ```html <el-form :model="form" ref="form" label-width="100px...
element-ui.rar
07-09
Element UI 的组件涵盖了布局、表单、按钮、图标、表格、导航等多个方面，以下是一些主要组件的详细说明： 1. **布局（Layout）**：提供栅格系统，支持响应式设计，使开发者能够轻松创建灵活的页面布局。 2. **...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
ng-form-element-master.动态表单，VUE动态表单
11-05
动态表单，VUE动态表单。基于vue+element ui实现动态表单组件，通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示，动态表格弹窗式维护。致力打造开源最强vue动态表单组件，持续维护
ng-form-element-master.zip
05-28
动态表单，VUE动态表单。基于vue+element ui实现动态表单组件，通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示，动态表格弹窗式维护。致力打造开源最强vue动态表单组件，持续维护。
elementUI的表单resetFields()方法无法清空
weixin_44206947的博客
03-14 5505
首先需要注意几个问题： 1.我们需要为每个form-item加上prop属性，要不然无法清空（大部分的问题就是出在这） 2.resetFields()方法是重置表单，重置为初始值，而不是设置为空值 3.在resetFields()方法之前，如果修改了data里的表单默认值，那么重置以后就是你修改以后的值，而不是data里的值了 问题 1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，正常。 2、先编辑，后新增使用resetFields()表单数据竟然没有清空。 原因 1、当我们先新增再
el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
02-12 5396
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
element-ui 单选按钮赋值
兰颜的博客
08-30 1112
接上文，文章编辑功能，单选按钮绑定值的时候有些问题，不清楚的建议看一下上一篇文章：https://blog.csdn.net/qq_39704057/article/details/119993871?spm=1001.2014.3001.5501 想要达到的效果 但是不知道为什么，页面上一直没有渲染出来， 用的代码 <el-form-item label="文章重要性" class="block"> <el-radio v-model="form.article_.
单选框设置初始值
YKYZSYA的博客
07-23 821
<c:choose> <%--emp.sex是查到的初始值--%> <c:when test="${emp.sex=='男'}"> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </c:when>
element UI 单选框设置默认选中值
热门推荐
马优晨
10-12 2万+
如上图所示，需要给单选 加上默认值 代码如下 view <el-form-item label="可见" prop="locked" > <el-radio-group v-model="actionFormData.locked"> <el-radio :label="0">显示...
输入框input type=“text“（获取值、设置默认值）
zcc的博客
06-14 8500
&lt;input type="text" class="form-control" id="name" placeholder="任务名称"&gt;1.获取单选框的值$("#name").val();$("input[type='text']").val();1.设置默认值$("#name").val('任务1');3.根据获取
elementui el-dialog的一个小坑
lj872224的博客
03-13 9556
&lt;el-dialog title="编辑库存" :visible.sync="dialogFormVisible"&gt; &lt;div style="border-bottom:1px solid #E6E6E6;width:100%;margin-top:-20px;"&gt;&lt;/div&gt; ...
element-plus 父组件校验多子组件的form表单
06-13
如果你想在父组件中校验多个子组件的表单，可以采用以下步骤： 1. 在父组件中引入 `Form` 组件，并设置 `ref` 属性 ```vue <template> <div> <form ref="form"> <child-form-1></child-form-1> <child-form-2></child-form-2> <el-button @click="submitForm">提交</el-button> </form> </div> </template> <script> import ChildForm1 from './ChildForm1.vue'; import ChildForm2 from './ChildForm2.vue'; export default { components: { ChildForm1, ChildForm2, }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('校验成功'); } else { console.log('校验失败'); } }); }, }, }; </script> ``` 2. 在子组件中分别引入 `FormItem` 和 `el-form-item` 组件，并设置 `prop` 属性 ```vue <template> <div> <el-form-item label="姓名" :rules="nameRules"> <el-input v-model="name"></el-input> </el-form-item> <el-form-item label="年龄" :rules="ageRules"> <el-input v-model="age"></el-input> </el-form-item> </div> </template> <script> export default { data() { return { name: '', age: '', nameRules: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ], ageRules: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '请输入数字', trigger: 'blur' }, ], }; }, props: { prop: String, }, }; </script> ``` 3. 在父组件中使用 `$children` 获取所有子组件，并遍历执行表单校验 ```vue <template> <div> <form ref="form"> <child-form-1 ref="form1"></child-form-1> <child-form-2 ref="form2"></child-form-2> <el-button @click="submitForm">提交</el-button> </form> </div> </template> <script> import ChildForm1 from './ChildForm1.vue'; import ChildForm2 from './ChildForm2.vue'; export default { components: { ChildForm1, ChildForm2, }, methods: { submitForm() { let valid = true; this.$children.forEach(child => { if (child.$refs[child.prop]) { child.$refs[child.prop].validate(valid => { if (!valid) { valid = false; } }); } }); if (valid) { console.log('校验成功'); } else { console.log('校验失败'); } }, }, }; </script> ``` 在这个例子中，我们通过 `$children` 获取所有子组件，并使用 `child.$refs[child.prop]` 获取到子组件中的 `el-form-item`，然后执行 `validate` 方法进行校验。如果校验失败，将 `valid` 设置为 `false`，最终判断 `valid` 是否为 `true` 来判断所有表单校验是否成功。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值