使用element-ui +Vue 解决 table 里包含表单验证的问题


Posted in Javascript onJuly 17, 2020

应用场景:

在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示:

这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。

:prop="'tableData.' + scope.$index + '.字段名'"

方法一:

<template>
 <div class="app-container"> 
  <el-form :model="fromData" ref="from">
  <el-table :data="fromData.domains">
   <el-table-column label="姓名">
   <template slot-scope="scope">
    <el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromaDataRules.name">
    <el-input v-model="scope.row.name"></el-input>
    </el-form-item>
   </template>
   </el-table-column>
   <el-table-column label="地址">
   <template slot-scope="scope">
    <el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromaDataRules.desc">
    <el-input v-model="scope.row.desc"></el-input>
    </el-form-item>
   </template>
   </el-table-column>
  </el-table>
  </el-form>
  <el-button type="warning" @click="submit('from')">submit</el-button>
 
 </div>
</template> 
<script>
 export default {
 data() {
  return { 
  fromData:{
   domains:undefined
  },
  fromaDataRules:{
   name:[{ required: true, message: '请输入', trigger: 'blur' }],
   desc:[ { required: true, message: '请填写', trigger: 'blur' }]
  },
  domains:[],
  }
 },
 mounted(){
  this.initDomains()
 },
 methods:{
  initDomains(){
  this.domains=[
   {
   name: "小红",
   desc: "11123"
   },
   {
    name: "小红",
   desc: "11123"
   }
  ]
  },
  init(){ 
  this.$set(this.fromData,'domains',this.domains)
  },
  submit(formName){
  this.$refs[formName].validate((valid) => {
   if (valid) {
   alert('submit!');
   } else {
   console.log('error submit!!');
   return false;
   }
  });
  }
 }
 }
</script>

上述代码中比较关键的部分有一下两点:

1、:prop="‘domains.'+scope.$index+'.name'" ,用于动态绑定prop到el-form-item;

