需求:不调用接口给表格增加编辑删除数据,最后保存提交整个表单的时候统一调接口
在vue3的系统里写的vue2,代码稍微有些不同
父组件表格代码
<template>
<div>
<el-button
size="small"
@click="addInterfaceSyncLogDetailsRow"
type="primary"
style="margin-bottom: 10px"
>
新增
</el-button>
<el-table
class="table"
size="small"
:data="ruleForm.interfaceSyncLogDetailsDTOList.filter(function(item){ return item.delFlag !== '1'})"
style="width: 100%"
>
<el-table-column
prop="qsxm"
header-align="center"
align="center"
show-overflow-tooltip
label="亲属姓名"
></el-table-column>
<el-table-column
prop="sfzjh"
header-align="center"
align="center"
show-overflow-tooltip
label="身份证件号"
></el-table-column>
<el-table-column
prop="xb"
header-align="center"
align="center"
show-overflow-tooltip
label="性别"
></el-table-column>
<el-table-column fixed="right" label="操作" width="150">
<template #default="scope">
<el-button @click="viewInterfaceSyncLogDetailsRow(scope.row)" link size="small">
查看
</el-button>
<el-button @click="editInterfaceSyncLogDetailsRow(scope.row)" link size="small">
编辑
</el-button>
<el-button @click="delInterfaceSyncLogDetailsRow(scope.row)" link size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<InterfaceSyncLogDetailsForm
ref="interfaceSyncLogDetailsForm"
@addRow="saveInterfaceSyncLogDetailsRow"
></InterfaceSyncLogDetailsForm>
</div>
</template>
<script>
import InterfaceSyncLogDetailsForm from './InterfaceSyncLogDetailsForm'
export default {
name: 'Pc2BuildDia',
components: {
InterfaceSyncLogDetailsForm
},
data() {
return {
ruleForm: {
interfaceSyncLogDetailsDTOList: []
},
}
},
methods: {
// 新增
addInterfaceSyncLogDetailsRow() {
this.$refs.interfaceSyncLogDetailsForm.init('add')
},
// 查看
viewInterfaceSyncLogDetailsRow(child) {
this.$refs.interfaceSyncLogDetailsForm.init('view', child)
},
// 编辑
editInterfaceSyncLogDetailsRow(child) {
this.$refs.interfaceSyncLogDetailsForm.init('edit', child)
},
// 删除
delInterfaceSyncLogDetailsRow(child) {
this.ruleForm.interfaceSyncLogDetailsDTOList.forEach((item, index) => {
if (item === child && item.id === '') {
this.ruleForm.interfaceSyncLogDetailsDTOList.splice(index, 1)
} else if (item === child) {
item.delFlag = '1'
this.ruleForm.interfaceSyncLogDetailsDTOList.splice(index, 1, item)
}
})
},
// 接收子组件传递的表单数据
saveInterfaceSyncLogDetailsRow(child1, child2) {
if (child1 === '') {
this.ruleForm.interfaceSyncLogDetailsDTOList.push(child2)
} else {
this.ruleForm.interfaceSyncLogDetailsDTOList.forEach((item, index) => {
if (item === child1) {
this.ruleForm.interfaceSyncLogDetailsDTOList.splice(index, 1, child2)
}
})
}
}
}
}
</script>
子组件表单代码
<template>
<el-dialog :title="title" :close-on-click-modal="false" v-model="visible" v-if="this.visible">
<el-form
size="small"
:model="inputForm"
ref="inputForm"
:class="method === 'view' ? 'readonly' : ''"
:disabled="method === 'view'"
@keyup.enter="doSubmit()"
label-width="120px"
>
<el-row :gutter="15">
<el-col :span="12">
<el-form-item label="亲属姓名" prop="qsxm" :rules="[]">
<el-input v-model="inputForm.qsxm"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证件号" prop="sfzjh" :rules="[]">
<el-input v-model="inputForm.sfzjh"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="xb" :rules="[]">
<el-input v-model="inputForm.xb"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span class="dialog-footer" style="float: right">
<el-button size="small" v-if="method === 'add'" type="primary" @click="continueDoSubmit()">
继续添加
</el-button>
<el-button size="small" @click="visible = false">关闭</el-button>
<el-button size="small" v-if="method !== 'view'" type="primary" @click="doSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
title: '',
method: '',
visible: false,
oldInputForm: '',
inputForm: {
id: '',
qsxm: '',
sfzjh: '',
xb: ''
}
}
},
components: {},
methods: {
init(method, obj) {
this.method = method
if (method === 'add') {
this.title = `新增`
} else if (method === 'edit') {
this.title = '修改'
} else if (method === 'view') {
this.title = '查看'
}
this.visible = true
this.$nextTick(() => {
this.$refs.inputForm.resetFields()
this.inputForm.id = ''
this.oldInputForm = ''
if (method === 'edit' || method === 'view') {
// 修改或者查看
this.oldInputForm = obj
this.inputForm = JSON.parse(JSON.stringify(obj))
}
})
},
// 添加
doSubmit() {
this.$refs['inputForm'].validate((valid) => {
if (valid) {
this.$emit('addRow', this.oldInputForm, JSON.parse(JSON.stringify(this.inputForm)))
this.visible = false
}
})
},
// 继续添加
continueDoSubmit() {
this.$refs['inputForm'].validate((valid) => {
if (valid) {
this.$emit('addRow', this.oldInputForm, JSON.parse(JSON.stringify(this.inputForm)))
this.$refs['inputForm'].resetFields()
}
})
}
}
}
</script>