vue中点击按钮,添加和删除一排输入框
<div><el-button @click="addExperienceData">添加经历信息</el-button><el-table :data="experienceData">...
·
<div>
<el-button @click="addExperienceData">添加经历信息</el-button>
<el-table :data="experienceData">
<el-table-column prop="name" label="经历类型">
<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="起止年月">
<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="院校-系-专业(单位-职务)">
<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="毕(结、肄)业">
<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="操作">
<template slot-scope="scope">
<el-button @click="deleteRoweExperienceData(scope.$index)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
js方法:
var vmV2;
vmV2 = new Vue({
el: '#pcV2',
data: {
options: [{
value: '选项1',
label: '当选安徽省政协委员、常委及专委会职务情况'
}, {
value: '选项2',
label: '当选人大、政协、党派、群众团体、委员等情况'
}],
electionData: [],
},
methods: {
addElection() {
this.electionData.push({});
},
deleteRowElection(index) {
this.electionData.splice(index, 1);
},
}
})
效果
更多推荐
已为社区贡献7条内容
所有评论(0)