首页 / VUE / vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2679字，纯文字阅读大概需要4分钟。

内容图文

如果是已经有点经验的同学，可以直接看下面这个函数，应该就能明白怎么回事，新手可以看下面的详细教程。

函数：

handleEdit: function (index, row) {
  this.editFormVisible = true;
  this.editForm = Object.assign({}, row);
}

详细教程：

1.首先，做一个表格，用于显示信息；代码如下：

<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
  <el-table-column type="selection" width="55">
  </el-table-column>
  <el-table-column type="index" width="60">
  </el-table-column>
  <el-table-column prop="name" label="商品名称" width="120" sortable>
  </el-table-column>
  <el-table-column prop="price" label="价格" width="100" sortable>
  </el-table-column>
  <el-table-column prop="reserve" label="商品库存" min-width="120" sortable>
  </el-table-column>
  <el-table-column prop="desc" label="商品描述" min-width="180" sortable>
  </el-table-column>
  <el-table-column label="操作" width="150">
  <template scope="scope">
   <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑     </el-button>
  </template>
  </el-table-column>
</el-table>

这里表格绑定的数据data是自己获取到的，可以定义一个名为users的数组，然后从后端获取数据直接赋值就行，这里就不在赘述。或者先用mockjs随机生成数据测试更方便。

2.写一个弹出的编辑页面。

<!--编辑界面-->
 <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
  <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  <el-form-item label="商品名称" prop="name">
   <el-input v-model="editForm.name" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item label="商品价格">
   <el-input-number v-model="editForm.price"></el-input-number>
  </el-form-item>
  <el-form-item label="商品库存">
   <el-input-number v-model="editForm.reserve"></el-input-number>
  </el-form-item>
  <el-form-item label="商品描述">
   <el-input type="textarea" v-model="editForm.desc"></el-input>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
  <el-button @click.native="editFormVisible = false">取消</el-button>
  <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交   </el-button>
  </div>
 </el-dialog>

弹出页面的表单名为editForm，那么下面定义表单数据editForm；

//编辑界面数据
  editForm: {
   id: 0,
   name: '',
   price: 0,
   desc: '',
   reserve:'',
  },

3.可以看到，上面第一个表格的编辑按钮上面绑定了click函数，名为handleEdit，当点击编辑按钮时调用函数，我们想在编辑页面中显示表格某一行的详细信息，那么就要在此函数中加入表单数据绑定的函数，代码如下：

//显示编辑界面
  handleEdit: function (index, row) {
  this.editFormVisible = true;
  this.editForm = Object.assign({}, row);
  }

暂时能想到的就这么多，如果写的有什么问题，欢迎指正！！！或者有什么问题也可以留言我们共同进步哦！！希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例全部内容，希望文章能够帮你解决vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/334371.html

来源：【匿名】

【上一篇】Vue中使用方法、计算属性或观察者的方法实例详解【下一篇】php怎么返回数据给vue

更多 ►

【vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例】教程文章相关的互联网学习教程文章

第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定【代码】

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<title>Document</title> 8 9<script src=" https://cdn.jsdelivr.net/npm/vue"></script>10</head>1112<body>13<div id="app">14<h4>{{msg}}</h4>1516<!-- <input type="t...

vue 表单提交【代码】

在vue中，有一个$el 属性。该属性在created 的阶段还是不可用的，直到 mounted 之后，我们才能获取到 $el 属性。$el是vue实例中 el 属性标识的dom元素。 ————————————————————————————————————vue表单提交，有时候需要提交文件数据，这时候需要用到 formDate，代码如下 1let formData = new FormData($(this.$el).find(".import-form")[0]); // .import-form 是需要提交的表单2 ...

vue学习笔记三：常见的表单绑定【代码】

<template><div id="app"><input type="checkbox" id="checked" v-model="checked"/><label for="checked">{{checked}}</label><br /><input type="checkbox" id="jack" value="jack" v-model="names" /><label for="jack">jack</label><input type="checkbox" id="sim" value="sim" v-model="names" /><label for="sim">sim</label><input type="checkbox" id="tom" value="tom" v-model="names" /><label for="tom">tom</label><...

vue+element ui this.$refs.xxx.resetFields() 重置表单数据不生效问题【代码】

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可<el-form :model="addUserForm" :rules="rules" ref="addUserFormRef" label-width="150px"><el-form-item label="用户名称：" prop="userName"><el-input v-model="addUserForm.userName" style="width: 400px"></el-input></el-form-item>这里prop设置的是字段名要和v-model绑定的一致，否则重置表...

