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
| 因为el-form是最外层的，所以formData是个对象，对象里放el-table用到的数组和rules
这样定义是为了校验时用到rules
el-form绑定: rules使用formData.rules整个对象，同时定义一个ref
<el-form :model="formData" :rules="formData.rules" ref="formRef">
保证prop必须唯一
自定义prop：使用 列表数据属性名+列的下标scope.$index+列的数据属性名
注意：如果不是使用列表数据属性名tableData，会出现报错
Error: please transfer a valid prop path to form item
<el-form-item :prop="'tableData.'+scope.$index+'.price'" :rules="formData.rules.price">
保证每一个el-form-item都要配置rules属性
rules使用formData.rules对应的属性的规则
代码如下(参考：https:
<template>
<div>
<el-form :model="formData" :rules="formData.rules" ref="formRef">
<el-table :data="formData.tableData">
<el-table-column
label="价格">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.price'" :rules="formData.rules.price">
<el-input v-model="scope.row.price"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="数量">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.num'" :rules="formData.rules.price">
<el-input v-model="scope.row.num"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="primary" @click="submitForm('formRef')">批量开票</el-button>
</div>
</template>
<script>
export default {
name: "table",
data(){
return {
formData:{
id:1,
...,
rules: {
price: {
required: true,
message: '单价不能为空',
tirgger: ['blur', 'change']
},
num: {
required: true,
message: '数量不能为空',
tirgger: ['blur', 'change']
},
selected: {
required: true,
message: '请选择',
tirgger: 'change'
}
},
tableData:[
{
num:1,
price:291.37,
}]
}
}
},
methods:{
submitForm(formName){
this.$refs[formName].validate((valid)=>{
if(valid){
console.log(1)
}
})
}
}
}
第二种没验证(参考:https:
<template>
<div>
<el-form :model="forms" ref="forms" :rules="rules">
<el-table :data="forms.voList">
<el-table-column
label="价格">
<template slot-scope="scope">
<el-form-item :prop="'voList.'+scope.$index+'.unitPrice'" :rules="rules.unitPrice">
<el-input v-model="scope.row.unitPrice"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="数量">
<template slot-scope="scope">
<el-form-item :prop="'voList.'+scope.$index+'.num'" :rules="rules.unitPrice">
<el-input v-model="scope.row.num"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="primary" @click="save">批量开票</el-button>
</div>
</template>
<script>
export default {
name: "table",
data(){
return {
forms:{
id:1,
...,
voList:[
{
num:1,
unitPrice:291.37,
}
]
},
rules:{
num:[{required:true,message:'数量不能为空',trigger:'blur'}],
unitPrice:[{required:true,message:'单价不能为空',trigger:'blur'}]
}
}
},
methods:{
save(){
this.$refs['forms'].validate((valid)=>{
if(valid){
console.log(1)
}
})
}
}
}
</script>
</script>
|
