vue动态添加表单数据至表格中
vue动态添加表单数据至表格中<div><el-card><div slot="header" class="tm"><span>报废信息</span></div><!-- 表单 --><!-- 时间设置 -->
·
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 对其进行转换并使其具有响应式。
更多推荐
已为社区贡献1条内容
所有评论(0)