一、首先在表格的外面套一层form,并设置form的model属性
二、在列的模板中增加el-form-item并设置动态的属性和验证规则
代码语言:javascript复制<template>
<div>
<el-form ref="form" :model="tableForm" :rules="tableForm.rules">
<el-table :data="tableForm.tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column label="最小值">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' scope.$index '.min'" :rules="tableForm.rules.min">
<el-input v-model.number="scope.row.min"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="最大值">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.max`" :rules="tableForm.rules.max">
<el-input v-model.number="scope.row.max"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
tableForm: {
tableData: [
{
name: "名称1",
min: "",
max: ""
},
{
name: "名称2",
min: "",
max: ""
}
],
rules: {
min: [
{
type: "number",
required: true,
min: 1,
max: 20,
message: "数值范围1-20",
trigger: "blur"
}
],
max: [
{
type: "number",
required: true,
min: 1,
max: 20,
message: "数值范围1-20",
trigger: "blur"
}
]
}
}
};
},
methods: {},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {}
};
</script>