vue3+element plus動態(tài)新增表格

<el-form-item label="請求參數(shù)" prop="param" v-if="form.type=='api'">
          <el-button type="primary" size="small" icon="Plus" @click="addRow2"/> 
          <el-table :data="form.param" ref="paramsRef">
            <!-- 假設(shè) 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("斷言規(guī)則不能為空");
    }
image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容