vue elementui table编辑表单时弹框增加编辑明细数据的实现

跃尘

需求:
前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。
效果图：

代码：

1.    <!-- 新增主表弹窗 Begin -->
   
2.     <el-dialog
   
3.       :title="titleInfo"
   
4.       top="5vh"
   
5.       center
   
6.       width="85%"
   
7.       :close-on-click-modal="false"
   
8.       :close-on-press-escape="false"
   
9.       :visible.sync="dialogVisible"
   
10.     >
    
11.       <span>
    
12.         <el-form
    
13.           ref="form"
    
14.           :rules="formRules"
    
15.           :model="form"
    
16.           style="margin: 0 auto"
    
17.           label-width="32%"
    
18.         >
    
19.           <el-row :gutter="24">
    
20.             <el-col :span="12">
    
21.               <el-form-item label="申请日期:" prop="applyDate">
    
22.                 <el-date-picker
    
23.                   v-model="form.applyDate"
    
24.                   style="width: 80%"
    
25.                   clearable
    
26.                   type="date"
    
27.                   value-format="yyyy-MM-dd"
    
28.                   placeholder="请选择申请日期"
    
29.                 />
    
30.               </el-form-item>
    
31.             </el-col>
    
32.             <el-col :span="12">
    
33.               <el-col :span="14">
    
34.                 <el-form-item
    
35.                   prop="applyDept"
    
36.                   label="申请部门:"
    
37.                   label-width="30%"
    
38.                 >
    
39.                   <el-select
    
40.                     v-model="form.applyDept"
    
41.                     style="width: 80%"
    
42.                     :disabled="true"
    
43.                   >
    
44.                     <el-option
    
45.                       v-for="item in deptLists"
    
46.                       :key="item.id"
    
47.                       :label="item.departName"
    
48.                       :value="item.orgCode"
    
49.                     />
    
50.                   </el-select>
    
51.                 </el-form-item>
    
52.               </el-col>
    
53.               <el-col :span="10">
    
54.                 <el-form-item
    
55.                   prop="applyUsername"
    
56.                   label="申请人:"
    
57.                   label-width="30%"
    
58.                 >
    
59.                   <el-input
    
60.                     v-model="form.applyUsername"
    
61.                     style="width: 70%"
    
62.                     :disabled="true"
    
63.                   />
    
64.                 </el-form-item>
    
65.               </el-col>
    
66.             </el-col>
    
67.           </el-row>
    
68.         </el-form>
    
69.         <el-card>
    
70.           <div slot="header">
    
71.             <span style="font-weight: bold">外来人员名单</span>
    
72.             <el-button
    
73.               style="float: right"
    
74.               type="primary"
    
75.               @click="insertExterRow"
    
76.               >添加</el-button
    
77.             >
    
78.           </div>
    
79.           <el-table
    
80.             ref="exterTable"
    
81.             align="center"
    
82.             highlight-cell
    
83.             keep-source
    
84.             stripe
    
85.             border
    
86.             style="width: 100%"
    
87.             max-height="400"
    
88.             :data="exterTableData"
    
89.             :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
    
90.           >
    
91.             <el-table-column prop="useUser" label="姓名" align="center" />
    
92.             <el-table-column prop="idCard" label="身份证号" align="center" />
    
93.             <el-table-column prop="phone" label="手机号" align="center" />
    
94.             <el-table-column label="操作" align="center" width="220">
    
95.               <template slot-scope="scope">
    
96.                 <el-button
    
97.                   mode="text"
    
98.                   icon="el-icon-edit"
    
99.                   @click="editExterRow(scope.$index, scope.row)"
    
100.                 />
     
101.                 <el-button
     
102.                   mode="text"
     
103.                   icon="el-icon-delete"
     
104.                   @click="removeExterRow(scope.$index, scope.row)"
     
105.                 />
     
106.               </template>
     
107.             </el-table-column>
     
108.           </el-table>
     
109.         </el-card>
     
110.       </span>
     
111.       <span slot="footer" class="dialog-footer">
     
112.         <el-button @click="cancel">取消</el-button>
     
113.         <el-button type="success" :loading="saveLoading" @click="save"
     
114.           >保存</el-button
     
115.         >
     
116.       </span>
     
117.     </el-dialog>
     
118.     <!-- 新增主表弹窗 End -->
     
119.     <!-- 外来人员弹窗 Start-->
     
120.     <el-dialog
     
121.       :title="exterTitleInfo"
     
122.       top="5vh"
     
123.       center
     
124.       width="50%"
     
125.       :close-on-click-modal="false"
     
126.       :close-on-press-escape="false"
     
127.       :visible.sync="exterDialogVisible"
     
