vue elementui table编辑表单时弹框增加编辑明细数据的实现
需求:前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。
效果图：
代码：
<!-- 新增主表弹窗 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编辑表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源:https://www.jb51.net/javascript/3289476mt.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]