在使用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
}
}