128.     >
     
129.       <span>
     
130.         <el-form
     
131.           ref="exterForm"
     
132.           :rules="exterFormRules"
     
133.           :model="exterForm"
     
134.           style="margin: 0 auto"
     
135.           label-width="25%"
     
136.         >
     
137.           <el-row :gutter="24">
     
138.             <el-col :span="24">
     
139.               <el-form-item label="姓名:" prop="useUser">
     
140.                 <el-input
     
141.                   v-model="exterForm.useUser"
     
142.                   placeholder="请输入姓名"
     
143.                   style="width: 80%"
     
144.                 />
     
145.               </el-form-item>
     
146.             </el-col>
     
147.           </el-row>
     
148.           <el-row :gutter="24">
     
149.             <el-col :span="24">
     
150.               <el-form-item label="身份证号:" prop="idCard">
     
151.                 <el-input
     
152.                   v-model="exterForm.idCard"
     
153.                   placeholder="请输入身份证号"
     
154.                   style="width: 80%"
     
155.                 />
     
156.               </el-form-item>
     
157.             </el-col>
     
158.           </el-row>
     
159.           <el-row :gutter="24">
     
160.             <el-col :span="24">
     
161.               <el-form-item label="手机号:" prop="phone">
     
162.                 <el-input
     
163.                   v-model="exterForm.phone"
     
164.                   placeholder="请输入手机号"
     
165.                   style="width: 80%"
     
166.                 />
     
167.               </el-form-item>
     
168.             </el-col>
     
169.           </el-row>
     
170.         </el-form>
     
171.       </span>
     
172.       <span slot="footer" class="dialog-footer">
     
173.         <el-button @click="cancelExter">取消</el-button>
     
174.         <el-button type="success" :loading="exterSaveLoading" @click="saveExter"
     
175.           >保存</el-button
     
176.         >
     
177.       </span>
     
178.     </el-dialog>
     
179.     <!--外来人员弹窗 End-->
     
180. export default {
     
181.   data() {
     
182.     return {
     
183.       // 表单
     
184.       form: {},
     
185.       exterForm: {},
     
186.       exterTableData: [],
     
187.       //form表单验证规则
     
188.       exterFormRules: {}
     
189.     }
     
190.   },
     
191.   methods: {
     
192.    // 添加一行，外来人员信息
     
193.     insertExterRow() {
     
194.       this.exterTitleInfo = '外来人员信息新增'
     
195.       this.exterForm = {}
     
196.       this.exterDialogVisible = true
     
197.       this.selectExterRow = null
     
198.       this.$nextTick(() => {
     
199.         this.$refs.exterForm.clearValidate() // 移除校验结果
     
200.       })
     
201.     },
     
202.     // 编辑一行，外来人员信息
     
203.     editExterRow(index, row) {
     
204.       this.exterTitleInfo = '外来人员信息编辑'
     
205.       this.exterDialogVisible = true
     
206.       this.selectExterRow = row
     
207.       this.exterForm = Object.assign({}, row)
     
208.       this.$nextTick(() => {
     
209.         this.$refs.exterForm.clearValidate() // 移除校验结果
     
210.       })
     
211.     },
     
212.     // 删除一行，外来人员信息
     
213.     removeExterRow(index, row) {
     
214.       this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {
     
215.         confirmButtonText: '确定',
     
216.         cancelButtonText: '取消',
     
217.         type: 'warning',
     
218.         center: true
     
219.       })
     
220.         .then(() => {
     
221.           this.exterTableData.splice(index, 1)
     
222.         })
     
223.         .catch(() => {
     
224.           this.$message({
     
225.             type: 'info',
     
226.             message: '已取消删除'
     
227.           })
     
228.         })
     
229.     },
     
230.     // 保存外来人员信息
     
231.     saveExter() {
     
232.       this.$refs.exterForm.validate((valid) => {
     
233.         if (valid) {
     
234.           this.exterSaveLoading = true
     
235.           if (this.selectExterRow) {
     
236.             Object.assign(this.selectExterRow, this.exterForm)
     
237.           } else {
     
238.             this.exterTableData.push(this.exterForm)
     
239.           }
     
240.           this.exterSaveLoading = false
     
241.           this.exterDialogVisible = false
     
242.         } else {
     
243.           return false
     
244.         }
     
245.       })
     
246.     },
     
247.     cancelExter() {
     
248.       this.exterForm = {}
     
249.       this.exterDialogVisible = false
     
250.     }
     
251.   }
     
252. }

复制代码

到此这篇关于vue elementui table编辑表单时弹框增加编辑明细数据的文章就介绍到这了,更多相关vue elementui table编辑表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3289476mt.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！