一.實現(xiàn)方法
1.1參考element ui 官網(wǎng)動態(tài)增減表單項
動態(tài)增減表單項
文章來源：http://www.zghlxwxcb.cn/news/detail-815101.html
1.2實例
- 因為嵌套關(guān)系，el-table的數(shù)據(jù)綁定的是：data=“form.tableData”
- 因為表格中的表單項校驗需要綁定prop字段，這個字段根據(jù)表格索引動態(tài)綁定所以添加校驗時需要注意表單的prop屬性是動態(tài)的，例如 :prop=“‘tableData.’ + scope.$index + ‘.name’”
，另外prop中的最后一個屬性必須要和v-model中綁定同一個屬性
<el-form ref="form" :rules="rules" :model="form">
<el-table :data="form.tableData">
<el-table-column label="序號" prop="name">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.name`"
:rules="rules.name">
<el-input type="text" v-model="scope.row.name" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="內(nèi)容" prop="content">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.content`"
:rules="rules.content">
<el-input type="text" v-model="scope.row.content" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
data() {
return {
form: {
tableData: [
{name:'',content:''},
{name:'',content:''}]
},
rules: {
name: [{
required: true,
message: "請輸入序號",
trigger: ["blur", "change"],
}],
content: [{
required: true,
message: "請輸入內(nèi)容",
trigger: ["blur", "change"],
}]
}
}
}
}
1.3運行結(jié)果
文章來源地址http://www.zghlxwxcb.cn/news/detail-815101.html
到了這里，關(guān)于Element ui el-form嵌套el-table并設(shè)置校驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[element-ui] el-table 行與行之間設(shè)置間隔, 行內(nèi)的漸變效果](https://imgs.yssmx.com/Uploads/2024/02/620189-1.png)
