前言:有时候表单会要已表格的样式布局,实现表格里每一项表单的验证,其实关键在于表单项设置prop,绑定输入框的model值,这个model值来自于表格的数据返回(scope.row.数据值)
如果不需要进行表单验证,就不需要在外面包裹 <el-form :model="alldata" :rules="alldata.rules">
表格知识:
如果后台返回字段是你需要的可以直接使用表格项prop对应
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
如果需要自定义后台返回的字段拼接,可以用:
<el-table-column label="年月" align="center">
<template slot-scope="scope">
<span>{ { scope.row.tyear }}</span
>年 <span>{ { scope.row.tmonth }}</span
>月
</template>
</el-table-column>
scope.$index:表格当前项索引,
scope.row:表格当前项数据对象
操作tabledata数组可以在表格中拿到scope.$index,进而可以操作里面的对象
表单知识:
表单prop验证,表格显示,表单嵌套表格实现表格每一项的验证
Prop绑定表单对象中对应的部分,才能用对应的规则。
所以在表单项中验证规则必须要有prop, :prop="'tableData.' + scope.$index + 'date'"
才能使用:rules="alldata.rules.date" 规则,才能验证
表格里面的表单项v-model绑定可以根据表格的scope.row返回的进行操作
完整代码:
<template>
<div>
<el-form :model="alldata" :rules="alldata.rules">
<el-table :data="alldata.tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + 'date'"
:rules="alldata.rules.date"
>
<el-date-picker
v-model="scope.row.date"
type="datetime"
placeholder="选择日期时间"
size="mini"
>
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + 'name'"
:rules="alldata.rules.name"
>
<el-input
v-model="scope.row.name"
placeholder="请输入姓名"
size="mini"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="性别" width="180">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + 'sex'"
:rules="alldata.rules.sex"
>
<el-select
v-model="scope.row.sex"
placeholder="请选择性别"
size="mini"
>
<el-option
v-for="item in alldata.sexchoose"
:key="item.id"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
<p style="font-size: 1rem">你好世界</p>
</div>
</template>
<script>
export default {
data() {
return {
alldata: {
// 表单验证规则
rules: {
date: { type: "string", required: true, message: "请勿随意改变时间", trigger: "change" },
name: { type: "string", required: true, message: "输入姓名", trigger: "blur" },
sex: { type: "string", required: true, message: "你输入正确吗", trigger: "change" },
},
// 性别选择
sexchoose: [
{
id: 1,
value: '男'
},
{
id: '2',
value: '女'
},
],
// 表格数据
tableData: [{
date: '2016-05-02',
name: '',
sex: '',
}, {
date: '2016-05-02',
name: '王小虎',
sex: '男',
}, {
date: '2016-05-02',
name: '王小虎',
sex: '男',
}]
}
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
</script>
<style lang="less" scoped>
/deep/ .el-input__inner {
width: 70%;
}
</style>