详解vue如何使用rules对表单字段进行校验【图】

1、在代码中，添加属性：:rule?123456789101112131415161718<Formref="loginForm":model="form":rules="rules"@keydown.enter.native="handleSubmit"class="form-con"> <FormItemprop="phone"> <Inputv-model="form.phone"prefix="md-person"placeholder="请输入您的手机号"size="large"class="login-form-input":maxlength="11"></Input> </FormItem> <FormItemprop="password"> ...

vue view 表单验证正常逻辑【代码】

<template><Form ref="formInline" :model="formInline" :rules="ruleInline" inline><FormItem prop="user"><InputNumber :max="100" :min="0" step="1" v-model="formInline.user"></InputNumber></FormItem><FormItem prop="password"><InputNumber :max="100" :min="0" step="1" v-model="formInline.password"></InputNumber></FormItem><FormItem><Button type="primary" @click="handleSubmit(‘formInline‘)">登录</Butto...

基于vuedraggable的表单生成组件和基于paperjs的流程图组件【图】

前一阵子（em。。。这个前挺长了）做了一个表单生成组件和流程图组件。分别使用的是vuedraggable和paperjs。看了一些官方的介绍和源码，然后就直接上手了。1.vuedraggable　　比较简单，主要就是将数据和拖动及拖出和拖入事件绑定好就可以了。拖动的时候，会自动生成ghost，移动中换位动画也是动态的。效果图：　　此外做了预览、数据保存、校验。每个组件都可以自定义限制条件。关键逻辑是，左侧和中间是两个拖拽部分，右侧是form...

Vue12 -- 表单的数据收集【代码】

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><form action="" method="post" @submit.prevent="sub"><input type="text" name="" v-model="user"/><input type="password" name="" v-model="pwd"/><br />性别：<input type="radio" name="sex" value="男" v-model="sex">男<input type="radio" name="sex" value="女" v-model="sex">女<br />爱好：<input name="Fruit" type="ch...

javascript – 使用Vue.js在文本输入中按Enter键时阻止表单提交【代码】

我在我的应用程序中使用Vue.js并在表单中输入文本<div id="myVueForm"> <form><input type="text" v-on="keyup:addCategory | key 'enter'"><button type="submit">Submit Form</button> </form> </div>在我的Vue实例中,我有以下内容new Vue({el: '#myVueForm',methods: {addCategory: function(e){if(e) e.preventDefault();console.log("Added a new category, thanks!");}} });尽管有preventDefault(...

Vuefrom-validate表单验证代码分享

本文主要和大家介绍Vue from-validate 表单验证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。前言需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。那让我们自己来写一个吧！知识准备vue的自定义指令具体可以看官方手册，连接如下：https://vuejs.org/v2...

vue axios 表单提交上传图片的实例

项目中用的element 的框架，然后在项目有一个添加数据需求是图片可上传，也可不上传，然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> let file = e.target.files[0]; let param = new FormData(); /...

vue+vue-validator 表单验证功能的实现代码

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址：https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能，具体代码如下所示： 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-validate:zip="[required]"...

vue+axios表单中上传图片步骤详解

这次给大家带来vue+axios表单中上传图片步骤详解，vue+axios表单中上传图片的注意事项有哪些，下面就是实战案例，一起来看一下。然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>let file = e.target.files[0...

Vue.js实现可配置登录表单步骤详解【图】

这次给大家带来Vue.js实现可配置登录表单步骤详解，Vue.js实现可配置登录表单的注意事项有哪些，下面就是实战案例，一起来看一下。业务场景在之前，项目只支持手机号+密码登录，前端是直接把表单写死的，后来有客户希望能支持验证码登录，有的客户还希望能有手机号+验证码+密码的登录方式…所以登录方式的灵活性需要可配置的表单支持，于是我把登录组件做了拆分。以表单元素为粒度，分离出了手机号、密码、短信验证码这几个组件，...

vue+element创建动态的form表单及动态生成表格的行和列

动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.最后我使用了笨方法,针对各个表单写好通用的组件，然后根据type用v-if来渲染对应的表单,数据，事件什么的都可以动态的传进去,比较好用<el-form size="mini" class="lj-form lj-form-s1"><div v-for="(item,i) in table.customerList" :key="i"><el-form-item:label="item.field_title + : "v-if="i...

首页 / VUE / vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

内容导读

内容图文

内容总结

内容备注

内容手机端

【vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例】教程文章相关的互联网学习教程文章

VUEJS - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程