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

效果图：

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

    <el-tab-pane name="second" label="编辑配置"
          ><el-form ref="rulesforms" :model="rulesforms">
            <el-row v-for="(item, index) in ruleForms" :key="index">
              <el-col :span="3" style="margin: 2px">
                <span>左括号符号</span>
                <el-form-item :prop="'ruleForms.' + index + '.leftBracket'">
                  <el-select
                    @change="leftChange(index)"
                    placeholder="左括号符号"
                    v-model="item.leftBracket"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in leftBracketData"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="margin: 2px">
                <span>体检项目</span>
                <el-form-item
                  :prop="'ruleForms.' + index + '.inspectProjectsId'"
                >
                  <el-select
                    placeholder="请选择体检项目"
                    clearable
                    filterable
                    v-model="item.inspectProjectsId"
                  >
                    <el-option
                      v-for="item in listKv"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin: 2px">
                <span>运算符</span>
                <el-form-item
                  :prop="'rulesform.' + index + '.conditionOperationType'"
                >
                  <el-select
                    placeholder="请选择运算符"
                    v-model="item.conditionOperationType"
                  >
                    <el-option
                      v-for="item in conditionOperationTypeData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="margin: 2px">
                <span>值</span>
                <el-form-item :prop="'rulesform.' + index + '.value'">
                  <el-input
                    style="width: 11.2vw"
                    v-model="item.value"
                    placeholder="请输入值"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin: 2px">
                <span>右括号符号</span>
                <el-form-item :prop="'rulesform.' + index + '.rightBracket'">
                  <el-select
                    placeholder="右括号符号"
                    v-model="item.rightBracket"
                  >
                    <el-option
                      v-for="(i, index) in rightBracketData"
                      :key="index"
                      :label="i"
                      :value="i"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="margin: 2px">
                <span>条件</span>
                <el-form-item :prop="'rulesform.' + index + '.conditionType'">
                  <el-select
                    placeholder="请选择条件"
                    v-model="item.conditionType"
                  >
                    <el-option
                      v-for="item in conditionTypeData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 添加删除按钮 -->
              <el-col
                :span="2"
                style="
                  align-items: center;
                  display: flex;
                  justify-content: center;
                "
              >
                <div v-if="index == 0" @click="addItem">
                  <img
                    style="width: 20px; height: 20px"
                    src="../../../../assets/img/加号.png"
                  />
                </div>
                <div v-if="index != 0" @click="delItem(index)">
                  <img
                    style="width: 20px; height: 20px"
                    src="../../../../assets/img/减少.png"
                  />
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

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

 ruleForms: [
        {
          diagnosisRulesId: null,
          inspectProjectsId: null,
          leftBracket: "",
          conditionType: null,
          conditionOperationType: null,
          value: null,
          rightBracket: "",
          sort: 0,
        },
      ],

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

  //新增表单
      addItem() {
        state.ruleForms.push({
          diagnosisRulesId: state.id,
          inspectProjectsId: null,
          leftBracket: "",
          conditionType: null,
          conditionOperationType: null,
          value: null,
          rightBracket: "",
          sort: 0,
        });
      },

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

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