vue + element：table 结合 form 实现动态新增、编辑表格，并且校验_vue form表单中嵌套动态表单

根据场景不一样，可以区分为整体校验和逐条校验；

一、整体校验

<template>
  <div>
    <el-button type="success" @click="handleAdd()">add</el-button>
    <el-button type="success" @click="submit()">submit</el-button>
    <el-form :model="ruleForm" ref="ruleForm" :key="flash">
      <el-table :data="ruleForm.tableData" style="width: 100%">
        <el-table-column
          v-for="(item, index) in ruleForm.tableHeader"
          :prop="item.keys"
          :label="item.label"
          :key="index">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + item.keys"
                :rules="{
                  validator: validateFn,
                  trigger: 'blur',}">
                <el-input v-model="scope.row[item.keys]"></el-input>
              </el-form-item>
            </span>
            <span v-else>
              {{ scope.row[item.keys] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.isSet" type="primary" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flash:0,
      ruleForm: {
        tableHeader: [
          {
            label: "日期",
            keys: "date",
          },
          {
            label: "姓名",
            keys: "name",
          },
          {
            label: "地址",
            keys: "address",
          },
        ],
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          }
        ],
      },
    };
  },
  methods: {
  	//自定义校验规则
  	validateFn(rule, value, callback){
  		let arr = rule.field.split('.')[2]
  		if(arr == 'date'){
  			callback(new Error("请输入日期"));
  		}else if(arr == 'name'){
  			callback(new Error("请输入名称"));
  		}else if(arr == 'address'){
  			callback(new Error("请输入地址"));
  		}else{
  			callback()
  		}
  	},
  	//提交
    submit(){
		this.$refs.ruleForm.validate(valid=>{
			if(valid){
				this.ruleForm.tableData.forEach((item, index) => {
			        item.isSet = false;
			    });
				this.$set(this.ruleForm.tableData);
				this.flash++
			}else{
				return false
			}
		})
    },
    //新增
    handleAdd() {
      let row = {};
      this.ruleForm.tableHeader.forEach((item, index) => {
        row.isSet = true;
      });
      this.ruleForm.tableData.push(row);
    },
    //编辑
    handleEdit(index, row) {
      row.isSet = true;
      this.$set(this.ruleForm.tableData, index, row);
    },
    //删除
    handleDelete(index, row) {
      this.ruleForm.tableData.splice(index, 1);
    },
  },
};
</script>
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
115
116
117
118

这里是使用 form 包裹 table ，注意动态绑定 prop 的拼接规则，这样可以通过最外层的对象 ruleForm 来统一对输入框进行校验；

效果图如下：

二、逐条校验

<template>
  <div class="formData">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="key" label="KEY" min-width="180">
        <template slot-scope="{ row }">
          <div v-if="!row.isModified">
            {{ row.key }}
          </div>
          <el-form
            v-else
            :ref="'keyForm' + row.id"
            label-width="0px"
            :class="row.isValid ? 'demo-ruleForm' : ''"
            :model="row">
            <el-form-item
              prop="key"
              :rules="[
                {
                  validator: validateKey,
                  trigger: ['blur', 'change'],
                  id: row.id,
                },
              ]">
              <el-input v-model="row.key" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="VALUE" min-width="180">
        <template slot-scope="{ row }">
          <div v-if="!row.isModified">
            {{ row.value }}
          </div>
          <el-form
            :ref="'valueForm' + row.id"
            label-width="0px"
            :class="row.isValid ? 'demo-ruleForm' : ''"
            v-else
            :model="row">
            <el-form-item
              prop="value"
              :rules="[
                {
                  validator: validateValue,
                  trigger: ['blur', 'change'],
                  id: row.id,
                },
              ]">
              <el-input v-model="row.value" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="{ row }">
          <el-button v-if="!row.isModified" type="text" size="small" @click="editKey(row.id)">编辑</el-button>
          <el-button v-else type="text" size="small" @click="confirm(row.id)">确认</el-button>
          <el-button type="text" size="small" @click="deleteKey(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="addKey">add</el-button>
  </div>
</template>
<script>
export default {
  name: "formData",
  data() {
    return {
      list: [
        {
          key: "vue",
          value: "2.21",
          isModified: false,
          isValid: false,
          id: 0,
        }
      ],
    };
  },
  computed: {
   //过滤出已经存在的key
    existKeys() {
      return this.list
        .filter((item) => !item.isModified)
        .map((item) => item.key);
    },
    //过滤出已经存在的value
    existValues() {
      return this.list
        .filter((item) => !item.isModified)
        .map((item) => item.value);
    },
  },
  methods: {
    //删除
    deleteKey(index) {
    	let ind = this.findItem(index)
        this.list.splice(ind, 1);
    },
    //编辑
    editKey(index) {
    	let ind = this.findItem(index)
      	this.list[ind].isModified = true;
    },
    //新增
    addKey() {
      this.list.push({
        key: "",
        value: "",
        isModified: true, //切换编辑状态的标志位
        isValid: false, //判断Key的校验结果
        id: this.list.length,
      });
    },
    promiseValidate(key) {
      return new Promise((resolve, reject) => {
        try {
          this.$refs[key].validate((valid) => {
            resolve(valid);
          });
        } catch (err) {
          reject(err);
        }
      });
    },
    //确认
    async confirm(index) {
      const validates = await Promise.all([
        this.promiseValidate("keyForm" + index),
        this.promiseValidate("valueForm" + index),
      ]);
      if (validates.every((item) => item)) {
        this.list[index].isModified = false;
      }
    },
    //查找需要当前校验的项
    findItem(id){
    	for(let i in this.list){
    		if(this.list[i].id == id){
    			return i
    		}
    	}
    },
    validateKey(rule, value, callback) {
    	let ind = this.findItem(rule.id)
    	console.log(ind)
      if (value === "") {
        this.list[ind].isValid = true
        callback(new Error("请输入Key"));
      } else if (this.existKeys.includes(value)) {
        this.list[ind].isValid = true
        callback(new Error("Key的值已经重复"));
      } else {
        callback();
      }
    },
    validateValue(rule, value, callback) {
    	let ind = this.findItem(rule.id)
      if (value === "") {
        this.list[ind].isValid = true
        callback(new Error("请输入Value"));
      } else if (this.existValues.includes(value)) {
        this.list[ind].isValid = true
        callback(new Error("value的值已经重复"));
      } else {
        callback();
      }
    },
  },
};
</script>
<style>
.formData {
  padding: 20px;
}
.el-form-item {
  margin-bottom: 0;
}
.demo-ruleForm {
  margin: 20px 0;
}
</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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

这种是每一行分别校验，主要是将 form 嵌套在 table 里面；这个案例实现了所有 key 和 所有 value 去重的校验；

效果图如下：