使用vue.js、element-ui開發前段的過程中，業務需求，需要實現el-table可動態新增、修改、刪除資料。同時儲存資料時需要使用  el-form自帶的校驗功能校驗資料的正確性。如下圖：

頁面程式碼部分：這裡需要注意 el-form-item 中：prop的命名方式。這種命名方式是element-ui定義的，需要按照規則編寫。

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

          <el-form label-position="right" status-icon :rules="rules" :model="ruleForm" ref="ruleForm">
            <el-table :data="ruleForm.evidenceTemplateList" border fit highlight-current-row>
              <el-table-column type="index" label="序號" align="center" width="70"></el-table-column>
              <el-table-column label="證據名稱" align="center" style="margin-left: 0px !important;">
                <template slot-scope="scope">
                  <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.name'" :rules='rules.name'>
                    <el-input v-if="scope.$index < ruleForm.evidenceTemplateList.length-1" v-model="scope.row.name" :maxlength=50></el-input>
                    <el-input v-if="scope.$index == ruleForm.evidenceTemplateList.length-1" v-model="scope.row.name" :maxlength=50 @change="evidChangeLast(scope.row.name)"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button v-if="scope.$index < ruleForm.evidenceTemplateList.length-1" type="danger" size="mini" @click="delEvid(scope.row,scope.$index)">刪除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="saveData()">儲存</el-button>
            <el-button size="mini" @click="closeDialog()">取消</el-button>
          </div>
 

js程式碼部分：

<script>

export default {
  components: {},
  data() {
    return {
      evidenceTemplateGroup: {
        id: '',
        name: '',
        nickname: '',
        userId: '',
        evidenceTemplateList: []
      },
      ruleForm: {},
      evidenceTemp: {
        id: '',
        name: '',
        remarks: ''
      },
      evidenceTemplateDeleteList: '',
      rules: {
        name: [
          { required: true, message: '證據模板名稱不能為空', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    saveData() {
      //刪除最後一行
      let index = this.ruleForm.evidenceTemplateList.length - 1;
      this.ruleForm.evidenceTemplateList.splice(index, 1);
      this.$nextTick(() => {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            this.loading = true;
            //根據狀態dialogStatus判斷是新增還是更新
            if (this.dialogStatus == 'create') {
              this.createTemp();
            } else {
              this.updateTemp();
            }
          } else {
            this.ruleForm.evidenceTemplateList.push(
              JSON.parse(JSON.stringify(this.evidenceTemp))
            );
            return false;
          }
        });
      });
    }
  }
};
</script>