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('请输入合法邮箱'))
};
绑定值
标签:style,regEmail,编辑表格,校验,value,element,callback,邮箱,row 来源: https://www.cnblogs.com/Nancy9669/p/16350535.html