当前位置:   article > 正文

vue3+element-plus点击添加按钮添加多行表单_element ui vue3 添加操作按钮

element ui vue3 添加操作按钮

效果图:

 

1.首先先排版需要的表单

  1. <el-tab-pane name="second" label="编辑配置"
  2. ><el-form ref="rulesforms" :model="rulesforms">
  3. <el-row v-for="(item, index) in ruleForms" :key="index">
  4. <el-col :span="3" style="margin: 2px">
  5. <span>左括号符号</span>
  6. <el-form-item :prop="'ruleForms.' + index + '.leftBracket'">
  7. <el-select
  8. @change="leftChange(index)"
  9. placeholder="左括号符号"
  10. v-model="item.leftBracket"
  11. clearable
  12. >
  13. <el-option
  14. v-for="(item, index) in leftBracketData"
  15. :key="index"
  16. :label="item"
  17. :value="item"
  18. />
  19. </el-select>
  20. </el-form-item>
  21. </el-col>
  22. <el-col :span="3" style="margin: 2px">
  23. <span>体检项目</span>
  24. <el-form-item
  25. :prop="'ruleForms.' + index + '.inspectProjectsId'"
  26. >
  27. <el-select
  28. placeholder="请选择体检项目"
  29. clearable
  30. filterable
  31. v-model="item.inspectProjectsId"
  32. >
  33. <el-option
  34. v-for="item in listKv"
  35. :key="item.value"
  36. :label="item.label"
  37. :value="item.value"
  38. />
  39. </el-select>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="4" style="margin: 2px">
  43. <span>运算符</span>
  44. <el-form-item
  45. :prop="'rulesform.' + index + '.conditionOperationType'"
  46. >
  47. <el-select
  48. placeholder="请选择运算符"
  49. v-model="item.conditionOperationType"
  50. >
  51. <el-option
  52. v-for="item in conditionOperationTypeData"
  53. :key="item.value"
  54. :label="item.label"
  55. :value="item.value"
  56. />
  57. </el-select>
  58. </el-form-item>
  59. </el-col>
  60. <el-col :span="2" style="margin: 2px">
  61. <span></span>
  62. <el-form-item :prop="'rulesform.' + index + '.value'">
  63. <el-input
  64. style="width: 11.2vw"
  65. v-model="item.value"
  66. placeholder="请输入值"
  67. clearable
  68. ></el-input>
  69. </el-form-item>
  70. </el-col>
  71. <el-col :span="4" style="margin: 2px">
  72. <span>右括号符号</span>
  73. <el-form-item :prop="'rulesform.' + index + '.rightBracket'">
  74. <el-select
  75. placeholder="右括号符号"
  76. v-model="item.rightBracket"
  77. >
  78. <el-option
  79. v-for="(i, index) in rightBracketData"
  80. :key="index"
  81. :label="i"
  82. :value="i"
  83. />
  84. </el-select>
  85. </el-form-item>
  86. </el-col>
  87. <el-col :span="2" style="margin: 2px">
  88. <span>条件</span>
  89. <el-form-item :prop="'rulesform.' + index + '.conditionType'">
  90. <el-select
  91. placeholder="请选择条件"
  92. v-model="item.conditionType"
  93. >
  94. <el-option
  95. v-for="item in conditionTypeData"
  96. :key="item.value"
  97. :label="item.label"
  98. :value="item.value"
  99. />
  100. </el-select>
  101. </el-form-item>
  102. </el-col>
  103. <!-- 添加删除按钮 -->
  104. <el-col
  105. :span="2"
  106. style="
  107. align-items: center;
  108. display: flex;
  109. justify-content: center;
  110. "
  111. >
  112. <div v-if="index == 0" @click="addItem">
  113. <img
  114. style="width: 20px; height: 20px"
  115. src="../../../../assets/img/加号.png"
  116. />
  117. </div>
  118. <div v-if="index != 0" @click="delItem(index)">
  119. <img
  120. style="width: 20px; height: 20px"
  121. src="../../../../assets/img/减少.png"
  122. />
  123. </div>
  124. </el-col>
  125. </el-row>
  126. </el-form>
  127. </el-tab-pane>

2.这是在setup里定义双向绑定的字段

  1. ruleForms: [
  2. {
  3. diagnosisRulesId: null,
  4. inspectProjectsId: null,
  5. leftBracket: "",
  6. conditionType: null,
  7. conditionOperationType: null,
  8. value: null,
  9. rightBracket: "",
  10. sort: 0,
  11. },
  12. ],

3.点击添加重新push一行表单

  1. //新增表单
  2. addItem() {
  3. state.ruleForms.push({
  4. diagnosisRulesId: state.id,
  5. inspectProjectsId: null,
  6. leftBracket: "",
  7. conditionType: null,
  8. conditionOperationType: null,
  9. value: null,
  10. rightBracket: "",
  11. sort: 0,
  12. });
  13. },

4.根据获取当前行下标删除当前点中的行表单

  1. //删除表单
  2. delItem(index) {
  3. state.ruleForms.splice(index, 1);
  4. },

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