ElementUI table组件实现点击单元格可编辑

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.3/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tableData" border style="width: 100%" @cell-click="cellClick">
<el-table-column label="日期" width="180">
<template scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180" >
<template scope="scope">
<el-input v-model="scope.row.name" v-if="scope.row.seen"

@blur="loseFcous(scope.$index, scope.row)" > </el-input>

<span style="margin-left: 10px" v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>

</el-table>
</template>
</div>

JS

var Main = {
data() {

return {
tableData: [{
seen:false,
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
seen:false,
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
seen:false,
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
seen:false,
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {


loseFcous(index, row) {
debugger
row.seen=false;
},
cellClick(row, column) {
debugger
row.seen=true;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

说明

针对上面代码的说明下，因为我想不出其他方式就想了，在column下加了一个输入框，还有一个span标签，然后通过 v-if和v-else控制显示谁，给表格加了一个cell-click单元格点击事件，由于我在下面的每条数据中都加了一个seen=false属性，然后v-if取之于每行数据的seen的值，所以当数据加载后，默认显示是span标签，当点击点击事件的时候通过改变当前行的seen属性为true当前单元的v-if值为true就显示input框了，然后在编辑input框值，又在input框上加了一个失去焦点的事件，当编辑完失去焦点改变当前行seen的值再显示span标签。大致原理就是这样，希望能对初入elementUI小伙伴有所帮助，有不合理的地方也希望大神给以指出。

效果图