vue表格与表单提交校验
form.vue
1 <!-- 动态增减表单 --> 2 3 <template> 4 <div class="spp-user-body spp-theme-body spp-theme-pad"> 5 <!-- 列表 --> 6 <div class="spp-table-group spp-theme-top spp-theme-pad"> 7 <div class="spp-table-btns"> 8 <el-button size="small" type="primary" @click="onAdd"><i class="el-icon-plus" />新增 </el-button> 9 <el-button size="small" type="danger" @click="onDelete"><i class="el-icon-delete" />删除 </el-button> 10 </div> 11 <el-form 12 ref="formRef" 13 :model="tableForm" 14 label-width="120px" 15 :inline="true" 16 :rules="formRules" 17 size="small" 18 label-position="center" 19 > 20 <el-table 21 ref="tableRef" 22 v-loading="tableLoading" 23 class="my-table" 24 :data="tableForm.tableData" 25 :stripe="true" 26 :header-cell-style="headerCellStyle" 27 :cell-style="cellStyle" 28 border 29 @selection-change="selectionLineChangeHandle" 30 style="width: 100%" 31 > 32 <el-table-column prop="xh" type="index" label="序号" width="120px" /> 33 <el-table-column type="selection" width="85px" :key="Math.random()" /> 34 <el-table-column label="名称" :render-header="addRedStar" min-width="260" :key="Math.random()"> 35 <template slot-scope="scope"> 36 <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="formRules.name"> 37 <el-input v-model="scope.row.name" maxlength="20" placeholder="请输入" clearable /> 38 </el-form-item> 39 </template> 40 </el-table-column> 41 <el-table-column label="部门" :render-header="addRedStar" min-width="260" :key="Math.random()"> 42 <template slot-scope="scope"> 43 <el-form-item :prop="`tableData.${scope.$index}.dept`" :rules="formRules.dept"> 44 <el-select v-model="scope.row.dept" placeholder="请选择" collapse-tags clearable> 45 <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value" /> 46 </el-select> 47 </el-form-item> 48 </template> 49 </el-table-column> 50 <el-table-column label="操作人" :render-header="addRedStar" min-width="260" :key="Math.random()"> 51 <template slot-scope="scope"> 52 <el-form-item :prop="`tableData.${scope.$index}.operator`" :rules="formRules.operator"> 53 <el-input v-model="scope.row.operator" maxlength="10" placeholder="请输入" clearable /> 54 </el-form-item> 55 </template> 56 </el-table-column> 57 <el-table-column label="内容" :render-header="addRedStar" min-width="260" :key="Math.random()"> 58 <template slot-scope="scope"> 59 <el-form-item :prop="`tableData.${scope.$index}.content`" :rules="formRules.content"> 60 <el-input v-model="scope.row.content" maxlength="100" placeholder="请输入" type="textarea" :autosize="{ minRows: 2, maxRows: 2}" clearable /> 61 </el-form-item> 62 </template> 63 </el-table-column> 64 <el-table-column label="操作" width="120px" :key="Math.random()"> 65 <template slot-scope="scope"> 66 <el-button size="mini" icon="el-icon-edit-outline" @click="rowEdit(scope.row)" /> 67 <el-button size="mini" icon="el-icon-delete" type="danger" @click="rowDelete(scope.row)" /> 68 </template> 69 </el-table-column> 70 </el-table> 71 </el-form> 72 73 <div class="spp-table-btns" align="center" style="padding:20px;"> 74 <el-button type="primary" size="small" @click="onClickSave('formRef')">保存</el-button> 75 <el-button type="primary" size="small" @click="onClickReset('formRef')">重置</el-button> 76 </div> 77 </div> 78 </div> 79 </template> 80 <script> 81 82 export default { 83 data() { 84 return { 85 deptOptions: [], 86 tableLoading: false, 87 tableForm: { 88 tableData: [] 89 }, 90 formRules: { 91 name: [{ required: true, message: '名称必填', trigger: 'change' }], 92 dept: [{ required: true, message: '部门必填', trigger: 'change' }], 93 operator: [{ required: true, message: '操作人必填', trigger: 'change' }], 94 content: [{ required: true, message: '内容必填', trigger: 'change' }] 95 } 96 } 97 }, 98 mounted() { 99 this.getDeptOptionList() 100 this.requestList() 101 }, 102 methods: { 103 getDeptOptionList() { 104 this.deptOptions = [...new Array(1000)].map((item, idx) => ({ label: `部门${idx + 1}`, value: `dept${idx + 1}` })) 105 }, 106 requestList() { 107 const arr = [] 108 ;[...new Array(2)].forEach((item, idx) => { 109 arr.push({ 110 id: idx + 1, 111 xh: idx + 1, 112 name: `名称${idx + 1}`, 113 dept: `dept${idx + 1}`, 114 operator: `操作人${idx + 1}`, 115 content: `内容${idx + 1}` 116 }) 117 }) 118 this.tableForm.tableData = arr 119 }, 120 // 设置表头样式 121 headerCellStyle({ row, column, rowIndex, columnIndex }) { 122 return { textAlign: 'center', background: '#f5f5f5' } 123 }, 124 // 设置表内容样式 125 cellStyle({ row, column, rowIndex, columnIndex }) { 126 return { textAlign: 'center' } 127 }, 128 addRedStar(h, { column }) { // 给表头加必选标识 129 return [h('span', { style: 'color: red' }, '*'), h('span', ' ' + column.label)] 130 }, 131 selectionLineChangeHandle(val) { 132 this.selectionList = val 133 }, 134 onAdd() { 135 this.tableForm.tableData.push( 136 { 137 id: this.tableForm.tableData.length + 1, 138 xh: this.tableForm.tableData.length + 1, 139 name: '', 140 dept: '', 141 operator: '', 142 content: '' 143 } 144 ) 145 }, 146 onDelete() { 147 const arr = this.selectionList.map(item => item.xh).sort((a, b) => a - b) 148 arr.forEach((item, idx) => this.tableForm.tableData.splice(item - idx - 1, 1)) 149 this.dealWithData() 150 }, 151 dealWithData() { 152 this.tableForm.tableData.forEach((item, idx) => { 153 item.id = idx + 1 154 item.xh = idx + 1 155 }) 156 }, 157 rowDelete(row) { 158 this.tableForm.tableData.splice(row.xh - 1, 1) 159 this.dealWithData() 160 }, 161 rowEdit(row) { 162 console.log('current row', row) 163 }, 164 onClickSave(formName) { 165 this.$refs[formName].validate((valid) => { 166 if (valid) { 167 console.log('表格', this.tableForm.tableData) 168 this.$success('提交成功') 169 } else { 170 return this.$error('error submit!!') 171 } 172 }) 173 }, 174 onClickReset(formName) { 175 this.$refs[formName].resetFields() 176 } 177 } 178 } 179 </script> 180 181 <style lang="scss" scoped> 182 .my-table { 183 margin-top: 10px; 184 } 185 186 .el-form-item { 187 padding: 10px; 188 margin-bottom: 0px; 189 } 190 191 .el-form-item.is-error { 192 padding: 10px; 193 margin-bottom: 20px; 194 } 195 </style>
效果：
