Element-UI 表格中含有form表单提交
form表单中需要提交表格中的数据，并且验证：
使用el-form包裹表格，实现代码如下
1，HTML代码，el-table标签放在es-form标签内
<el-form
ref="form"
:inline="true"
:model="form"
size="small"
:rules="rules"
>
<el-table
ref="table"
:data="form.stockList"
style="width: 100%"
max-height="500"
row-key="id"
border
:header-cell-style="{
background: '#F2F6FA',
color: '#555555',
'text-align': 'center',
}"
>
<el-table-column label="库位编号" align="center" width="200">
<template slot-scope="scope">
<el-form-item
:rules="rules.positionNo"
:prop="'stockList.' + scope.$index + '.positionNo'"
>
<el-input
size="mini"
v-model="scope.row.positionNo"
placeholder="请输入库位编号"
maxlength="20"
show-word-limit
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="库位类型" align="center">
<template slot-scope="scope">
<el-form-item
:rules="rules.positionType"
:prop="'stockList.' + scope.$index + '.positionType'"
>
<el-select
size="mini"
v-model="scope.row.positionType"
placeholder="请选择"
>
<el-option label="地堆" :value="1"></el-option>
<el-option label="货架" :value="2"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="仓库名称" align="center">
<template slot-scope="scope">
<el-form-item
:rules="rules.houseId"
:prop="'stockList.' + scope.$index + '.houseId'"
>
<el-select
v-model="scope.row.houseId"
filterable
remote
reserve-keyword
placeholder="请输入仓库名称"
:remote-method="getProductHouseItemList"
:loading="romoteLoading"
@change="
(id) => {
houseChange(scope.$index, id);
}
"
>
<el-option
v-for="item in productHouseList"
:key="item.id"
:label="item.houseName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="库区名称" align="center">
<template slot-scope="scope">
<el-form-item
:rules="rules.stockAreaId"
:prop="'stockList.' + scope.$index + '.stockAreaId'"
>
<el-select
size="mini"
v-model="scope.row.stockAreaId"
placeholder="请选择"
>
<el-option
:label="item.areaName"
:value="item.id"
v-for="item in areaList"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-row class="handle-table-box">
<el-button
size="mini"
type="primary"
@click="handleAdd(scope.$index, scope.row)"
>
添加
</el-button>
<el-button
v-if="scope.$index > 0"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</el-form>
2，data中定义数据
const DEFAULT_FORM = {
stockList: [
{ positionNo: "", positionType: "", houseId: "", stockAreaId: "" },
],
};
data() {
return {
form: Object.assign({}, DEFAULT_FORM, {})
}
}
3，在methods中定义添加删除数据方法（因为我的需求是点击哪一条数据就复制哪一条数据到该数据下面，所以我用splice实现）
handleAdd(index, row) {
this.form.stockList.splice(index + 1, 0, { ...row });
},
handleDelete(index) {
this.form.stockList.splice(index, 1);
}
4，在methods中定义重置表单的方法，当弹框取消或者点击添加完成后调用此方法
reset() {
// 默认保存一个
this.form = {
stockList: [
{ positionNo: "", positionType: "", houseId: "", stockAreaId: "" }
]
};
this.$nextTick(() => {
// 清空验证规则
this.$refs.form.resetFields();
});
}
