vue3+element plus动态新增表格

<el-form-item label="请求参数" prop="param" v-if="form.type=='api'">
          <el-button type="primary" size="small" icon="Plus" @click="addRow2"/> 
          <el-table :data="form.param" ref="paramsRef">
            <!-- 假设 list 中的每个元素都有 name 和 age 属性 -->
            <el-table-column prop="key" label="key">
              <template #default="{row}">
                <el-input prop="key"
                          v-model="row.key"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="value">
              <template #default="{row}">
                <el-input prop="value"
                          v-model="row.value"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="类型" label="类型">
              <template #default="{row}">
                <el-select prop="type"
                           v-model="row.type"
                >
                  <el-option label="header" value="header"></el-option>
                  <el-option label="body" value="body"></el-option>
                  <el-option label="param" value="param"></el-option>
                  <el-option label="form" value="form"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column   label="表达式">
              <template #default="{row}">
                <el-select prop="type"
                           v-model="row.exp"
                >
                  <el-option label="否" value="0"></el-option>
                  <el-option label="是" value="1"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="" width="60">
              <template #default="{scope,$index}">
                <el-button type="danger" size="small" icon="Delete" @click="removeRow2($index)"/>
              </template>
            </el-table-column>
          </el-table>

        </el-form-item>

方法

// 新增行
function addRow2() {
  const newRow = {
    key: '',
    value: '',
    type: 'param',
    exp: '0'
  }
  form.value.param.push(newRow);
};
// 删除行
function removeRow2(index) {
  if (index !== -1) {
    form.value.param.splice(index, 1);
  }
};

判断是否为空

 form.value.assertRules.forEach((item, index) => {
      if (item.assertRule === '') {
        assertRuleValid = false;
      }
    })
    if (!assertRuleValid) {
      proxy.$modal.msgError("断言规则不能为空");
    }

image.png