vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
1.表格动态添加,也可删除
<template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="bookname" label="书名"> <template slot-scope="scope"> <el-input v-model="scope.row.bookname" placeholder="书名"></el-input> </template> </el-table-column> <el-table-column prop="bookvolume" label="册数"> <template slot-scope="scope"> <el-input v-model="scope.row.bookvolume" placeholder="册数"></el-input> </template> </el-table-column> <el-table-column prop="bookbuyer" label="购买者"> <template slot-scope="scope"> <el-input v-model="scope.row.bookbuyer" placeholder="购买者"></el-input> </template> </el-table-column> <el-table-column prop="bookborrower" label="借阅者"> <template slot-scope="scope"> <el-input v-model="scope.row.bookborrower" placeholder="借阅者"></el-input> </template> </el-table-column> <el-table-column prop="bookbuytime" label="购买日期"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.bookbuytime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="购买日期"> </el-date-picker> </template> </el-table-column> <el-table-column prop="bookbuytime" label="购买日期"> <template slot-scope="scope"> <el-button size="mini" type="danger" v-if="!scope.row.editing" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除 </el-button> </template> </el-table-column> </el-table> </div> </template>
vuejs 代码
export default { name:'TestWorld', data() { return { tableData:[{ bookname: '', bookbuytime: '', bookbuyer: '', bookborrower: '', bookvolume:'' }] } }, methods:{ addLine(){ //添加行数 var newValue = { bookname: '', bookbuytime: '', bookbuyer: '', bookborrower: '', bookvolume:'' }; //添加新的行数 this.tableData.push(newValue); }, handleDelete(index){ //删除行数 this.tableData.splice(index, 1) }, save(){ //这部分应该是保存提交你添加的内容 console.log(JSON.stringify(this.tableData)) } } }
运行图片
3.批量删除行数
<template> <div class="TestWorld"> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="batchDelete">批量删除</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </div> </template>
vuejs 代码
export default { name:'TestWorld', data() { return { tableData3: [ { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods:{ toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, batchDelete(){ let multData = this.multipleSelection; let tableData =this.tableData3; let multDataLen = multData.length; let tableDataLen = tableData.length; for(let i = 0; i < multDataLen ;i++){ for(let y=0;y < tableDataLen;y++){ if(JSON.stringify(tableData[y]) == JSON.stringify(multData[i])){ //判断是否相等,相等就删除 this.tableData3.splice(y,1) console.log("aa") } } } }, handleSelectionChange(val) { this.multipleSelection = val; } } }
有关验证的代码,看上面,持续更新~
以上这篇vuejs element table 表格添加行,修改,单独删除行,批量删除行操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持来客网。