<el-table
:data="
this.tableData.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
)
"
border
fit
height="500px"
highlight-current-row
style="width: 100%"
@cell-dblclick="cellDblclick"
:row-class-name="tableRowClassName"
>
<el-table-column
v-for="(item, i) in cols"
:key="i"
align="center"
:prop="item.prop"
:label="item.label"
>
<template slot-scope="{row }">
<el-input
v-if="cellDoubleClice"
v-model="row[item.prop]"
ref="input"
></el-input>
<span v-else>{{ row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
// 遍历出所有表格行的回调函数
tableRowClassName({ row, rowIndex }) {
row.row_index = rowIndex;
},
// 双击事件触发的函数
cellDblclick(row, column, cell, event) {
console.log(event.bubbles);
// if(row.row_index)
this.cellDoubleClice = event.bubbles;
},
为了实现单元格内的可编辑并保存,并且能够精准定位到当前点击的单元格,你可以按照以下步骤进行操作:
- 在双击事件
cellDblclick
中,添加逻辑以设置cellDoubleClice
为true
,表示该单元格处于可编辑状态。 - 在表格列定义中,使用
slot-scope
来获取每个单元格的数据和属性。 - 根据
cellDoubleClice
的值决定是显示el-input
还是span
元素。 - 当
cellDoubleClice
为true
时,el-input
会显示,使用v-model
来实现表格数据的双向绑定,确保编辑的内容能够被保存。 - 当
cellDoubleClice
为false
时,span
元素会显示,用于展示不可编辑的单元格数据。 - 为了实现精准定位到当前点击的单元格,你可以在
tableRowClassName
中给每行数据添加一个row_index
属性,记录行索引。 - 在双击事件
cellDblclick
中,通过rowIndex
参数获取当前点击的行索引,你可以在此处添加自己的定位逻辑,比如滚动到指定的行或高亮当前行。
请注意以上代码片段中可能存在一些拼写错误或不完整的代码,你需要根据实际情况进行调整和完善。另外,这只是一个示例,你可能需要根据自己的具体需求进行修改和扩展。
标签:index,实现,单元格,event,cellDoubleClice,双击,精准,row From: https://blog.51cto.com/M82A1/8380304