2、this.$set(this.fromData,‘domains',this.domains) ,用于为fromData设置domains这个节点。

方法二:

<template>
 <div class="app-container">
 
  <el-form :model="fromData" ref="from">
  <el-table :data="fromData.domains">
   <el-table-column label="姓名">
   <template slot-scope="scope">
    <el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromData.fromaDataRules.name">
    <el-input v-model="scope.row.name"></el-input>
    </el-form-item>
   </template>
   </el-table-column>
   <el-table-column label="地址">
   <template slot-scope="scope">
    <el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromData.fromaDataRules.desc">
    <el-input v-model="scope.row.desc"></el-input>
    </el-form-item>
   </template>
   </el-table-column>
  </el-table>
  </el-form>
  <el-button type="warning" @click="submit('from')">submit</el-button> 
 </div>
</template> 
<script>
 export default {
 data() {
  return {
  
  fromData:{
	   fromaDataRules:{
	   name:[{ required: true, message: '请输入', trigger: 'blur' }],
	   desc:[ { required: true, message: '请填写', trigger: 'blur' }]
	  },
   domains:[],
  }, 
  }
 },
 mounted(){
  this.initDomains()
 },
 methods:{
  initDomains(){
  this.fromData.domains=[
   {
   name: "小红",
   desc: "11123"
   },
   {
   name: "小红",
   desc: "11123"
   }
  ]
  },
  init(){ 
  },
  submit(formName){
  this.$refs[formName].validate((valid) => {
   if (valid) {
   alert('submit!');
   } else {
   console.log('error submit!!');
   return false;
   }
  });
  }
 }
 }
</script>

补充知识:Vue+ElementUI 完整增删查改验证功能的表格

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div class="block">
 <el-col>
  <el-row>
  <el-form>
   <el-form-item>
   <el-input style="width: 250px;float: left" placeholder="请输入名称" v-model="query"></el-input>
   <el-button @click="handleSelect" style="float: left;margin-left: 10px">查询</el-button>
   <el-button @click="handleAdd" style="float: left;margin-left: 10px">新增</el-button>
   </el-form-item>
  </el-form>
  </el-row>
  <el-row>
 <el-table
  :data="tableData"
  style="width: 100%"
  border>
  <el-table-column
  prop="date"
  label="日期"
  width="250">
  </el-table-column>
  <el-table-column
  prop="name"
  label="姓名"
  width="250">
  </el-table-column>
  <el-table-column
  prop="address"
  label="地址"
  width="350">
  </el-table-column>
  <el-table-column>
  <template slot-scope="scope">
  <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
  <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
  </template>
  </el-table-column>
 </el-table>
  </el-row>
  <el-row>
  <el-dialog class="dialog" :title="operation===true ?'新增':'编辑'" :visible.sync="dialogVisible" width="350px" >
   <el-form label-width="80px" :model="lineData" :rules="addRule" ref="lineData" >
   <el-form-item label="日期" prop="date">
    <el-input v-model="lineData.date"></el-input>
   </el-form-item>
   <el-form-item label="姓名" prop="name">
    <el-input v-model="lineData.name"></el-input>
   </el-form-item>
   <el-form-item label="地址">
    <el-input v-model="lineData.address"></el-input>
   </el-form-item>
   <el-form-item>
    <el-button @click="handleSave" type="primary">确定</el-button>
    <el-button @click="handleCancel">取消</el-button>
   </el-form-item>
   </el-form>
  </el-dialog>
  </el-row>
 </el-col>
 </div>
</template>

<script>export default {
 data () {
 return {
  operation: true,
  dialogVisible: false,
  lineData: {},
  editData: {},
  query: '',
  addRule: {
  date: [{required: true, message: '请输入日期', trigger: 'blur'}],
  name: [{required: true, message: '请输入名称', trigger: 'blur'}]
  },
  tableData: [{
  id: 1,
  date: '2016-05-02',
  name: '王一虎',
  address: '上海市普陀区金沙江路 1518 弄'
  }, {
  id: 2,
  date: '2016-05-04',
  name: '王二虎',
  address: '上海市普陀区金沙江路 1517 弄'
  }, {
  id: 3,
  date: '2016-05-01',
  name: '王一虎',
  address: '上海市普陀区金沙江路 1519 弄'
  }, {
  id: 4,
  date: '2016-05-03',
  name: '王四虎',
  address: '上海市普陀区金沙江路 1516 弄'
  }]
 }
 },
 methods: {
 handleEdit (index, row) {
  this.editData = JSON.stringify(row)
  this.lineData = JSON.parse(this.editData)
  this.dialogVisible = true
  this.operation = false
 },
 handleDelete (index, row) {
  this.tableData.splice(index, 1)
 },
 handleAdd () {
  this.dialogVisible = true
  this.operation = true
  this.lineData = {}
  this.lineData.id = Math.random()
 },
 handleSelect () {
  if (this.query !== '') {
  const tmpData = []
  for (let item of this.tableData) {
   if (item.name === this.query) {
   tmpData.push(item)
   }
  }
  this.tableData = tmpData
  }
 },
 handleSave () {
  this.$refs.lineData.validate((valid) => {
  if (valid) {
   this.addLine(this.lineData)
   this.dialogVisible = false
  } else {
   alert('保存失败')
   return false
  }
  })
 },
 handleCancel () {
  this.dialogVisible = false
 },
 addLine (item) {
  let existed = false
  for (let i = 0; i < this.tableData.length; i++) {
  if (this.tableData[i].id === item.id) {
   this.tableData[i].id = item.id
   this.tableData[i].name = item.name
   this.tableData[i].address = item.address
   this.tableData[i].date = item.date
   existed = true
   break
  }
  }
  if (!existed) {
  this.tableData.push(this.lineData)
  }
 }
 }
}
</script>

<style scoped>
 .block{
 width: 75%;
 margin-left: 400px;
 margin-top: 200px;
 }
</style>

以上这篇使用element-ui +Vue 解决 table 里包含表单验证的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
Vue程序调试的方法
Jun 17 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
JS自定义右键菜单实现代码解析
Jul 16 #Javascript
JS如何在不同平台实现多语言方式
Jul 16 #Javascript
vue使用axios实现excel文件下载的功能
Jul 16 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php csv操作类代码
2009/12/14 PHP
PHP源码之explode使用说明
2011/08/05 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP最常用的正则表达式
2017/02/13 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
jQuery live
2009/05/15 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue实现文字加密功能
2019/09/27 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
pygame实现简易飞机大战
2018/09/11 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
flask框架中的cookie和session使用
2021/01/31 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
英语专业求职信
2014/07/08 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Golang ort 中的sortInts 方法
2022/04/24 Golang