使用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 offsetX与layerX区别
Mar 12 Javascript
jQuery 技巧小结
Apr 02 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
JS实现数组去重的11种方法总结
Apr 04 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时的知识积累总结
2013/06/07 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python中一般处理中文的几种方法
2019/03/06 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python学习笔记之装饰器
2020/08/06 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
行政经理岗位职责
2013/11/09 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
土建工程师岗位职责
2014/06/10 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
分享几个实用的CSS代码块
2022/06/10 HTML / CSS