常见需求:
在项目中,通常会在表格中添加多条数据,并需要对添加的数据进行校验功能,这时候就是很头疼的事了,下面酱酱仔给你们写个示例,你们无脑粘贴复制即可。
注意事项:
1、校验里面用到了正则校验功能,大家可以参考 酱酱仔的lgb-x文档lgb-xhttps://yjfk.hgjt.cn:9901后续酱酱仔将会持续迭代更新lgb-x库以及对应的lgb-x文档(lgb-x库不做重复轮子,只做业务场景常用组件以及api公共方法,致力于打造更便捷组件,提升开发效率)
2、示例是vue2.0写法,vue3.0也可以无脑使用,不过需要换成组合式api写法即可。
实现介绍:
1、首先默认给表格数据每行设置 isKeyValid: false ,目的是为了表格一开始打开时候,每行上下边距为0。
tableData: [
{
date: "",
name: "",
address: "",
isKeyValid: false,
},
{
date: "",
name: "",
address: "",
isKeyValid: false,
},
],
2、其次在模版里面表格外层嵌套el-from表单,表格列插槽字段嵌套el-form-item,同时需要动态绑定class样式。
<template>
<div class="app-container">
<div class="table-form">
{{ {tableData} }}
<div style="margin-right: 0">
<el-button type="primary" @click="add">新增</el-button>
</div>
<el-form :model="{tableData}" ref="ruleForm" label-width="0px">
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="日期">
<template slot-scope="scope">
<div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'">
<el-form-item
label=""
:prop="`tableData[${scope.$index}].date`"
:rules="{
validator: validateDate,
trigger: ['blur', 'change'],
id: scope.$index,
},"
>
<el-date-picker
v-model="scope.row.date"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
/>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="姓名">
<template slot-scope="scope">
<div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'">
<el-form-item
label=""
:prop="`tableData[${scope.$index}].name`"
:rules="{
validator: validateName,
trigger: ['blur', 'change'],
id: scope.$index,
},"
>
<el-input type="input" v-model="scope.row.name" />
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'">
<el-form-item
label=""
:prop="`tableData[${scope.$index}].address`"
:rules="{
validator: validateAddress,
trigger: ['blur', 'change'],
id: scope.$index,
},"
>
<el-input type="input" v-model="scope.row.address" />
</el-form-item>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
<div>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即创建</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
</div>
</div>
</template>
3、然后再在css里面定义对应的动态绑定的class类名样式,为了清空自带的表格外边距。
<style scoped lang="scss">
::v-deep .el-form-item {
margin-bottom: 0 !important;
}
.rulesFail {
margin: 18px 0 !important;
}
.rulePass {
margin: 0 !important;
}
</style>
4、最后再methods方法里面写校验逻辑
<script>
export default {
name: "DemoPage",
components: {},
data() {
return {
tableData: [
{
date: "",
name: "",
address: "",
isKeyValid: false,
},
{
date: "",
name: "",
address: "",
isKeyValid: false,
},
],
};
},
methods: {
add() {
this.tableData.push({
date: "",
name: "",
address: "",
isKeyValid: false,
});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success("校验通过");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
//校验日期
validateDate(rule, value, callback) {
if (value === "" || value === null) {
this.tableData[rule.id].isKeyValid = true;
callback(new Error("请输入日期"));
} else {
callback();
// if (this.tableFormData.tableData[rule.id].isKeyValid) {
// this.tableFormData.tableData[rule.id].isKeyValid = false;
// }
}
},
//校验姓名
validateName(rule, value, callback) {
const regExp = /^[\u4e00-\u9fa5a-zA-Z]+$/;
if (!regExp.test(value)) {
this.tableData[rule.id].isKeyValid = true;
callback(new Error("请输入有效的姓名(仅限中英文,不包含特殊符号)"));
} else {
callback();
}
},
//校验地址
validateAddress(rule, value, callback) {
if (value === "" || value === null) {
this.tableData[rule.id].isKeyValid = true;
callback(new Error("请输入地址"));
} else {
callback();
}
},
},
};
</script>
整个demo代码如下:粘贴放到项目页面参考即可
<!--
* @Author: lgb1224 185023762@qq.com
* @Date: 2024-06-19 11:38:11
* @LastEditors: LAPTOP-9J0AUDN8
* @LastEditTime: 2024-08-01 17:38:54
* @FilePath: \vue-admin\src\views\environmentMonitor\governanceFacilities\sulfurNitrate\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="app-container">
<div class="table-form">
{{ {tableData} }}
<div style="margin-right: 0">
<el-button type="primary" @click="add">新增</el-button>
</div>
<el-form :model="{tableData}" ref="ruleForm" label-width="0px">
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="日期">
<template slot-scope="scope">
<div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'">
<el-form-item
label=""
:prop="`tableData[${scope.$index}].date`"
:rules="{
validator: validateDate,
trigger: ['blur', 'change'],
id: scope.$index,
},"
>
<el-date-picker
v-model="scope.row.date"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
/>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="姓名">
<template slot-scope="scope">
<div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'">
<el-form-item
label=""
:prop="`tableData[${scope.$index}].name`"
:rules="{
validator: validateName,
trigger: ['blur', 'change'],
id: scope.$index,
},"
>
<el-input type="input" v-model="scope.row.name" />
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'">
<el-form-item
label=""
:prop="`tableData[${scope.$index}].address`"
:rules="{
validator: validateAddress,
trigger: ['blur', 'change'],
id: scope.$index,
},"
>
<el-input type="input" v-model="scope.row.address" />
</el-form-item>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
<div>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即创建</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "DemoPage",
components: {},
data() {
return {
tableData: [
{
date: "",
name: "",
address: "",
isKeyValid: false,
},
{
date: "",
name: "",
address: "",
isKeyValid: false,
},
],
};
},
methods: {
add() {
this.tableData.push({
date: "",
name: "",
address: "",
isKeyValid: false,
});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success("校验通过");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
//校验日期
validateDate(rule, value, callback) {
if (value === "" || value === null) {
this.tableData[rule.id].isKeyValid = true;
callback(new Error("请输入日期"));
} else {
callback();
// if (this.tableFormData.tableData[rule.id].isKeyValid) {
// this.tableFormData.tableData[rule.id].isKeyValid = false;
// }
}
},
//校验姓名
validateName(rule, value, callback) {
const regExp = /^[\u4e00-\u9fa5a-zA-Z]+$/;
if (!regExp.test(value)) {
this.tableData[rule.id].isKeyValid = true;
callback(new Error("请输入有效的姓名(仅限中英文,不包含特殊符号)"));
} else {
callback();
}
},
//校验地址
validateAddress(rule, value, callback) {
if (value === "" || value === null) {
this.tableData[rule.id].isKeyValid = true;
callback(new Error("请输入地址"));
} else {
callback();
}
},
},
};
</script>
<style scoped lang="scss">
::v-deep .el-form-item {
margin-bottom: 0 !important;
}
.rulesFail {
margin: 18px 0 !important;
}
.rulePass {
margin: 0 !important;
}
</style>