动态表单的动态添加

菜鸡一枚555

已于 2024-04-08 11:19:50 修改

阅读量481

点赞数 24

文章标签： java 前端 javascript

于 2024-04-08 10:59:03 首次发布

本文链接：https://blog.csdn.net/weixin_61978391/article/details/137500158

版权

本文描述了在一个Vue项目中，如何使用表格组件实现板料信息编辑表单的功能，用户只需点击加号按钮，上一条板料的信息会自动填充到当前行，除了内控号、炉批号和钢板号等特殊字段。

摘要由CSDN通过智能技术生成

板料信息除了第一个板料信息是需要用户全量输入的，其他的，只用用户点击一下+号的按钮，自动将上一个板料的信息字段全部带出来回填到对应的字段，内控号、炉批号、钢板号除外

<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,

})

}

})

},