您的位置：首页 > 编程技术 > js  >  Vue结合Element-UI实现双击单元格编辑

Vue结合Element-UI实现双击单元格编辑

 更新时间：2020年4月22日 09:55  点击：1145

双击事件cell-dblclick 

<template>
//表格也可以写成原生的table
<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
<el-table-column property="order1" label="顺序"></el-table-column>
<el-table-column property="order2" label="装车点">
<template slot-scope="scope">
<el-input v-model="scope.row.order2" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
</el-table> 
</template>
<script>
export default{
data(){
return{}
},
methods:{
tableDbEdit(row, column, cell, event) {
console.log(row, column, cell, event);
if (column.label != "顺序") {
event.target.innerHTML = "";
let cellInput = document.createElement("input");
cellInput.value = "";
cellInput.setAttribute("type", "text");
cellInput.style.width = "80%";
cell.appendChild(cellInput);
cellInput.onblur = function() {
cell.removeChild(cellInput);
event.target.innerHTML = cellInput.value;
};
}
}
}
}
</script>
1, focus那里改动了, 将原先的 el.getElementsByTagName('input')[0].focus() 改成了他注释掉的那一句
el.focus()
2, 将changeInput方法中的
let index = this.tableData.findIndex((item) => {
return item.id === row.id
})
改成了
let index = this.tableData.indexOf(row)


[!--infotagslink--]

相关文章