vue动态添加表单数据至表格中

vue动态添加表单数据至表格中

 <div>
        <el-card>
            <div slot="header" class="tm">
                <span>报废信息</span>
            </div>
            <!-- 表单 -->
                <!-- 时间设置 -->
                <el-row>
                    <!-- <el-col :span="3" :offset="18"><div><span class="demonstration">请选择年份</span></div></el-col>
                    <el-col :span="3">
                        <el-date-picker v-model="year" type="year" size="mini" class="date" style="width: 100px"  value-format="yyyy">
                        </el-date-picker>
                    </el-col> -->
                </el-row>

                <!-- 1、表单 -->
                <el-button type="primary" class="add-btn" @click="dialogVisible = true">添加</el-button>

                <el-table :data="tableData" style="width: 80%" stripe max-height="500" border ref="Table">
                    <el-table-column prop="type" label="一、维修费" align="center">
                    </el-table-column>
                    <el-table-column prop="moneyAmount" label="金额" align="center">
                    </el-table-column>
                    <el-table-column prop="AccountBook" label="账册号" align="center">
                    </el-table-column>
                    <el-table-column prop="documentType" label="凭证类型" align="center">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                          <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                              移除
                            </el-button>
                          </template>
                    </el-table-column>
                </el-table>

                <el-dialog title="添加维修费" :visible.sync="dialogVisible" width="30%" :show-close="false">
                    <!-- 内容主体区 -->
                    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"  label-position="left">
                      <el-form-item label="项目名" prop="type">
                        <el-input v-model="addForm.type"></el-input>
                      </el-form-item>
                      <el-form-item label="金额" prop="moneyAmount">
                        <el-input v-model="addForm.moneyAmount"></el-input>
                      </el-form-item>
                      <el-form-item label="账册号" prop="AccountBook">
                        <el-input v-model="addForm.AccountBook"></el-input>
                      </el-form-item>
                      <el-form-item label="凭证类型" prop="documentType">
                        <el-input v-model="addForm.documentType"></el-input>
                      </el-form-item>
                      <!-- <el-form-item label="凭证类型" prop="pic">
                        <el-upload class="upload-demo" action="" :on-remove="handleRemove" list-type="picture" :multiple="false" :http-request="uploadImg">
                        <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item> -->
                    </el-form>
                    <!-- 底部区 -->
                    <span slot="footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="addRow(addForm)">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 表单 -->
                <!-- 按钮 -->
                    <div class="btns">
                        <el-button type="primary" @click="resetForm">提交</el-button>
                    </div>
        </el-card>
    </div>

export default {
  data () {
    return {
      tableData: [],
      // 控制添加维修费对话框的显示与隐藏
      dialogVisible: false,
      // 添加维修费表单数据
      addForm: {
        type: '',
        moneyAmount: '',
        AccountBook: '',
        documentType: '',
        index: 0
      },
      // 添加维修费表单验证
      addFormRules: {
        type: [{ required: true, message: '请输入费用名称', trigger: 'blur' }],
        moneyAmount: [{ required: true, message: '请输入金额数', trigger: 'blur' }],
        AccountBook: [{ required: true, message: '请输入账册号', trigger: 'blur' }],
        documentType: [{ required: true, message: '请输入账册号', trigger: 'blur' }]
      },

      // 其他支出相关数据
      tableData1: [],
      // 控制添加维修费对话框的显示与隐藏
      dialogVisible1: false,
    }
  },
  methods: {
    // 提交表格数据
    async resetForm () {
      const test = this.tableData
      // console.log(test)
      const atest = this.tableData1
      // console.log(atest)
      // 将两个数组合为一个数组
      const table = test.concat(atest)
      console.log(table)
    },
    // 删除费用表格的当前行数据
    deleteRow (index, rows) {
      rows.splice(index, 1)
      this.addForm.index--
    },
    // 确定按钮  添加 费用表单 数据到 表格 中
    addRow (addForm) {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return this.$message.warning('表单填写有误，请检查！')
        this.$message.success('添加成功！')
        console.log(addForm)
        // this.$set(target,key,value)
        // target:要更改的数据源（可以是一个对象或者数组）
        // key:要更改的具体数据 （索引）
        // value: 重新赋的值 
        // 当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
        this.$set(this.tableData, this.addForm.index, { type: this.addForm.type, moneyAmount: this.addForm.moneyAmount, AccountBook: this.addForm.AccountBook, documentType: this.addForm.documentType, project: 1, school: this.school, years: this.year })
        this.addForm.index++
        this.addForm.type = ''
        this.addForm.moneyAmount = ''
        this.addForm.AccountBook = ''
        this.addForm.documentType = ''
        this.dialogVisible = false
      })
    }
  }
}

.el-card {
    position: relative;
    width: 80%;
    padding-bottom: 100px;
}

.tm {
  text-align: center;
  font-size: 20px;
}

.btns {
    width: 200px;
    position: absolute;
    right: 0px;
    bottom: -9px;
    display: flex;
    padding-bottom: 20px;
    justify-content: space-around;
    div {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 15px;
    }
    div:hover {
        color: #409EFF;
    }
}
.add-btn {
    position: absolute;
    right: 29px;
    top: 135px;
}

.add-btn1 {
    position: relative;
    left: 887px;
    top: 63px;
}

.el-table {
    margin-top: 20px;
}

.el-form-item {
    margin-right: 30px
}

this.$set（全局 Vue.set 方法）

this.$set(target,key,value)

target:要更改的数据源（可以是一个对象或者数组）
key:要更改的具体数据 （索引）
value: 重新赋的值
注： 当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
Vue 无法检测到 property 的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此必须在 data 对象中存在一个 property，以便 Vue 对其进行转换并使其具有响应式。