###我们需要使用table但是table中会存在必要的输入框需要使用table和form进行组合嵌套
实现方式1:单个实现
##template
<el-form
:model="contract" //这里绑定的是form对象
ref="contractForm"
:rules="contract.rules" //表单的验证规则
size="small"
>
<el-table
border
:header-cell-style="{background:'#D0DCEC',color:'#333',textAlign: 'center',}"
//background 可以改变表头的背景颜色,textAlign可以更改表头的对齐居中
:height="400"
:data="contract.tableData" //这里是table的数据data
width="100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
fixed="left"
align="center"
>
</el-table-column>
<el-table-column
type="index"
align="center"
:index="indexMethod"
label="序号"
width="55"
fixed="left"
>
</el-table-column>
<el-table-column
:render-header="renderHeader"
prop="swtcplxje"
label="委托产品类型"
width="150"
>
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.swtcplxje'"
//tableData是table的数据data ,scope.$index 为下标 ,swtcplxje 为当前的prop绑定值
:rules="contract.rules.swtcplxje"
//表单的验证规则绑定
>
<el-input
:maxlength="999"
v-model="scope.row.swtcplxje"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table>
<el-form>
###script:
//form绑定对象
contract: {
//表单验证的规则
rules: {
swtcplxje: [
{
required: true,
message: "请输入",
trigger: ["blur"],
},
],
},
//table数据绑定数组
tableData: [],
},
//动态根据rules中的key和table中的prop进行比对表头添加小红星
renderHeader(h, { column }) {
let arr = [];
for (let key in this.contract.rules) {
arr.push(key);
}
if (arr.includes(column.property)) {
return [
h("span", { style: "color:red" }, "*"),
h("span", "" + column.label),
];
} else {
return [h("span", "" + column.label)];
}
},
###方式二:table循环绑定from验证
###template
<div>
<el-button @click="addrow" size="small">增行</el-button>
//model表示为需要绑定的对象,rules表单验证的规则 :rules="contract.rules" 表单验证规则
<el-form :model="contract" :rules="contract.rules" ref="contractForm">
<el-table
border
:header-cell-style="{
background: '#f2f2f2',
fontSize: '14px',
textAlign: 'center', //表头对齐方式
padding: '0px !important',
color: '#626262',
}"
:height="400"
:loading="contract.tableLoading"
:data="contract.tableData"
row-key="id"
width="100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
fixed="left"
align="center"
>
</el-table-column>
<el-table-column
type="index"
align="center"
:index="indexMethod"
label="序号"
width="55"
fixed="left"
>
</el-table-column>
//进行行的遍历循环contract.tableList表头数据 ,:fixed="item.fixed 表示固定的位置 :render-header="renderHeader 动态对比rules每个的key和 :prop="item.value" 中是否一样,一样表头添加*
<!-- <template> -->
<el-table-column
v-for="(item,index) in contract.tableList"
:key="index"
:label="item.label"
align="center"
:width="item.width"
:prop="item.value"
:fixed="item.fixed"
:render-header="renderHeader"
>
<template slot-scope="scope">
// :prop="'tableData.' + scope.$index + '.'+ [item.value]" 动态关联每个prop
//:rules="contract.rules[item.value]" rules动态添加
<el-form-item
v-if="scope.$index > -1 && item.type==='input'"
:prop="'tableData.' + scope.$index + '.'+ [item.value]"
:rules="contract.rules[item.value]"
>
<!-- -->
<el-input
size="small"
v-model="scope.row[item.value]"
:placeholder="item.label"
></el-input>
</el-form-item>
<el-form-item
v-else-if="scope.$index > -1 && item.type==='number'"
:prop="item.value"
>
<el-input
size="small"
v-model="scope.row[item.value]"
placeholder="请输入"
@input="blurNumberFixed(scope.row[item.value], scope.$index,item.value)"
></el-input>
</el-form-item>
<el-form-item
v-else-if="scope.$index > -1 && item.type==='select'"
:prop="item.value"
>
<el-select
size="small"
v-model="scope.row[item.value]"
placeholder="请选择"
>
<el-option
v-for="(i, k) in item.options"
:key="k"
:label="i.label"
:value="i.value"
>
</el-option>
</el-select>
</el-form-item>
<el-button
v-else-if="item.type==='operateion'"
type="danger"
size="small"
@click.native.prevent="deleteRow(scope.$index, contract.tableData)"
>
删除
</el-button>
<el-form-item
v-else-if="scope.$index > -1 && item.type==='date'"
:prop="item.value"
>
<el-date-picker
size="small"
v-model="scope.row[item.value]"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
</template>
</el-table-column>
<!-- </template> -->
</el-table>
</el-form>
</div>
实现效果: