模板

<el-form label="" class="grid-content break_line" prop="batch_list" :rules="rules" ref="batchForm">
                    <el-button type="warning" @click="dialogTableVisible = true" size="mini" style="margin-top:150">分批記錄</el-button>

                    <el-dialog title="分批記錄" :visible.sync="dialogTableVisible">
                        <el-table :data="gridData" show-summary :summary-method="getSummaries">
                            <el-table-column type="index" label="批次號" width="150" prop='batch_no'></el-table-column>
                            <el-table-column prop='weight' label="重量" width="200">
                                <template slot-scope="scope">
                                    <div slot="reference">
                                        <el-input size="mini" v-model="scope.row.weight" ref='weight'></el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop='quantity' label="件數(shù)" width="200">
                                <template slot-scope="scope">
                                    <div slot="reference">
                                        <el-input size="mini" ref='quantity' v-model="scope.row.quantity"></el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop='arrive_time' label="到達時間" width="200">
                                <template slot-scope="scope">
                                    <div slot="reference">
                                        <el-input size="mini" ref='arrive_time' v-model="scope.row.arrive_time" @keyup.enter.native="volumeAdd(scope.$index,scope.row)"></el-input>
                                    </div>
                                </template>
                            </el-table-column>

                        </el-table>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="total">確 定</el-button>
                        </div>
                    </el-dialog>
                </el-form>

交互

import { getTime } from "../../utils/time"
export default {
      data() {
      return {
            detailInfo: {
                params: {
                batch_list: [ //分批記錄
                        {
                            quantity: '', //件數(shù)
                            weight: '', //計重
                            arrive_time: '', //到達時間
                        }
                    ],
                 }
             },
            gridData: [{
                quantity: '', //件數(shù)
                weight: '', //計重
                arrive_time: '', //到達時間
            }], //分批記錄
    }
},
mounted() {
      this.gridData[0].arrive_time = getTime()
},
methods: {
//計算屬性總和
getSummaries(param) {
            const {
                data
            } = param;
            let sumInfo = data.reduce((item1, item2) => {
                let getquantity = Decimal.add([item1.quantity || 0, item2.quantity || 0]).toNumber()
                let getWeight = Decimal.add([item1.weight || 0, item2.weight || 0]).toNumber()

                return {
                    quantity: getquantity,
                    weight: getWeight,
                }
            }, {
                weight: 0,
                quantity: 0
            })
            this.getquantity = sumInfo.quantity
            this.getWeight = sumInfo.weight
            return ['合計', sumInfo.weight, sumInfo.quantity]

        },
                  //  存儲數(shù)據(jù)
        total() {
            this.detailInfo.params.batch_list = [{
                quantity: '', //件數(shù)
                weight: '', //計重
                arrive_time: '',
            }]
            this.dialogTableVisible = false
            //存儲數(shù)據(jù)JSON.stringify將javascript值轉(zhuǎn)化為字符串
            this.gridDataCopy = JSON.parse(JSON.stringify(this.gridData))
        },
      //回車后添加下一行
        volumeAdd(index, row) {
            if(index == this.gridData.length - 1) {
                this.gridData.push({
                    weight: '',
                    quantity: '',
                    arrive_time: '',
                })
                this.$nextTick(function() {
                    this.$refs['weight'].focus()
                })
            }
        },

       //取消后遂铡，保存的數(shù)據(jù)還在，未保存的數(shù)據(jù)清空搁宾。  也就是點擊取消后讓數(shù)據(jù)=保存的數(shù)據(jù)
        cancel() {
            this.dialogTableVisible = false
            this.gridData = JSON.parse(JSON.stringify(this.gridDataCopy))
        },
      },
     }