VUE ElementUI 表格 双击 编辑提交
使用 ele-table 的时候，有时需要点击一个单元格，然后弹出 input 进行编辑，我们使用 他的 cell-dblclick 事件
cell-dblclick 事件
当某个单元格被双击时会触发该事件，参数：row, column, cell, event
可以通过带你这四个参数看看
<el-table @cell-dblclick="handlecell" >
handlecell(row, column, event, cell) {
console.log(row)
console.log(column)
console.log(event)
console.log(cell)
},点击行，编辑
template 定义
input 根据 click_cell_id 进行比对显示； click_cell_id 的值，是我们的 row 中的 id（唯一）
<el-table-column align="center" label="API名字" >
<template slot-scope="{row}">
<div v-if="row.id === click_cell_id" class="inputcell">
<el-input class="inputcontent" type="text" v-model="row.endpoint_name"></el-input>
<el-button
type="success"
size="mini"
icon="el-icon-edit"
circle
@click="updateApiName(row)"
></el-button>
</div>
<div v-else>
<span>{{ row.endpoint_name }}</span>
</div>
</template>
</el-table-column>script 定义
将 row 中的 id 赋值给 click_cell_id ，这时候 input 就显示了
return {
click_cell_id: '',
}
handlecell(row, column, event, cell) {
this.click_cell_id = row.id //或者 row.index 锁定行
},必须点击单元格，才编辑
上面的方法适合，一行就显示一个 input，如果一行需要显示 多个input 的话，就要再加一个变量
row.id 锁定行， id 为 row 的一个属性 column.label 锁定列
这样就具体的锁定了某一个单元格了
当然 templet 也要做相应改动
<el-table-column align="center" label="API名字" >
<template slot-scope="{row}">
<div v-if="row.id === click_cell_id && click_cell_lable === 'API名字'" class="inputcell">
<el-input class="inputcontent" type="text" v-model="row.endpoint_name"></el-input>
<el-button
type="success"
size="mini"
icon="el-icon-edit"
circle
@click="updateApiName(row)"
></el-button>
</div>
<div v-else>
<span>{{ row.endpoint_name }}</span>
</div>
</template>
</el-table-column>
0顶
0 踩
共 0 条评论