<template>
<div>
<el-form :model="tableData" ref="userForm">
<el-table :data="tableData.users" border :header-cell-style="headerStyle" :cell-style="headerCellStyle">
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column label="人员姓名" width="120" :prop="'users.'+scope.$index+'.userName'" :rules="rules.userName">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.userName"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="性别" width="120" :prop="'users.'+scope.$index+'.sex'" :rules="rules.sex">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.sex"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="联系电话" width="120" :prop="'users.'+scope.$index+'.tel'" :rules="rules.tel">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.tel"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
rules: {
userName:[
{
required: true,
message: "请输入人员姓名",
trigger: "change",
},
],
sex: [
{
required: true,
message: "请输入人员性别",
trigger: "change",
},
],
tel: [
{
required: true,
message: "请输入联系息电话",
trigger: "change",
},
]
},
tableData:{
users:[
{
userName:"李云吉",
sex:"男",
age:20,
tel:"13775175890",
address:"",
department:""
},
{
userName:"李云吉",
sex:"男",
age:20,
tel:"13775175890",
address:"",
department:""
},
]
}
};
},
mounted() {
},
methods: {
};
</script>
关键代码:
1、需要将table嵌套在form表单内
2、prop 设置index 例如 :prop="'users.'+scope.$index+'.userName'"
3、rules绑定