element-ui的table动态生成表头和数据,且表中数据可编辑

可参考:https://blog.csdn.net/zeng092210/article/details/91385673

可参考:https://blog.csdn.net/zeng092210/article/details/83933053

1.实现表头的动态渲染

 

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

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

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

 // 双击修改 弹出input
            tableDbEdit(row, column, cell, event) {
                debugger
                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;
                    };
                }
            },

  2.添加点dialog的小技巧:

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

  解决方案:

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

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

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

posted @ 2018-07-19 13:21  丨黑寡妇丨  阅读(39221)  评论(1编辑  收藏  举报