使用el-table的cell-dbclick方法来操作
dbclick(row, column, cell, event) {
// row 当前点击的行， column当前点击的列， cell当前双击的dom， event当前鼠标点击的事件
// 获取字段名
const propert = column.property
if (column.label === '你需要点击的那一列的label') {
// 获取点击之前的值
const beforeVal = event.target.textContent
// 清空之前的值
event.target.textContent = ''
// 把点击的值替换成input
const str = `<div class="cell">
<div
class="el-input"
style="display: flex; justify-content: center; align-items: center"
>
<input
type="text"
placeholder="请输入${column.label}"
class="el-input__inner"
style="margin-right: 10px"
/>
<i class="el-icon-check"></i>
<i class="el-icon-close"></i>
</div>
</div>`
cell.innerHTML = str
// 获取双击后生成的input 层级嵌套会变化
const cellInput = cell.children[0].children[0].children[0]
const check = cell.children[0].children[0].children[1]
const close = cell.children[0].children[0].children[2]
// 把之前的值当默认值传入input
cellInput.value = beforeVal
// 自动获取焦点
cellInput.focus()
// 失去焦点 将input换成之前的span
check.onclick = async () => {
cell.innerHTML = this.saveCellValue(cellInput.value)
// 把输入的值放到字段里
row[property] = cellInput.value
const res = await this.$store.dispatch('调用修改接口', row)
if (res.code === 0) {
this.$message.success(`修改成功`)
}
}
close.onclick = () => {
cell.innerHTML = this.saveCellValue(beforeVal)
}
}
}
