element可编辑表格加正则校验

 

 

 

 

 <div class="row">

            <el-form ref="dataForm" :model="dataForm" :rules="rules" size="medium" style="width: 100%">
              <el-table
                :row-class-name="rowClassName"
                :data="dataForm.proHandoverContacts"
                highlight-current-row
                style="width: 90%;margin: 0 auto;"
                :header-cell-style="headerCellStyle"
                @selection-change="handleSelectionChange"
              >
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column prop="contactsDepartment" label="部门">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.contactsDepartment" placeholder="部门" :disabled="disabled" />
                  </template>
                </el-table-column>

                <el-table-column prop="contactsPosition" label="职务" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.contactsPosition" placeholder="职务" :disabled="disabled" />
                  </template>
                </el-table-column>
                <el-table-column prop="contactsSex" label="性别">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.contactsSex" placeholder="性别" maxlength="1" :disabled="disabled" />
                  </template>
                </el-table-column>
                <el-table-column prop="contactsName" label="姓名" width="150">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.contactsName" placeholder="姓名" :disabled="disabled" />
                  </template>
                </el-table-column>
                <el-table-column prop="contactsRole" label="角色" width="200">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.contactsRole" placeholder="角色" :disabled="disabled" />
                  </template>
                </el-table-column>
                <el-table-column prop="contactsTel" label="联系方式" width="220">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.contactsTel" placeholder="联系方式" :disabled="disabled" />
                  </template>
                </el-table-column>
                <el-table-column prop="contactsEmail" label="E-Mail" width="220">
                  <template slot-scope="scope">
                    <el-form-item :prop="'proHandoverContacts.' + scope.$index + '.contactsEmail'" :rules="rules.contactsEmail">
                      <el-input v-model="scope.row.contactsEmail" placeholder="E-Mail" :disabled="disabled" />

                    </el-form-item>

                  </template>
                </el-table-column>

              </el-table>

            </el-form>

            <el-button type="primary" style="margin:10px 0 0 80px;" @click="addLine">新增</el-button>
            <el-button type="danger" icon="el-icon-delete" style="margin:10px;" @click="handleDelete()">
              删除
            </el-button>

          </div>

邮箱校验规则

 

 

 // 自定义邮箱规则
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback()
      }
      callback(new Error('请输入合法邮箱'))
    };

绑定值