如果只是实现element的table表格数据可编辑请到:https://blog.csdn.net/zeng092210/article/details/91385673

1.实现表头的动态渲染

2.表头label和prop字段都要定义 

3.去判断显示那个数据表

 

4.实现双击的时候在可编辑

// 双击修改 弹出input
           tableDbEdit(row, column, cell, event) {
               console.log(row, column, cell, event);
               if (column.label != "顺序") {
                   let value_event = event.target.innerHTML
                   event.target.innerHTML = "";
                   let cellInput = document.createElement("textarea");
                   cellInput.value = value_event;
                   cellInput.setAttribute("class","input_sty")
                   cellInput.setAttribute("type", "text");
                   cellInput.style.width = "99%";
                   var cellabc = document.getElementsByClassName('cell')
                   cellabc.appendChild(cellInput);
                   cellInput.onblur = function() {
                   cell.removeChild(cellInput);
                   event.target.innerHTML = cellInput.value;
                   };
               }
           },

  5.添加点dialog的小技巧:

    如果el-dialog 的灰色遮罩层跑到弹框的上面了 :

  解决方案:

      给dialog添加:  :modal-append-to-body="false"

简单的一个element-ui的table的动态绑定表头和可编辑功能就好了,还有许多不足请各路大神多多指教。

后续会添加一些文字说明等..  今天忙就先简单写一下。

 

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