element-ui el-table 可编辑数据的el-form表单校验。

最新推荐文章于 2024-08-18 16:28:01 发布

football98

最新推荐文章于 2024-08-18 16:28:01 发布

阅读量2.1w

点赞数 4

分类专栏： JS

本文链接：https://blog.csdn.net/football98/article/details/83006616

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用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>