如何在表格里面添加表单,并且进行表单验证

通过el-form和el-table的组合使用,在表格里面添加表单 并且进行验证 表单中v-model绑定scope.row中表格的数据

效果如图所示:

<template>
  <div>
    
    
    
    <el-form ref="tableForm" :model="tableForm" :rules="rules" size="small">
      <el-table :data="tableForm.tableData" border>
        <el-table-column label="姓名" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="rules.name">
              <el-input v-model="scope.row.name" />
            el-form-item>
          template>
        el-table-column>
        <el-table-column label="日期" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.date`" :rules="rules.date">
              <el-date-picker
                v-model="scope.row.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            el-form-item>
          template>
        el-table-column>
        <el-table-column prop="address" label="地址" min-width="220">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.address`" :rules="rules.address">
              <el-input v-model="scope.row.address" />
            el-form-item>
          template>
        el-table-column>
        <el-table-column label="操作" min-width="60">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleScope(scope)">打印scopeel-button>
          template>
        el-table-column>
      el-table>
    el-form>
    <el-button type="primary" @click="submit">提交el-button>
  div>
template>

<script>
export default {
  data() {
    return {
      tableForm: {
        // 附属条件表格
        tableData: [
          {
            date: ['2016-05-02', '2016-08-02'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: ['2016-05-02', '2016-06-09'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: ['2016-04-02', '2016-06-02'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: ['2016-05-02', '2016-11-02'],
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 打印scope
    handleScope(scoped) {
      console.log(scoped)
    },
    // 保存按钮
    submit(tableData) {
      this.$refs.tableForm.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
script>

<style lang="scss" scoped>style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

下面是类似的文章
https://blog.csdn.net/tan_xiao_tan/article/details/123982071
https://blog.csdn.net/weixin_45609659/article/details/127750902
https://www.jianshu.com/p/172a3b7290b6