Vue编写编辑html表格,VUE+Element UI实现简单的表格行内编辑效果

demo

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

* {

margin: 0;

padding: 0

}

body {

font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;

overflow: auto;

font-weight: 400;

-webkit-font-smoothing: antialiased;

}

.tb-edit .el-input {

display: none

}

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

display: block

}

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

display: none

}

{{scope.row.date}}

{{scope.row.name}}

{{scope.row.address}}

删除

数据:{{tableData}}

var app = new Vue({

el: '#app',

data: {

tableData: [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1516 弄'

}]

},

methods: {

handleCurrentChange(row, event, column) {

console.log(row, event, column, event.currentTarget)

},

handleEdit(index, row) {

console.log(index, row);

},

handleDelete(index, row) {

console.log(index, row);

}

}

})

根据原理自定义效果