vue 使用 elementui 双击单元格修改数据
【代码】vue 使用 elementui 双击单元格修改数据。
·
cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
具体实例:
<template>
<div>
<el-table :data="list" @cell-dblclick="editTable"> //双击修改数据cell-dblclick
<el-table-column
label="id"
prop="id"
/>
<el-table-column
label="名称"
prop="name"
/>
<el-table-column
label="排序"
prop="sort"
>
<template v-slot="scope">
<el-input
@blur="changeSort(scope.row)"
@keyup.enter.native="changeSort(scope.row)"
v-show="scope.row.editor"
:pattern="/^[0-9]*$/"
v-model.number="scope.row.sort"/>
<span v-show="!scope.row.editor">{{ scope.row.sort }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
params: {} //存储即将要修改的值
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.list = [
{id: 1, name: 'aaa', editor: false, sort: 1},
{id: 2, name: 'bbb', editor: false, sort: 2},
{id: 3, name: 'ccc', editor: false, sort: 3}
]
},
editTable(row, column, cell, event) {
//取消隐藏
cell.children[0].children[0].style = {'display': ''};
//获取该dom元素
let cellInput = cell.children[0].children[0].children[0];
//获取焦点
cellInput.focus()
row.editor = true //用来判断是否显示编辑框
this.params = { //将即将要修改的值存储进来
id: row.id,
sort: row.sort
}
},
changeSort(row) {
let params = { //修改后的值
id: row.id,
sort: row.sort
}
//若修改前后的数据一致,则认为未修改,不走方法
if (params.id === this.params.id && params.sort === this.params.sort) {
row.editor = false //不显示编辑框
} else {
//走方法修改并关闭编辑框
// testUpdate(params).then(response => {
// if (response.code === 200) {
// row.editor = false
// this.$modal.msgSuccess('修改成功')
// }
// })
}
},
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)