ElementUI table表格组件实现双击编辑单元格失去焦点还原，支持多单元格
在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态，失去焦点时还原表格显示。
实现思路：
- 在数据中增加
isFocus:false.控制是否显示 - 在table中用
@cell-dblclick双击方法
先看效果：
上源码：在表格模板中用scope.row.isFocus && focusLabelName=='姓名1控制多个单元格显示
<el-table :data="tableData" border stripe style="width: 100%" @cell-dblclick="tabClick"><el-table-column prop="date" label="Product Name" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="price" label="姓名1" width="180"><template slot-scope="scope"><el-input v-if="scope.row.isFocus && focusLabelName=='姓名1'" v-focus size="small" v-model="scope.row.price" @change="changeTrafOrigTaxAmount(scope.row)" @blur="blurInput(scope.row)"></el-input><span v-else>{{scope.row.price}}</span></template></el-table-column><el-table-column prop="price" label="姓名2" width="180"><template slot-scope="scope"><el-input v-if="scope.row.isFocus && focusLabelName=='姓名2'" v-focus size="small" v-model="scope.row.price2" @change="changeTrafOrigTaxAmount(scope.row)" @blur="blurInput(scope.row)"></el-input><span v-else>{{scope.row.price2}}</span></template></el-table-column>
</el-table>
方法：
data: function () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',price: 1000,price2: 1000,price3: 1000,isTransfer: true,rate: 0.3,amount: 1000,isFocus: false,}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',price: 1000,isTransfer: false,rate: 0.3,amount: 1000,isFocus: false,}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',price: 1000,price2: 1000,price3: 1000,isTransfer: true,rate: 0.3,amount: 1000,isFocus: false,}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',price: 1000,price2: 1000,price3: 1000,isTransfer: false,rate: 0.3,amount: 1000,isFocus: false,}],focusLabelName:''}},methods: {tabClick(row, column, cell, event){console.log(row, column, cell);row.isFocus = true;this.focusLabelName = column.label;},blurInput(row){row.isFocus = false}}