表单动态操作数据交互

最新推荐文章于 2023-08-25 16:00:37 发布
最新推荐文章于 2023-08-25 16:00:37 发布
阅读量411 收藏 5
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhrdlp/article/details/108478522
版权

使用 Vue和 BootStrap 实现下面的功能:
在这里插入图片描述
默认情况下:

  1. 姓名和学号框全为空的时候,提交按钮不能点击
  2. 姓名和学号框全有一项不为空的时候,重置按钮才可以点击
  3. 表格中默认显示暂无数据,添加数据之后暂无数据隐藏
  4. 点击删除按钮,弹出弹框
  5. 点击弹框中的删除按钮后才会真正删除数据

先搭建一个基本的页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作数据</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .input-message, .show-messge {
            margin: 10px 50px;
        }

        .show-messge {
            margin-top : 30px;
        }

        #title {
            font-size : 24px;
            text-align: center;
            color : #58a;
            margin-bottom: 10px;
        }

        #tip {
            text-align: center;
            font-size: 20px;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="input-message">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input v-model = 'name' type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">学号</label>
                <input v-model = 'number' type="Number" class="form-control" id="exampleInputPassword1" placeholder="请输入学号">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 是否住校
                </label>
            </div>
            <input type="button" class="btn btn-primary"  value="提交" >
            <input type="button" class="btn btn-danger" value = '重置'>
        </form>
    </div>
    <div class="show-messge">
        <div id="title">学员信息表</div>
        <table class="table table-bordered ">
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>学号</td>
                <td>是否住校</td>
                <td >操作</td>
            </tr>
            <tr id="tip">
                <td colspan = '5'>暂无数据...</td>
             <tr>
<table>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    确定删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" @click = 'del'>删除</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

在这里插入图片描述

  1. 使用v-model实现数据的双向绑定,姓名框,学号框和是否住校中的内容要添加到下面的表格中,所以需要双向绑定.
 <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input v-model = 'name' type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">学号</label>
                <input v-model = 'number' type="Number" class="form-control" id="exampleInputPassword1" placeholder="请输入学号">
            </div>
              <div class="checkbox">
                <label>
                    <input type="checkbox" v-model = 'isChecked'> 是否住校
                </label>
            </div>

//在data中初始化两个变量,用来存储姓名和学号
data : {
            messageList : [],
            name : '',
            number : '',
            isChecked : false,
        },
  1. 我们需要将这些数据渲染到页面中,所以把这些数据存在一个数组中,循环这个数据来渲染数据.
  • 点击提交按钮的时候就要向数组中push新的信息,所以还要给提交按钮绑定一个add函数.
  • 点击重置按钮的时候,输入框中的内容清空

<tr v-for = '(item,index) in messageList' :key = 'index'>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.number}}</td>
                <td>{{item.isChecked}}</td>
                <td><input type="button" class="btn btn-danger" value = '删除'  data-toggle="modal" data-target="#exampleModal"></td>
            </tr>
  //提交按钮绑定事件
  <input type="button" class="btn btn-primary"  value="提交" :disabled = '!name || !number' @click = 'add'>
  //重置按钮绑定事件
  <input type="button" class="btn btn-danger" value = '重置' :disabled = '!name && !number' @click = 'reset'>

//methods
//添加数据
 add(){
        this.messageList.push({name : this.name,number : this.number,isChecked : this.isChecked})
     },
//重置
 reset() {
      this.name = ' ';
      this.number = ' ';
 },
  1. 当我们添加数据之后暂无数据...这一行需要隐藏
  • 首先想到的是通过v-show来控制显示与隐藏
  • v-show的判断条件是什么呢?
    • 当我们添加数据之后,数据messageList的长度就不为0
    • 所以数组长度为0 ,显示
    • 数组长度不为0 ,隐藏
//长度为0显示,所以需要取一次反
<tr id="tip" v-show = '!messageList.length'>
    <td colspan = '5'>暂无数据...</td>
 </tr>
  1. 但是现在还有一个问题是,我们添加的是否住校是一个布尔值,而不是我们想要的住校或者不住校,这个时候我们就需要用到filters
  • 选中的时候渲染住校
  • 不选中的时候渲染不住校
 <td>{{item.isChecked | foo}}</td>

