ElementUI table表格组件实现双击编辑单元格失去焦点还原,支持多单元格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在使用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
}
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)