一、效果
二、实现
<template>
<div>
<el-button @click="addItem" size="small" type="primary">添加报修事项</el-button>
<el-form :model="formData" ref="formRef" :rules="rules">
<el-form-item label="报修地点" prop="place" label-width="100px">
<el-input v-model="formData.place" />
</el-form-item>
<el-form-item label="联系方式" prop="phone" label-width="100px">
<el-input v-model="formData.phone" />
</el-form-item>
<el-table :data="formData.tableData">
<el-table-column prop="id" label="id" width="100" />
<el-table-column label="物品名称">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.goodsName'" :rules="rules.goodsName">
<el-input v-model="scope.row.goodsName" placeholder="物品名称" />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
place: '',
phone: '',
tableData: [
{ id: 1, goodsName: '' },
{ id: 2, goodsName: '' },
],
},
// 表单校验
rules: {
place: [{ required: true, message: '报修地点不能为空', trigger: ['blur', 'change'] }],
phone: [{ required: true, message: '联系方式不能为空', trigger: ['blur', 'change'] }],
goodsName: [{ required: true, message: '物品名称不能为空', trigger: ['blur', 'change'] }],
},
}
},
methods: {
addItem() {
const item = { id: this.formData.tableData.length, goodsName: '' }
this.formData.tableData.push(item)
},
handleSubmit() {
this.$refs.formRef.validate((valid) => {
if (!valid) return
console.log(JSON.parse(JSON.stringify(this.formData)))
})
},
},
}
</script>
表格某一列校验不通过，将该列滚动到表格左侧
效果：
实现：
el-table标签添加ref="tableRef"
handleSubmit() {
this.$refs.formRef.validate(valid => {
if (!valid) return this.scrollToFirstError()
console.log(JSON.parse(JSON.stringify(this.formData)))
})
},
scrollToFirstError() {
this.$nextTick(() => {
const tableWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper')
const errEle = this.$refs.tableRef.$el.querySelector('.is-error')
if (errEle) {
const tableRect = tableWrapper.getBoundingClientRect()
const rect = errEle.getBoundingClientRect()
const offset = rect.left - tableRect.left
tableWrapper.scrollLeft += offset
}
})
}
三、el-form-item标签上rules写法
需求：编辑时，如果password没有发生变化，则不校验；如果password发生变化，则进行密码的校验
<el-form-item label="Password" prop="password" :rules="[{ required: true, validator: form.password !== form.passwordCopy && checkPassword, trigger: 'change' }]">
<el-input v-model="form.password" placeholder="Please Enter" clearable />
</el-form-item>
