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();
});
}
