板料信息除了第一个板料信息是需要用户全量输入的,其他的,只用用户点击一下+号的按钮,自动将上一个板料的信息字段全部带出来回填到对应的字段,内控号、炉批号、钢板号除外
<template>
<div class="editForm">
<h4>板材信息</h4>
<el-form ref="form" inline :model="form" label-width="130px" :validate-on-rule-change="false" class="form">
<el-row style="background: #f7f8f9; margin-top: 20px">
<el-col v-for="(item, index) in invoiceList" :key="item.value" :span="24" style="padding-top: 10px">
<el-form-item label-width="130px">
<span style="margin-left: 55px; margin-right: 5px">带入上一个的数据1</span>
<el-input v-model="item.Rate_Key" style="width: 240px" type="number" clearable />
<span style="margin-left: 55px; margin-right: 5px">带入上一个的数据2</span>
<el-input v-model="item.Price" style="width: 240px" type="number" clearable />
<span style="margin-left: 55px; margin-right: 5px">为空的数据1</span>
<el-input v-model="item.Price1" style="width: 240px" type="number" clearable />
<span style="margin-left: 55px; margin-right: 5px">为空的数据2</span>
<el-input v-model="item.Price2" style="width: 240px" type="number" clearable />
<!-- 添加 -->
<el-button
style="
margin-left: 25px;
background: rgba(41, 141, 255, 0.08);
color: #298dff;
border: 1px solid #298dff;
border-radius: 4px;
"
icon="el-icon-plus"
@click="addInvoices(index)"
/>
</el-form-item>
<!-- 删除 -->
<el-button
v-if="index != 0"
style="
margin-left: 25px;
background: rgba(251, 107, 127, 0.08);
color: #fb6b7f;
border: 1px solid #fb6b7f;
border-radius: 4px;
"
icon="el-icon-minus"
@click="delInvoices(index)"
/>
</el-col>
</el-row>
<el-form-item>
<el-button @click="summit">获取数据</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
invoiceList: [{}],
form: {}
}
},
created() {},
mounted() {},
methods: {
addInvoices(currentIndex) {
// 自动将上一个板料的信息字段全部带出来回填到对应的字段,内控号、炉批号、钢板号除外
console.log(currentIndex) //拿到点击的index
console.log(this.invoiceList);
this.invoiceList.forEach((item,index)=>{
if(currentIndex===index){
this.invoiceList.push({
Rate_Key:item.Rate_Key,
Price:item.Price,
})
}
})
},
delInvoices(index) {
this.invoiceList.splice(index, 1)
},
summit() {
console.log(this.invoiceList)
}
}
}
</script>
<style scoped lang='scss'>
</style>
1.加入到当前索引的后面
addInvoices(currentIndex) {
// 自动将上一个板料的信息字段全部带出来回填到对应的字段,内控号、炉批号、钢板号除外
console.log(currentIndex) //拿到点击的index
console.log(this.invoiceList)
// this.invoiceList.forEach((item,index)=>{
// if(currentIndex===index){
// this.invoiceList.push({
// Rate_Key:item.Rate_Key,
// Price:item.Price,
// })
// }
// })
var currentInvoice = this.invoiceList[currentIndex]
console.log(currentInvoice);
// 复制当前板料
var copiedInvoice = {
Rate_Key: currentInvoice.Rate_Key,
Price: currentInvoice.Price
// 这里可以添加其他字段,依次类推
}
// 将复制的当前板料插入到当前索引位置的后面
this.invoiceList.splice(currentIndex + 1, 0, copiedInvoice)
},
2.加入到当前数组的最后面
addInvoices(currentIndex) {
// 自动将上一个板料的信息字段全部带出来回填到对应的字段,内控号、炉批号、钢板号除外
console.log(currentIndex) //拿到点击的index
console.log(this.invoiceList);
this.invoiceList.forEach((item,index)=>{
if(currentIndex===index){
this.invoiceList.push({
Rate_Key:item.Rate_Key,
Price:item.Price,
})
}
})
},