使用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 相关文章推荐
使用原生js写的一个简单slider
Apr 29 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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
php5 图片验证码实现代码
2009/12/11 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python监控文件或目录变化
2016/06/07 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python如何使用input函数获取输入
2020/08/06 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
二审答辩状范文
2015/05/22 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
药房管理制度范本
2015/08/06 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python