Vue制作表单按钮编辑页

最新推荐文章于 2024-06-25 15:15:37 发布
最新推荐文章于 2024-06-25 15:15:37 发布
阅读量388 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5_mylove/article/details/121773035
版权
本文档详细介绍了如何利用Vue.js框架来创建一个功能完善的表单编辑页面，包括设置、交互及数据绑定等内容。
摘要由CSDN通过智能技术生成

在这里插入图片描述
vueFormSetting.html:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../../build/common/base.css?v=1116" rel="stylesheet">
    <script type="text/javascript" src="../../build/common/base.js"></script>
    <script type="text/javascript" src="../../build/common/vueEdit.js?v=1111"></script>
</head>

<body class="vs-bg-gray page-form-setting">
    <div v-if="loaded" id="ctrl">
        <ul class="vs-setting-buttons">
            <li>
                <button class="btn btn-primary fa-save" @click="save()">保存</button>
            </li>
            <li>
                <button class="btn btn-default" @click="cancel()">取消</button>
            </li>
        </ul>
        <div class="form-horizontal">
            <btn-edit :btn-type="'general'" :btn-list="generalList" @change-prop="changeProp"></btn-edit>
            <btn-edit :btn-type="'detail'" :btn-list="detailList" @change-prop="changeProp"></btn-edit>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
   
        el: "#ctrl",
        components: {
   
            'btn-edit': {
   
                props: {
   
                    btnList: {
   
                        type: Array,
                        default: () 
最低0.47元/天 解锁文章
航小码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue如何高效开发表单
weixin_47140375的博客
03-23 2282
哈喽哈喽，大家好。 今天和大家分享一下，在vue中，如果高效的开发表单。 首先我们来确定表单的功能，表单主要是用来收集用户数据的信息，然后提交后台。也就是需要在页面上提供一些列的输入框，用户完成输入后，通过提交按钮，触发表单验证，验证不通过则提示错误，验证通过则将收集的信息发送给后台，后台处理完成后，提示前端成功还是失败。按照业务功能来说，表单分为新建和编辑两种，其中数据验证，提交的逻辑都是一样的，只是编辑的场合，事先需要根据记录的ID加载待编辑的数据 来填充表单。然后 编辑的提交 通常 是增量修改，就
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
表单及按钮编辑
banlubin5830的博客
05-11 119
1.文本输入 　　文本框<inputtype="text"name=""id=""value=""/> 　　密码框<inputtype="password"name=""id=""value=""/> 　　文本域<textareaname=""id=""cols=""(字符多少)rows=""(几行高)></te...
Vue 可编辑表格：让数据编辑更舒适自如
最新发布
2401_83384536的博客
06-25 977
el-table>的属性配置基本都可以在中使用，所以只要会使用el-table[6]对于就可以立即使用。我尝试了【带斑马纹表格】、【带边框表格】、【带状态表格】、【固定表头】、【固定列】、【流体高度】等，其他的表格大家可以自行尝试哦！
vue页面获取以及编辑
Sunshinedada的博客
12-01 1112
vue页面获取以及编辑 html: <el-row :gutter="20"> <el-col class="task_left"> <el-col :span="4" class="task_list"> 连续签到 <div class="list_num">{{ signCycle }}</div> 天为一个周期 </el-col>
vue复用新增和编辑表单
程序员大柱
06-01 1434
将数据放到computed中，不能放到data中，如果放到data中则在表单中的input，select等的v-model属性是不能赋值的，如：v-model='form.type_id'，如果新增，那么form.type_id是没有内容的，会报错，cannt read property type_id of null，尝试实用lodash的_.get(form,'type_id',0)会报错，...
vue 表单数据修改了页面数据也会跟着改
qq_43427657的博客
06-24 1046
// 原先写法： this.editForm = row // 修改后的写法 this.editForm = JSON.parse(JSON.stringify(row))
基于vue+element的在线拖拽生成表单页面的可视化表单制作工具
11-04
总之，这个基于vue+element的在线拖拽生成表单页面的工具，通过提供直观的可视化编辑界面和强大的功能，极大地简化了Web表单开发过程，降低了技术门槛，使得开发者能够更加专注于业务逻辑和用户体验的提升。
vue+element实现表格新增、编辑、删除功能
10-16
在Vue.js框架中，结合Element UI库，我们可以轻松地实现表格的动态操作，如新增、编辑和删除。Element UI提供了一套美观且易用的组件，适用于开发Web应用的用户界面。以下是如何利用Vue和Element UI来实现这些功能的...
【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx
12-29
除了基础的编辑功能，`vxe-table`还提供了很多进阶特性，例如行级编辑（`row`模式）、自定义编辑模板、异步数据加载、表单验证等。根据项目需求，可以进一步探索这些功能以实现更复杂的表格场景。 总之，`vxe-table...
vue增加编辑页面案例
lgplrcode的博客
06-25 631
<template> <div class="app-container"> <div class="filter-container" style="padding-bottom: 20px"> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" @click.native="a
vue制作导航栏html,Vue实现导航栏菜单
weixin_29981095的博客
06-07 2417
本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称 您好，用户！v-bind:class="{checked: index == nowIndex}"v-on:click="setTab('menu',index,menus)">{{ menu.text }}菜单...
用Vue制作tab栏切换 简单高效
小伟的博客
04-09 1062
初学Vue ## 标题 用Vue制作tab栏切换 代码简直太简洁了 实现步骤如下： 1、实现静态UI效果 用传统的方式实现标签结构和样式 HTML结构 CSS样式 2、基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式，处理事件绑定和js控制逻辑 将提供的数据 写入data 中 把数据渲染到页面 给tab栏添加事件 完整代码结构： <!DOCTYPE html> <html lang="en"> <head> <meta cha
7.Vue的form表单中通过按钮将值传到另一页的思路
sinat_41124751的博客
07-30 3315
Vue小白笔记7——form表单中通过按钮将值传到另一页的思路
vue之表单处理（一）
weixin_52129860的博客
03-11 610
在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。知识点v-model 指令基础用法。
vue form表单数据提交与 router 按钮快速调用页面
serendipity____的博客
09-09 1252
vue快速实用攻略，vue+element-ui的form表单校验功能，router按钮跳转页面，问题的解决方法，解决方向。
vue做的导航栏，左右各有按钮，点击向左右滚动
az44yao的专栏
01-21 2498
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-we...
vue 中使用button等表单元素的注意点
zhouweixue_vivi的博客
11-20 9171
问题描述：在一个vue项目中使用了一个button绑定事件，第一次进入这个页面，点击该按钮会直接刷新页面，后面就不会了 分析：开始以为是事件回调的函数的影响，一步步断点，排查发现回调函数没有任何问题，走入了死胡同纠结一番，突然意识到可能是button默认事件的影响，经过测试果然是这样。 解决： 方式1：阻止button的默认事件,vue中可以在事件绑定是使用事件修饰符 保存vue常见修饰符
vue表格点击编辑按钮弹出表单的写法
09-06
在Vue中实现表格点击编辑按钮弹出表单的方法有多种，具体写法如下： 1. 使用Vue组件实现： 首先需要创建一个包含表格的Vue组件，在表格中添加一个编辑按钮。通过绑定点击事件，点击编辑按钮时触发方法。在该方法中，可以设置一个标志位来控制表单的显示与隐藏。当点击编辑按钮时，将标志位设为true，表单显示出来；当点击其他按钮或完成编辑时，将标志位设为false，表单隐藏起来。 2. 使用Vue指令实现： 在表格中的每一行添加一个编辑按钮，并使用v-on指令绑定点击事件。在点击事件的方法中，可以通过修改data中的某个属性来控制表单的显示与隐藏。使用v-if指令来判断是否显示表单，当编辑按钮被点击时，将数据属性设为true，表单显示出来；当点击其他按钮或完成编辑时，将数据属性设为false，表单隐藏起来。 无论是使用Vue组件还是指令，最终的效果都是点击编辑按钮时，弹出表单进行编辑操作，其他时候表单隐藏起来。具体的实现可以根据具体的需求和项目结构选取不同的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值