//filters
		filters : {
            foo : function(value) {
                if(value) {
                    return '住校';
                }else {
                    return '不住校'
                }
            }
      	 }
  1. 删除功能的实现

  • 点击表格中的删除并不是真正的删除,点击这个删除只会弹出弹框

  • 点击弹框中的删除才是真正的删除数据

  • 但是我们表格中的数据就没用了吗???当然不可能,

  • 想想我们点击弹框中的删除的时候,怎么知道删除数据呢,我们不知道下标是多少啊

  • 这个时候就需要用到表格中的删除按钮了,点击表格中的删除按钮的时候就要保存当前项的下标

    • 在data中初始化一个index,默认为0
    • 点击表格中的删除按钮时修改index的值为当前点击项的下标

  • 点击弹窗中的删除按钮时利用splice删除选中的项

//表格中的删除按钮
 <td><input type="button" class="btn btn-danger" value = '删除' @click = 'saveIndex(index)' data-toggle="modal" data-target="#exampleModal"></td>
//弹窗中的删除按钮
 <button type="button" class="btn btn-danger" @click = 'del'>删除</button>

//在data中初始化index,默认值为1
data: {
	 index : 1,
}

			//表格中删除按钮的事件
            saveIndex(index) {
            //保存下标
                this.index = index;
              },
			// 弹窗中的按钮
            del() {
            	//删除
                this.messageList.splice(this.index,1);
            }
  1. 按钮的可点击
  • 姓名和学号框全为空的时候,提交按钮不能点击
  • 姓名和学号框全有一项不为空的时候,重置按钮才可以点击
            <input type="button" class="btn btn-primary"  value="提交" :disabled = '!name || !number' @click = 'add'>
            <input type="button" class="btn btn-danger" value = '重置' :disabled = '!name && !number' @click = 'reset'>

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作数据</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .input-message, .show-messge {
            margin: 10px 50px;
        }

        .show-messge {
            margin-top : 30px;
        }

        #title {
            font-size : 24px;
            text-align: center;
            color : #58a;
            margin-bottom: 10px;
        }

        #tip {
            text-align: center;
            font-size: 20px;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="input-message">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input v-model = 'name' type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">学号</label>
                <input v-model = 'number' type="Number" class="form-control" id="exampleInputPassword1" placeholder="请输入学号">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" v-model = 'isChecked'> 是否住校
                </label>
            </div>
            <input type="button" class="btn btn-primary"  value="提交" :disabled = '!name || !number' @click = 'add'>
            <input type="button" class="btn btn-danger" value = '重置' :disabled = '!name && !number' @click = 'reset'>
        </form>
    </div>
    <div class="show-messge">
        <div id="title">学员信息表</div>
        <table class="table table-bordered ">
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>学号</td>
                <td>是否住校</td>
                <td >操作</td>
            </tr>
            <tr id="tip" v-show = '!messageList.length'>
                <td colspan = '5'>暂无数据...</td>

            </tr>
            <tr v-for = '(item,index) in messageList' :key = 'index'>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.number}}</td>
                <td>{{item.isChecked | foo}}</td>
                <td><input type="button" class="btn btn-danger" value = '删除' @click = 'saveIndex(index)' data-toggle="modal" data-target="#exampleModal"></td>
            </tr>

        </table>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    确定删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" @click = 'del'>删除</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const app = new Vue({
        el : '#app',
        data : {
            messageList : [],
            name : '',
            number : '',
            isChecked : false,
            index : 1,
        },
        methods : {
            reset() {
                this.name = ' ';
                this.number = ' ';
            },
            add() {
                this.messageList.push({name : this.name,number : this.number,isChecked : this.isChecked})
            },
            saveIndex(index) {
                this.index = index;
                console.log(this.index);
            },
            del() {
                this.messageList.splice(this.index,1);
            }

        },
        filters : {
            foo : function(value) {
                if(value) {
                    return '住校';
                }else {
                    return '不住校'
                }
            }
       }
    })
