Vue+ElementUI项目笔记（点击确定保存数据，点击取消删

模板

<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="件数" 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: '', //件数
                            weight: '', //计重
                            arrive_time: '', //到达时间
                        }
                    ],
                 }
             },
            gridData: [{
                quantity: '', //件数
                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]

        },
                  //  存储数据
        total() {
            this.detailInfo.params.batch_list = [{
                quantity: '', //件数
                weight: '', //计重
                arrive_time: '',
            }]
            this.dialogTableVisible = false
            //存储数据JSON.stringify将javascript值转化为字符串
            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()
                })
            }
        },

       //取消后，保存的数据还在，未保存的数据清空。  也就是点击取消后让数据=保存的数据
        cancel() {
            this.dialogTableVisible = false
            this.gridData = JSON.parse(JSON.stringify(this.gridDataCopy))
        },
      },
     }