用ElementUI 表格实现双击单元格，将单元格内容变为输入框，输入框失去焦点修改并保存 |
您所在的位置：网站首页 › elementui表格渲染数据 › 用ElementUI 表格实现双击单元格，将单元格内容变为输入框，输入框失去焦点修改并保存 |
用ElementUI 表格实现双击单元格，将单元格内容变为输入框，输入框失去焦点修改并保存
|
思路： 1单元格双击点击事件获取当前单元格的dom 2移除单元格下面class='cell'这个dom 3新增一个input，把child的Dom里面的文字给input 4.给input绑定一个blur事件离开的时候把值给child 5blur事件中最后移除input事件并且重新插入child 备注：dom结构图已经附上在结尾。cell-dblclick是ElementUI双击单元格事件并获取到row, column, cell, event 这4个回调参数 代码： const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, ] //1.单元格双击点击事件获取当前单元格的dom const dblclick=(row,column,cell, event)=>{ let child=cell.firstChild cell.firstChild.remove() const input = document.createElement('input'); input.setAttribute('type', 'text'); cell.appendChild(input); input.value=child.outerText input.addEventListener('blur',(e)=>{ cell.firstChild.remove() console.log(e.target.value) child.innerText=e.target.value cell.appendChild(child); }) }结尾：小菜鸡第一次写，有不足的还请大佬温柔补充。 |
【本文地址】
今日新闻 |
推荐新闻 |