@
VUE 一键添加一排输入框
添加模板
创建一个表格(四列),按钮的作用是在表格中添加一行数据(包括删除实现)
<div class="table_box">
<div>
<el-button @click="addExperienceData">添加一行</el-button>
<el-table ref="table" :border="true" style="width:100%;height:100%" :data="experienceData">
<el-table-column prop="name" :label="$t('addition.directRequire.noList')">
<template slot-scope="scope">
<el-select v-model="experienceData[scope.$index].name" placeholder="请选择"
size="small">
<el-option v-for="item in optionsV2" :key="item.value"
:label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="age" :label="$t('addition.directRequire.invoiceNo')">
<template slot-scope="scope">
<el-input type="textarea" autosize placeholder="请输入内容"
v-model="experienceData[scope.$index].age">
</el-input>
</template>
</el-table-column>
<el-table-column prop="age" :label="$t('addition.directRequire.AmountIncludeTaxCNY')">
<template slot-scope="scope">
<el-input type="textarea" autosize placeholder="请输入内容"
v-model="experienceData[scope.$index].post">
</el-input>
</template>
</el-table-column>
<el-table-column prop="age" :label="$t('addition.directRequire.taxCNY')">
<template slot-scope="scope">
<el-input type="textarea" autosize placeholder="请输入内容"
v-model="experienceData[scope.$index].number">
</el-input>
</template>
</el-table-column>
<el-table-column prop="age" :label="$t('addition.directRequire.AmountEncludeTaxCNY')">
<template slot-scope="scope">
<el-button @click="deleteRoweExperienceData(scope.$index)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
功能实现
// 实际功能就是push一行experienceData
data() {
return {
experienceData:[],
}
methods: {
addExperienceData(){
this.experienceData.push({});
},
deleteRoweExperienceData(index){
this.experienceData.splice(index, 1);
},