element table 表格添加行，删除行记录
<el-table
:data="tableData"
style="width: 100%"
border>
<el-table-column
prop="bookname"
:label="recoveryOne"
width="140px">
<template slot-scope="scope">
<el-input v-model="scope.row.bookname" type="number"></el-input>
</template>
</el-table-column>
<el-table-column
prop="bookvolume"
:label="recoveryTwo"
width="140px">
<template slot-scope="scope">
<el-input v-model="scope.row.bookvolume" type="number"></el-input>
</template>
</el-table-column>
<el-table-column
prop="bookborrower"
:label="recoveryThree"
width="150px">
<template slot-scope="scope">
<el-input v-model="scope.row.bookborrower" type="number"></el-input>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<button @click="addLine"
class="addBtn"
v-if="scope.$index == tableData.length - 1">
<i class="el-icon-plus"></i>
</button>
<button v-if="tableData.length > 1"
@click="handleDelete(scope.$index, scope.row)"
class="del-btn">
<i class="el-icon-minus"></i>
</button>
</template>
</el-table-column>
</el-table>
export default {
data() {
return {
tableData:[{
bookname: '',
bookborrower: '',
bookvolume:''
}]
}
},
methods:{
addLine(){ //添加行数
var newValue = {
bookname: '',
bookborrower: '',
bookvolume:''
};
//添加新的行数
this.tableData.push(newValue);
},
handleDelete(index){ //删除行数
this.tableData.splice(index, 1)
},
save(){
//这部分应该是保存提交你添加的内容
console.log(JSON.stringify(this.tableData))
}
}
}
