iview table增加一行减少一行_Vue+element ui实现新增行编辑行删除行

效果图：

源码：

* {

margin: 0;

padding: 0;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

}

body {

font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

font-size: 12px;

line-height: 1.5;

color: #495060;

background-color: #fff;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background-color: #fff;

}

/* 可编辑表格 */

.el-tb-edit .el-input,

.el-tb-edit .el-input-number,

.el-tb-edit .el-select {

display: none;

width: 100%;

}

.el-tb-edit .current-row .el-input,

.el-tb-edit .current-row .el-input-number,

.el-tb-edit .current-row .el-select {

display: inherit;

}

.el-tb-edit .current-row .el-input+span,

.el-tb-edit .current-row .el-input-number+span,

.el-tb-edit .current-row .el-select+span {

display: none;

}

+

ref="demoTable">

{{scope.row.name}}

{{({true:"是",false:"否"})[scope.row.isSB]}}

{{({1:"男",0:"女"})[scope.row.sex]}}

{{scope.row.age}}

{{scope.row.date}}

{{scope.row.address}}

删除

{{JSON.stringify(tableData)}}

var app;

(function () {

app = new Vue({

el: "#app",

data: {

tableData: [{

date: '2018-12-22',

name: '张三',

age: 28,

sex: 1,

isSB: true,

address: '珠海市香洲区大学路怡海苑'

}, {

date: '2018-12-24',

sex: 2,

name: '李四',

isSB: true,

age: 25,

address: '深圳市南山区深南大道1102号'

}],

currentRow: null,

},

methods: {

addDemo() {

var d = {

date: '',

sex: 1,

name: '',

age: 1,

isSB: true,

address: ''

};

app.tableData.push(d);

setTimeout(() => { this.$refs.demoTable.setCurrentRow(d); }, 10);

},

handleCurrentChange(val) {

this.currentRow = val;

},

handleDelete(index, r) {

app.tableData.splice(index, 1)

}

}

});

})()