动态添加表格
<el-table ref="partsTable" :data="tableDataParts" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="partso" label="配件1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.partso" placeholder="请输入配件" ></el-input> </template> </el-table-column> <el-table-column property="numo" label="配件数量1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.numo" placeholder="请输入数量" ></el-input> </template> </el-table-column> <el-table-column property="partst" label="配件1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.partst" placeholder="请输入配件" ></el-input> </template> </el-table-column> <el-table-column property="numt" label="配件数量1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.numt" placeholder="请输入数量" ></el-input> </template> </el-table-column> </el-table> <el-button icon="el-icon-plus" @click="addTableParts" type="primary">
添加配件信息
</el-button> data() { return { objParts: { partso: "", numo: "", partst: "", numt: "" }, tableDataParts: [ { partso: "", numo: "", partst: "", numt: "" }, ], currentRow: null, } }, methods:{ // 添加-配件 addTableParts() { this.tableDataParts.push(JSON.parse(JSON.stringify(this.objParts))); }, handleCurrentChange(val) { this.currentRow = val; }, }
多个表格同时添加
<div style="border:1px solid rgba(204, 204, 204, 0.5); border-radius: 4px;margin:20px 0px" v-for="(col, index) in dynamicTableCol" :key="index" > <el-table ref="allTable" :data="tableDataAll" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" > <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="gong" label="工单号" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.gong" placeholder="请输入工单号" ></el-input> </template> </el-table-column> <el-table-column property="song" label="送修日期" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.song" placeholder="请输入日期" ></el-input> </template> </el-table-column> <el-table-column property="che" label="车牌号" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.che" placeholder="请输入车牌号" ></el-input> </template> </el-table-column> <el-table-column property="cheng" label="送修里程" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.cheng" placeholder="请输入送修里程" ></el-input> </template> </el-table-column> </el-table> <el-table ref="jobTable" :data="tableDataJob" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" > <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="projecto" label="项目1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.projecto" placeholder="请输入项目" ></el-input> </template> </el-table-column> <el-table-column property="nameo" label="维修项目1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.nameo" placeholder="请输入维修项目" ></el-input> </template> </el-table-column> <el-table-column property="projectt" label="项目2" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.projectt" placeholder="请输入项目" ></el-input> </template> </el-table-column> <el-table-column property="namet" label="维修项目3" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.namet" placeholder="请输入维修项目" ></el-input> </template> </el-table-column> </el-table> <el-button icon="el-icon-plus" @click="addTableJob" type="primary">
添加项目信息
</el-button> <el-table ref="partsTable" :data="tableDataParts" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" > <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="partso" label="配件1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.partso" placeholder="请输入配件" ></el-input> </template> </el-table-column> <el-table-column property="numo" label="配件数量1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.numo" placeholder="请输入配件数量" ></el-input> </template> </el-table-column> <el-table-column property="partst" label="配件1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.partst" placeholder="请输入配件" ></el-input> </template> </el-table-column> <el-table-column property="numt" label="配件数量1" width="120"> <template slot-scope="scope"> <el-input clearable v-model="scope.row.numt" placeholder="请输入配件数量" ></el-input> </template> </el-table-column> </el-table> <el-button icon="el-icon-plus" @click="addTableParts" type="primary">
添加配件信息
</el-button> </div> <br /> <el-button icon="el-icon-plus" @click="addTableAll" type="primary">
添加维修记录信息
</el-button> </div> data(){ return{ objAll: { gong: "", song: "", che: "", cheng: "" }, tableDataAll: [ { gong: "", song: "", che: "", cheng: "" } ], objJob: { projecto: "", projectt: "", nameo: "", namet: "" }, tableDataJob: [ { projecto: "", projectt: "", nameo: "", namet: "" } ], objParts: { partso: "", numo: "", partst: "", numt: "" }, tableDataParts: [ { partso: "", numo: "", partst: "", numt: "" } ], currentRow: null, dynamicTableCol: [] } }, methods:{ // 添加全部记录 addTableAll() { this.tableDataJob = [ { projecto: "", projectt: "", nameo: "", namet: "" } ]; this.tableDataParts = [ { partso: "", numo: "", partst: "", numt: "" } ]; this.dynamicTableCol.push(this.objAll); }, // 添加-项目 addTableJob() { this.tableDataJob.push(JSON.parse(JSON.stringify(this.objJob))); }, // 添加-配件 addTableParts() { this.tableDataParts.push(JSON.parse(JSON.stringify(this.objParts))); },
handleCurrentChange(val) {
this.currentRow = val;
},
}
