form表單與table一起使用

之前一直以為form表單是單獨使用，現(xiàn)在聯(lián)動起來發(fā)現(xiàn)只是套了一層外殼，并不是很麻煩的事情

form的單獨使用

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密碼" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="確認(rèn)密碼" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

form與table的聯(lián)合

在table的column中使用solot?將form-item放入。需要注意的還是數(shù)據(jù)格式與rules

form內(nèi)使用的是input輸入框，它所綁定的值當(dāng)前行數(shù)據(jù)的屬性? 原來的寫法是form表單綁定form后?使用form.xxx進(jìn)行綁定。現(xiàn)在采用的是table，綁定值變成了scope.row.xxx.

因為我寫的是動態(tài)添加表格數(shù)據(jù)，所以prop采用index拼接的方式

<el-form ref="ruleForm" :model="form" :rules="form.rules">
        <el-table class="box-table" :data="form.tableData" border >
          <el-table-column label="標(biāo)題" align="center">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.title'"
                :rules="form.rules.title"
              >
                <el-input
                  v-model.trim="scope.row.title"
                  size="small"
                  placeholder="請輸入標(biāo)題名稱"
                />
              </el-form-item>
            </template>
          </el-table-column>
       </el-table>
      </el-form>

數(shù)據(jù)格式

form{
    tableData:[],
    rules:{}
   }

el-table中的index

Table-column Attributes

   <el-table-column
            label="序號"
            align="center"
            type="index"
            width="70px"
            :index="indexMethod"
            sortable
          />

 // 將數(shù)字轉(zhuǎn)換為A-Z 一直到AZ-ZZ的轉(zhuǎn)換方法
    indexMethod(number) {
      var ordA = "A".charCodeAt(0);
      var ordZ = "Z".charCodeAt(0);
      var len = ordZ - ordA + 1;
      var s = "";
      while (number >= 0) {
        s = String.fromCharCode((number % len) + ordA) + s;
        number = Math.floor(number / len) - 1;
      }
      return s;
    },

可增刪表格數(shù)據(jù)

點擊當(dāng)前行時候在當(dāng)前行后面新增一條數(shù)據(jù)，點擊當(dāng)前行刪除當(dāng)前行，點擊在最后添加一行

 // 增加一行
    addRow() {
      const row = {
        title: "",
      };
      this.form.tableData.push(row);
      // console.log(row);
    },
    // 刪除指定行
    delRow(index) {
      this.form.tableData.splice(index, 1);
    },
    // 指定位置插入行
    addRowIndex(index) {
          const row = {
            title: "",
            this.form.tableData.splice(index + 1, 0, row);
        
      });
    },

表單校驗

表單校驗與原來的方式是一樣的，需要將rules寫在form表單中

 <el-form-item
                :prop="'tableData.' + scope.$index + '.select'"
                :rules="form.rules.select"
              >

因為后續(xù)進(jìn)行動態(tài)添加表單，prop采用拼接index的方式，rules需要寫全屬性

但是存在一個問題，點擊產(chǎn)生新表單后，例如index為 3,4,5的。點擊驗證后3表單存在錯誤提示，直接刪除數(shù)據(jù)3，數(shù)據(jù)4的驗證就會出現(xiàn)原來3號數(shù)據(jù)的錯誤提示。不會進(jìn)行重新驗證。

這里我采用的辦法是在新增時候歲所有填入數(shù)據(jù)進(jìn)行驗證，驗證成功后才可進(jìn)行新增，刪除行數(shù)據(jù)是直接進(jìn)行刪除。將錯誤信息也進(jìn)行了刪除不回影響數(shù)據(jù)顯示。

如果有更好的方式希望能夠提醒我下。我這沒有使用el-table的新增。還是比較麻煩的寫法

文章來源地址http://www.zghlxwxcb.cn/news/detail-695307.html

到了這里，關(guān)于elementUI中的table動態(tài)表單記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！