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

应用场景：

在实际使用中经常会遇到需要在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 里包含表单验证的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。