当前位置:   article > 正文

Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能_vue 在el-dialog实现好看的点击按钮时,新增或删除一行表单元素

vue 在el-dialog实现好看的点击按钮时,新增或删除一行表单元素

原创/朱季谦

最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。

简化的页面效果图如下:

image

最开始,我是用了纯粹的表格形式,后来发现,这种形式在提交的时候,不好对每个输入框做校验,若是表单形式话,就可以直接通过rule设置每个输入框的验证,因此,我就在表格里面嵌套了表单。注意一点是,el-form-item里的 :prop="scope.$index + '.name'"需要对应el-input的 v-model="studentData[scope.$index].name",两者都是同一个字段值。

  1. <template>
  2. <div >
  3. <div>
  4. <div>
  5. <el-button size="small" @click="addRow">新增</el-button>
  6. </div>
  7. <!--设置的表单-->
  8. <el-form :model="studentData" ref="data" label-width="auto">
  9. <el-table
  10. border
  11. :header-cell-style="{ 'text-align': 'center' }"
  12. :cell-style="{ 'text-align': 'center' }"
  13. :data="studentData"
  14. ref="table"
  15. style="width: 100%"
  16. >
  17. <el-table-column align="center" label="姓名">
  18. <template slot-scope="scope">
  19. <!--表格里面嵌套表单-->
  20. <el-form-item
  21. :prop="scope.$index + '.name'"
  22. :rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"
  23. >
  24. <el-input
  25. v-model="studentData[scope.$index].name"
  26. autocomplete="off"
  27. size="small"
  28. placeholder="姓名"
  29. ></el-input>
  30. </el-form-item>
  31. </template>
  32. </el-table-column>
  33. <el-table-column align="center" label="年龄">
  34. <template slot-scope="scope">
  35. <el-form-item
  36. :prop="scope.$index + '.age'"
  37. :rules="{ required: true, message: '年龄不能为空', trigger: 'blur' }"
  38. >
  39. <el-input
  40. v-model="studentData[scope.$index].age"
  41. autocomplete="off"
  42. size="small"
  43. type='number'
  44. placeholder="收款方开户行号"
  45. ></el-input>
  46. </el-form-item>
  47. </template>
  48. </el-table-column>
  49. <el-table-column align="center" label="性别">
  50. <template slot-scope="scope">
  51. <el-form-item
  52. :prop="scope.$index + '.sex'"
  53. :rules="{ required: true, message: '性别不能为空', trigger: 'blur' }"
  54. >
  55. <el-input
  56. v-model="studentData[scope.$index].sex"
  57. autocomplete="off"
  58. size="small"
  59. placeholder="性别"
  60. ></el-input>
  61. </el-form-item>
  62. </template>
  63. </el-table-column>
  64. <el-table-column fixed="right" label="操作" width="100">
  65. <template slot-scope="scope">
  66. <el-button
  67. @click="handleDeleteRow(studentData[scope.$index])"
  68. type="text"
  69. size="small"
  70. >删除</el-button
  71. >
  72. </template>
  73. </el-table-column>
  74. </el-table>
  75. </el-form>
  76. </div>
  77. <div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
  78. <el-button size="mini" @click="submit">提交</el-button>
  79. <el-button size="mini" @click="resetForm()">重置</el-button>
  80. </div>
  81. </div>
  82. </template>

定义一个存储动态表格数据的数组变量

  1. export default {
  2. data() {
  3. return {
  4. studentData:[],
  5. };
  6. },
  7. ......
  8. }

在methods方法里增加相关方法,分别是新增行、删除行、提交——

  1. methods:{
  2. /**
  3. * 新增行
  4. */
  5. addRow() {
  6. let index = this.studentData.length ;
  7. this.studentData.push({
  8. key: index,
  9. name:'',
  10. age:'',
  11. sex:'',
  12. });
  13. },
  14. /**
  15. * 删除行
  16. * @param row
  17. */
  18. handleDeleteRow(row){
  19. let datas = this.studentData;
  20. for (var i = 0; i < datas.length; i++){
  21. if (datas[i].key == row.key){
  22. datas.splice(i,1);
  23. }
  24. }
  25. },
  26. /**
  27. * 提交
  28. */
  29. submit() {
  30. this.$refs["data"].validate(valid => {
  31. //validtrue,表示表单都已经验证通过,若为false,说明存在表单验证失败
  32. if (valid) {
  33. save(this.studentData).then(response => {
  34. this.$message({
  35. message: '提交成功',
  36. type: 'success'
  37. });
  38. });
  39. }
  40. });
  41. },
  42. /**
  43. * 重置
  44. */
  45. resetForm() {
  46. let datas = this.studentData;
  47. for (var i = 0; i < datas.length; i++){
  48. datas[i].name='';
  49. datas[i].age='';
  50. datas[i].sex='';
  51. }
  52. },
  53. }

设置表单验证规则,可统一在rules设置,也可以在每一输入框单独设置,我这里是单独在每一个输入框里设置,即:rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"就可以了,当然,还可以做一些更复杂的自定义规则。

  1. <el-table-column align="center" label="姓名">
  2. <template slot-scope="scope">
  3. <!--表格里面嵌套表单-->
  4. <el-form-item
  5. :prop="scope.$index + '.name'"
  6. :rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"
  7. >
  8. <el-input
  9. v-model="studentData[scope.$index].name"
  10. autocomplete="off"
  11. size="small"
  12. placeholder="姓名"
  13. ></el-input>
  14. </el-form-item>
  15. </template>
  16. </el-table-column>

完成以上步骤,就可以快速写出一个基于Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能的逻辑。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/461616
推荐阅读
相关标签
  

闽ICP备14008679号