vue elementui table编辑表单时弹框增加编辑明细数据的实现
作者：weixin_45616483
在Vue项目中,通过使用Element UI框架实现表单及其明细数据的新增和编辑操作,主要通过弹窗形式进行明细数据的增加和编辑,有效提升用户交互体验,本文详细介绍了相关实现方法和代码,适合需要在Vue项目中处理复杂表单交互的开发者参考
需求:
前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。
效果图：
代码：
<!-- 新增主表弹窗 Begin -->
<el-dialog
:title="titleInfo"
top="5vh"
center
width="85%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="dialogVisible"
>
<span>
<el-form
ref="form"
:rules="formRules"
:model="form"
style="margin: 0 auto"
label-width="32%"
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="申请日期:" prop="applyDate">
<el-date-picker
v-model="form.applyDate"
style="width: 80%"
clearable
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择申请日期"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="14">
<el-form-item
prop="applyDept"
label="申请部门:"
label-width="30%"
>
<el-select
v-model="form.applyDept"
style="width: 80%"
:disabled="true"
>
<el-option
v-for="item in deptLists"
:key="item.id"
:label="item.departName"
:value="item.orgCode"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item
prop="applyUsername"
label="申请人:"
label-width="30%"
>
<el-input
v-model="form.applyUsername"
style="width: 70%"
:disabled="true"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
</el-form>
<el-card>
<div slot="header">
<span style="font-weight: bold">外来人员名单</span>
<el-button
style="float: right"
type="primary"
@click="insertExterRow"
>添加</el-button
>
</div>
<el-table
ref="exterTable"
align="center"
highlight-cell
keep-source
stripe
border
style="width: 100%"
max-height="400"
:data="exterTableData"
:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
>
<el-table-column prop="useUser" label="姓名" align="center" />
<el-table-column prop="idCard" label="身份证号" align="center" />
<el-table-column prop="phone" label="手机号" align="center" />
<el-table-column label="操作" align="center" width="220">
<template slot-scope="scope">
<el-button
mode="text"
icon="el-icon-edit"
@click="editExterRow(scope.$index, scope.row)"
/>
<el-button
mode="text"
icon="el-icon-delete"
@click="removeExterRow(scope.$index, scope.row)"
/>
</template>
</el-table-column>
</el-table>
</el-card>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="success" :loading="saveLoading" @click="save"
>保存</el-button
>
</span>
</el-dialog>
<!-- 新增主表弹窗 End -->
<!-- 外来人员弹窗 Start-->
<el-dialog
:title="exterTitleInfo"
top="5vh"
center
width="50%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="exterDialogVisible"
>
<span>
<el-form
ref="exterForm"
:rules="exterFormRules"
:model="exterForm"
style="margin: 0 auto"
label-width="25%"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="姓名:" prop="useUser">
<el-input
v-model="exterForm.useUser"
placeholder="请输入姓名"
style="width: 80%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="身份证号:" prop="idCard">
<el-input
v-model="exterForm.idCard"
placeholder="请输入身份证号"
style="width: 80%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="手机号:" prop="phone">
<el-input
v-model="exterForm.phone"
placeholder="请输入手机号"
style="width: 80%"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelExter">取消</el-button>
<el-button type="success" :loading="exterSaveLoading" @click="saveExter"
>保存</el-button
>
</span>
</el-dialog>
<!--外来人员弹窗 End-->
export default {
data() {
return {
// 表单
form: {},
exterForm: {},
exterTableData: [],
//form表单验证规则
exterFormRules: {}
}
},
methods: {
// 添加一行，外来人员信息
insertExterRow() {
this.exterTitleInfo = '外来人员信息新增'
this.exterForm = {}
this.exterDialogVisible = true
this.selectExterRow = null
this.$nextTick(() => {
this.$refs.exterForm.clearValidate() // 移除校验结果
})
},
// 编辑一行，外来人员信息
editExterRow(index, row) {
this.exterTitleInfo = '外来人员信息编辑'
this.exterDialogVisible = true
this.selectExterRow = row
this.exterForm = Object.assign({}, row)
this.$nextTick(() => {
this.$refs.exterForm.clearValidate() // 移除校验结果
})
},
// 删除一行，外来人员信息
removeExterRow(index, row) {
this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
})
.then(() => {
this.exterTableData.splice(index, 1)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 保存外来人员信息
saveExter() {
this.$refs.exterForm.validate((valid) => {
if (valid) {
this.exterSaveLoading = true
if (this.selectExterRow) {
Object.assign(this.selectExterRow, this.exterForm)
} else {
this.exterTableData.push(this.exterForm)
}
this.exterSaveLoading = false
this.exterDialogVisible = false
} else {
return false
}
})
},
cancelExter() {
this.exterForm = {}
this.exterDialogVisible = false
}
}
}到此这篇关于vue elementui table编辑表单时弹框增加编辑明细数据的文章就介绍到这了,更多相关vue elementui table编辑表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！