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

作者:buling girl 时间:2024-05-28 16:00:02 

应用场景:

在实际使用中经常会遇到需要在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>

来源:https://blog.csdn.net/u013746071/article/details/89705375

标签:element-ui,Vue,table,验证
0
投稿

猜你喜欢

  • 解决pycharm修改代码后第一次运行不生效的问题

    2022-07-27 13:35:14
  • MySQL高级特性之集合函数

    2009-02-26 16:19:00
  • python opencv实现目标区域裁剪功能

    2022-07-15 19:17:56
  • python查看模块,对象的函数方法

    2021-07-11 19:45:10
  • MySql通过ip地址进行访问的方法

    2024-01-20 07:39:40
  • Python Map 函数详解

    2022-12-28 16:17:09
  • python opencv实现图像矫正功能

    2022-05-22 17:00:13
  • 异步完成后新开窗口

    2010-04-06 12:37:00
  • MYSQL数据库中cmd命令操作详解

    2024-01-18 16:08:01
  • Python 多张图片合并成一个pdf的参考示例

    2021-10-15 23:32:45
  • 20分钟MySQL基础入门

    2024-01-22 21:37:54
  • MySQL分库分表的几种方式

    2024-01-22 05:25:36
  • python使用opencv驱动摄像头的方法

    2023-08-26 17:00:49
  • 使用FSO把文本信息导入数据库

    2007-09-27 20:20:00
  • Go每日一库之dateparse处理时间

    2024-04-26 17:25:55
  • Python快速生成随机密码超简单实现

    2022-08-07 19:26:09
  • 对numpy中的transpose和swapaxes函数详解

    2023-03-14 06:10:44
  • Python 实现过滤掉列表中唯一值

    2021-09-26 23:13:55
  • 浅析Python数据处理

    2023-09-08 18:18:34
  • python字符串不可变数据类型

    2021-04-14 23:07:09
  • asp之家 网络编程 m.aspxhome.com