</script>
</body>
</html>
lhrdlp
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
动态表单 mysql_【mysql】动态表单应该如何设计数据库？
weixin_30338049的博客
02-05 4775
需求是这样的在后台管理界面录入表单信息，规定有哪些表单 (可以增删)在前端显示哪些表单的可以填写最后把填写的表单(产生的真实数据)存入数据库最后填入的数据需要能够方便查询，排序，过滤的数据我在网上找了挺多资料都不太符合我的需求。有没有设计大神提供一下设计的思路！！！回答1、先定义一张控件表，如单行文本，多行文本，单选，多选，时间等2、再定义一张配置表，用来定义一个Form有哪些字段，以及字段名字(...
vue表单数据交互提交演示教程
10-16
在Vue.js框架中，表单数据的交互与提交是日常开发中的常见操作。本文将通过一个简单的示例来讲解如何在Vue中实现这一功能。首先，我们先了解一下Vue中的数据绑定和事件处理。 1. **数据绑定**： 在Vue中，我们可以...
JAVA动态表单设计，自定义表单，自定义数据
04-12
JAVA动态表单设计，自定义表单，自定义数据，在线设计，数据库存储
三阶段--day07--前端VUE.js+Axios+后端MP+SSM--实现前端页面表单操作数据库
weixin_58580280的博客
07-30 713
去q 委屈二群无 为请求二
bootstrap-动态表单
gu_ywei的博客
06-02 3822
bootstrap的动态表单
显示年龄案例 交互效果最简单的程序例子01
chenggong9527的博客
05-28 307
程序内部处理：至于内部处理的部分， 无非就是输入文字内容，数字内容，字母。这些可以根据自己的需求，需要去修改。修改为自己需要的内容。 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="v...
vue.js前后端数据交互之提交数据操作详解
10-18
总结而言，Vue.js前后端数据交互之提交数据操作包括创建表单界面、进行数据绑定和表单验证，以及使用HTTP客户端发送数据到后端。在整个过程中，开发人员需要关注数据绑定的一致性、验证规则的准确性和请求的异常处理...
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
10-17
主要介绍了微信小程序学习笔记之表单提交与PHP后台数据交互处理,结合实例形式详细分析了微信小程序前台数据form表单提交及后台使用php进行处理相关操作技巧,并配以图文形式详细说明,需要的朋友可以参考下
基于bootstrap的动态表单的实现
11-21
动态表单的简单实现，可以利用拖拽的形式，设计表单，可以拖拽的控件包括input框、select框、复选框、单选框等等
bootstrap-table实现动态表格
陌子曦的专栏
02-03 509
动态表格
BootStrap 动态表单效果
10-19
主要介绍了BootStrap 动态表单效果,实现代码分为js部分和html部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
动态加载bootstrap表格数据
11-29
对bootstrap表格的自定义demo，js动态加载表格数据
Bootstrap表单简单实现代码
01-19
本文实例为大家分享了Bootstrap表单的具体实现代码，供大家参考，具体内容如下 <html> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content=IE-edge> <meta name=viewport content=width=device-width,initial-scale=1> <title>Bootstrap 101 Template</title> <link href=http://cdn.bootcss.com/bootstrap/3.3.1/css/boots
Bootstrap Blazor 实战动态表单组件
最新发布
alex_zoucn的博客
08-25 4425
新建工程b18ValidateForm,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中。运行之, 并没有达到预期. 无论怎么改变[是/否]检查框,姓名和地址栏都是可写的,因为渲染机制问题,所以要改一下思路.正确方法是把逻辑包成一个组件,组件里面就可以局部刷新达到预期效果。添加 Javascript 引用到。Index.razor代码改为。
基于bootstrap的前端动态js表单组件
weixin_30346033的博客
07-31 348
在前端的业务中不能避免要使用动态的表单，必须在表单的很多项目是基于配置，根据动态的配置，再前端进行表单生成 基础组件类： 1 class Component { 2 constructor(type) { 3 this.type = type; 4 this.label_tpl = '<label class="...
Bootstrap 表单
m0_67908744的博客
04-30 397
Bootstrap表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加role="form"。 把标签和控件放在一个带有 ..
bootstrap添加表单
JavaHuangzuo的博客
11-05 484
bootstrap
bootstrap里的表格动态加载
荣默默的博客
04-25 1150
创建一个表格： data-toggle="table" > $(function(){ $('#tab').bootstrapTable('destroy'); $("#tab").bootstrapTable({ method:"get", url:"aa.json", striped:true, pagination:true, p
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值