实现效果:
html
<el-dialog :visible="confereeshow" @close="confereeshow = false">
<div style="margin-bottom: 15px;">
<el-button @click="add">新增</el-button>
<el-button @click="upload.importVisible = true">导入</el-button>
<el-button :disabled="addform.confereeList.length < 1" @click="handleExport">导出</el-button>
<el-button @click="delPeople()">删除</el-button>
</div>
<!-- 参会人员 -->
<el-form ref="addform" :model="addform" label-width="140px" :rules="addform.rules">
<el-table :data="addform.confereeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" />
<el-table-column label="姓名" align="center" prop="name">
<template slot-scope="{row,$index}">
<el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.name'" :rules="addform.rules.name" label-width="0">
<el-input v-model="addform.confereeList[$index].name" />
</el-form-item>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="职务" align="center" prop="duty">
<template slot-scope="{row,$index}">
<el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.duty'" :rules="addform.rules.duty" label-width="0">
<el-input v-model="addform.confereeList[$index].duty" />
</el-form-item>
<span v-else>{{ row.duty }}</span>
</template>
</el-table-column>
<el-table-column label="工作单位" align="center" prop="workUnit">
<template slot-scope="{row,$index}">
<el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.workUnit'" label-width="0">
<el-input v-model="addform.confereeList[$index].workUnit" />
</el-form-item>
<span v-else>{{ row.workUnit }}</span>
</template>
</el-table-column>
<el-table-column label="手机号" align="center" prop="phone">
<template slot-scope="{row,$index}">
<el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.phone'" :rules="addform.rules.phone" label-width="0">
<el-input v-model="addform.confereeList[$index].phone" />
</el-form-item>
<span v-else>{{ row.phone }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="{row,$index}">
<el-button
v-if="row.show"
type="text"
size="mini"
@click="save1(row,$index)"
>保存</el-button>
<el-button
type="text"
size="mini"
@click="deletePeople(row,$index)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
</el-dialog>
其中要注意prop的绑定方式为:prop="'datas.'+scope.$index + '.name'"
以及数据源的结构为数组对象的形式
data
addform: {
confereeList: [],
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
duty: [{ required: true, message: '请输入职务', trigger: 'blur' }],
phone: [{ min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
{
pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
// pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的手机号码'
}
]
}
},
表单校验每个字段需要单独绑定
<el-form-item :prop="‘datas.’+scope.$index + ‘.name’" :rules='rules.name'
>
表单校验部分如果校验只是对某些字段进行校验,其他的字段会输出error为undefined
//新增一行数据显示
add() {
this.obj = {
name: '',
duty: '',
phone: '',
workUnit: '',
show: true,
meetingId: this.currentRoomId
}
this.addform.confereeList.push(this.obj)
// console.log(this.addform.confereeList)
},
// 对部分表单字段进行校验
validateField(form, index) {
let result = true
for (const item of this.$refs[form].fields) {
if (item.prop.split('.')[1] == index) {
this.$refs[form].validateField(item.prop, (error) => {
if (typeof error === 'undefined') {
error = ''
}
if (error !== '') {
result = false
}
})
}
}
return result
},
async save1(row, index) {
// this.$refs.addform.validate(async valid => {
// if (valid) {
const isValid = this.validateField('addform', index)
if (isValid) {
row.show = false
try {
addPeople(this.addform.confereeList[index]).then(({ message }) => {
this.$message({
type: 'success',
message: message
})
})
this.getPeople(this.currentRoomId)
this.getList()
// this.addDialog = false
} catch (error) {
}
}
// } else {
// return false
// }
// })
},
参考:vue+ElementUI 表单嵌套表格逐行校验(新增、编辑)的完美解决方案_iamlujingtao的博客-CSDN博客