效果图:
源码:
* {
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)
}
}
});
})()