这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1.表格动态添加，也可删除
<div class="TestWord"> 添加行数保存 删除 </div>
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);<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码网%</span> }, handleDelete(index){ //删除行数 this.tableData.splice(index, 1) }, save(){ //这部分应该是保存提交你添加的内容 console.log(JSON.stringify(this.tableData)) } } }
运行图片
2.编辑表格 （即使input已经修改过，当点击取消时，内容不会变）
<div class="TestWorld"> 保存 <span>{{ scope.row.bookname }}</span> <span>{{ scope.row.bookvolume}}</span> <span>{{scope.row.bookbuyer}}</span> <span>{{scope.row.bookborrower}}</span> <span>{{scope.row.bookbuytime}}</span> 编辑 取消 </div>
vuejs 代码
export default { name:'TestWorld', data() { return { modifyData:[], prevValue:{} } }, mounted(){ this.getData() }, methods:{ getData(){ this.$ajax({ method: 'get', url:'../static/json/1.1.1.json', //{ console.log(JSON.stringify(response.data)) let _data = response.data; let datalength = _data.length; for(let i = 0;i <datalength; i++){ this.$set(_data[i], 'editing', false) } //赋值 this.modifyData = _data; }).catch(function(err){ console.log(err) }) }, handleEdit(index,row){ row.editing = true; console.log(index) this.prevValue = JSON.parse(JSON.stringify(row)); }, handleCancle(index,row){ row.editing = false; let prevContent = this.prevValue.bookname; this.$set(row,"bookname",prevContent); }, savemodify(){ console.log(JSON.stringify(this.modifyData)) } } }
本地的1.1.1.JSON数据
[{“bookname”:”普通高等教育物联网工程专业规划用书：物联网技术概论”,”bookbuytime”: “2016-05-04″,”bookbuyer”: “李晓月”,”bookborrower”: “王小虎”,”bookvolume”:”1″},{“bookname”:”区块链革命：比特币底层技术如何改变货币、商业和世界”,”bookbuytime”: “2016-05-04″,”bookbuyer”: “李晓月”,”bookborrower”: “李小虎”,”bookvolume”:”1″},{“bookname”:”大家一起学配色：数学色彩设计全能书”,”bookbuytime”: “2017-12-04″,”bookbuyer”: “张晓月”,”bookborrower”: “王而虎”,”bookvolume”:”1″}]
如果不用get本地数据，vuejs如下
export default { name:'TestWorld', data() { return { modifyData:[ { bookname: '普通高等教育物联网工程专业规划用书：物联网技术概论', bookbuytime: '2016-05-04', bookbuyer: '李晓月', bookborrower: '王小虎', bookvolume: '1', editing: false }, { bookname: '区块链革命：比特币底层技术如何改变货币、商业和世界', bookbuytime: '2016-05-04', bookbuyer: '李晓月', bookborrower: '李小虎', bookvolume: '1', editing: false }, { bookname: '大家一起学配色：数学色彩设计全能书', bookbuytime: '2017-12-04', bookbuyer: '张晓月', bookborrower: '王而虎', bookvolume: '1', editing: false } ], prevValue:{} } }, methods:{ handleEdit(index,row){ //编辑 row.editing = true; console.log(index) this.prevValue = JSON.parse(JSON.stringify(row)); }, handleCancle(index,row){ //取消 row.editing = false; let prevContent = this.prevValue.bookname; this.$set(row,"bookname",prevContent); }, savemodify(){ console.log(JSON.stringify(this.modifyData)) } } }
运行图
3.批量删除行数
<div class="TestWorld"> {{ scope.row.date }} <div style="margin-top: 20px"> 批量删除取消选择</div></div>
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 有关验证的代码，看上面，持续更新~
以上就是vuejs element table 表格添加行,修改,单独删除行,批量删除行操作的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
转载请注明原文链接：vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
