完成途中遇到的問題：
當使用table嵌套form表單的時候，遇到了下面問題：
- 如何在table中使用form表單
- table中使用form表單該如何使用校驗
- 如何動態新增一行表單，並綁定數據(若直接綁定form.key，會造成全部表單都只綁定在同一個對象中)
最後完成的代碼如下：
<template>
<div class="manage">
<div class="manage-header">
<el-button type="primary" @click="addTable">+添加欄位</el-button>
</div>
<el-form :model="purchaseForm" ref="purchaseForm" :rules="purchaseForm.rules" inline-message>
<div class="common-tabel">
<!-- 人員管理表格-->
<el-table
:data="purchaseForm.tableData"
:row-class-name="rowClassName"
height="90%"
stripe
row-key="viewId"
style="width: 100%">
<el-table-column label="序号" align="center" prop="id" width="50"></el-table-column>
<el-table-column
prop="p_date"
label="進貨日"
width="160">
<template slot-scope="scope">
<!-- prop的規則: 在普通的form表單中是一個對象,prop是對象的屬性. 表格是由多個對象組成的數組,在寫prop是需要根據索引給值.這里的tableData就相當於對象的屬性 !-->
<!-- rules也要單獨給 -->
<el-form-item
:prop="'tableData.' + scope.$index + '.p_date'"
:rules='purchaseForm.rules.p_date'>
<el-date-picker
v-model="purchaseForm.tableData[scope.row.id-1].p_date"
value-format="yyyy-MM-dd"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop= "company_name"
label="進貨廠商"
width="180">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.company_name'"
:rules='purchaseForm.rules.company_name'>
<el-select v-model="purchaseForm.tableData[scope.row.id-1].company_name" placeholder="請選擇">
<el-option
v-for="item in companyData"
:key="item.companyId"
:label="item.companyName"
:value="item.companyId">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="line_id"
label="線材編號"
width="150">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.line_id'"
:rules='purchaseForm.rules.line_id'>
<el-input v-model="purchaseForm.tableData[scope.row.id-1].line_id"
oninput="value=value.replace(/[^\d]/g,'')"
placeholder="請輸入線材編號">
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="line_type"
label="端子"
width="340">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.line_type'"
:rules='purchaseForm.rules.line_type'>
<el-input v-model="purchaseForm.tableData[scope.row.id-1].line_type"
placeholder="請輸入端子">
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="line_name"
label="品項"
width="340">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.line_name'"
:rules='purchaseForm.rules.line_name'>
<el-input v-model="purchaseForm.tableData[scope.row.id-1].line_name"
placeholder="請輸入品項">
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="total_count"
label="進貨數量"
width="150">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.total_count'"
:rules='purchaseForm.rules.total_count'>
<el-input v-model="purchaseForm.tableData[scope.row.id-1].total_count"
oninput="value=value.replace(/[^\d]/g,'')"
placeholder="請輸入數量">
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="unit_price"
label="進貨單價"
width="150">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.unit_price'"
:rules='purchaseForm.rules.unit_price'>
<el-input v-model="purchaseForm.tableData[scope.row.id-1].unit_price"
oninput="value=value.replace(/[^\d]/g,'')"
placeholder="請輸入單價">
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="addr"
label="操作"
width="120">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="deleteTab(scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" class="submit_btn" @click="submit">提交</el-button>
</div>
</el-form>
</div>
</template>
<script>
import {mapActions, mapState} from "vuex";
export default {
name:'LinePurchase',
data(){
return{
purchaseForm:{
tableData: [{
p_date: '',
company_name: '',
line_id: '',
line_type: '',
line_name: '',
total_count: '',
unit_price: '',
},],
rules: {
company_name: [
{ required: true, message: '請選擇進貨廠商', trigger: 'change' }
],
line_id: [
{ required: true, message: '請輸入線材編號', trigger: 'blur' }
],
line_type: [
{ required: true, message: '請輸入端子', trigger: 'blur' }
],
line_name: [
{ required: true, message: '請輸入品項', trigger: 'blur' }
],
total_count: [
{ required: true, message: '請輸入進貨數量', trigger: 'blur' }
],
unit_price: [
{ required: true, message: '請輸入進貨單價', trigger: 'blur' }
],
}
},
}
},
computed: {
...mapState('data',['goodData','companyData','employeeData','orderData','returnData','countData']),
},
methods: {
...mapActions('data', ['fetchGoodData', 'fetchCompanyData', 'fetchEmployeeData', 'fetchOrderData', 'fetchReturnData']),
...mapActions('line', ['fetchAddLineData']),
//添加一行表單
addTable () {
let newRowData = {
p_date: '',
company_name: '',
line_id: '',
line_type: '',
line_name: '',
total_count: '',
unit_price: '',
}
this.purchaseForm.tableData.push(newRowData);
},
// 提交數據
submit () {
this.$refs.purchaseForm.validate(valid => {
//驗證通過，執行if內的代碼
if(valid){
// 新增新增線材資料
this.fetchAddLineData(this.purchaseForm.tableData);
//清空form表單的數據
setTimeout(() => {
//重置表單數據
this.purchaseForm.tableData = [{
p_date: '',
company_name: '',
line_id: '',
line_type: '',
line_name: '',
total_count: '',
unit_price: '',
},];
this.$refs.purchaseForm.resetFields();
}, 2000);
}
})
},
//回調函數，定義表格的序號，可用來綁定資料數組
rowClassName({row, rowIndex}) {
row.id = rowIndex +1;
},
//刪除一行表格
deleteTab (data) {
//獲取當前行的數組位子
let len = data.id - 1;
//將此數組位子的資料刪除
this.purchaseForm.tableData.splice(len,1);
}
},
created() {
this.fetchCompanyData();
},
}
</script>
<style>
/* 日期选择框的宽度 */
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 140px;
}
.el-form-item {
margin-bottom: auto;
}
.manage {
height: 100%;
}
.manage .manage-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.manage .common-tabel {
position: relative;
height: 80vh;
}
.manage .common-tabel .pager {
position: absolute;
bottom: 40px;
right: 20px;
}
.submit_btn{
margin-left: 1400px;
margin-top: 20px;
}
</style>
轉載請注明來源，歡迎對文章中的引用來源進行考證，歡迎指出任何有錯誤或不夠清晰的表達。可以郵件至 b8954008@gmail.com