html片段
<el-form
ref="tableFrom"
class="tableForm"
:model="tableFrom"
:rules="tableFromRules"
>
<el-table
:data="tableFrom.tableData"
style="width: 100%"
height="400px"
>
<el-table-column label="SAP物料编码" min-width="120">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.sapMaterialsNo'"
:rules="tableFromRules.sapMaterialsNo"
>
<el-input
v-model="scope.row.sapMaterialsNo"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="类别">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.materialsType'"
:rules="tableFromRules.materialsType"
>
<el-input
v-model="scope.row.materialsType"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="物料名称">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.materialsName'"
:rules="tableFromRules.materialsName"
>
<el-input
v-model="scope.row.materialsName"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="物料描述">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.materialsMemo'"
:rules="tableFromRules.materialsMemo"
>
<el-input
v-model="scope.row.materialsMemo"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="产品系列">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.series'"
:rules="tableFromRules.series"
>
<el-input
v-model="scope.row.series"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="机座号">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.frameNumber'"
:rules="tableFromRules.frameNumber"
>
<el-input
v-model="scope.row.frameNumber"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="功率">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.power'"
:rules="tableFromRules.power"
>
<el-input
v-model="scope.row.power"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="级数">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.level'"
:rules="tableFromRules.level"
>
<el-input
v-model="scope.row.level"
placeholder="请输入"
></el-input>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" min-width="80">
<template slot-scope="scope">
<el-button type="text" @click="del(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button
type="primary"
icon="el-icon-plus"
plain
style="margin-top: 10px; width: 100%"
@click="add()"
>添加
</el-button>
</el-form>
js片段文章来源：https://www.toymoban.com/news/detail-555222.html
tableFrom: {
tableData: [],
},
tableFromRules: {
sapMaterialsNo: [
{
required: true,
message: "SAP物料编码不能为空",
trigger: ["blur", "change"],
},
],
materialsType: [
{
required: true,
message: "类别不能为空",
trigger: ["blur", "change"],
},
],
materialsName: [
{
required: true,
message: "物料名称不能为空",
trigger: ["blur", "change"],
},
],
materialsMemo: [
{
required: true,
message: "物料描述不能为空",
trigger: ["blur", "change"],
},
],
series: [
{
required: true,
message: "产品系列不能为空",
trigger: ["blur", "change"],
},
],
frameNumber: [
{
required: true,
message: "机座号不能为空",
trigger: ["blur", "change"],
},
],
power: [
{
required: true,
message: "功率不能为空",
trigger: ["blur", "change"],
},
],
level: [
{
required: true,
message: "级数不能为空",
trigger: ["blur", "change"],
},
],
mainUnit: [
{
required: true,
message: "维护单位不能为空",
trigger: ["blur", "change"],
},
],
},css片段文章来源地址https://www.toymoban.com/news/detail-555222.html
::v-deep .tableForm {
.el-form-item {
margin-bottom: 0;
}
.el-form-item--medium .el-form-item__content{
line-height: 20px;
}
.item-error {
color: #ff4949;
font-size: 12px;
line-height: 1;
padding-top: 4px;
}
}到了这里，关于element-ui 表格添加校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
