zoukankan      html  css  js  c++  java
  • 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的动态绑定表头和可编辑功能就好了,还有许多不足请大神多多指教。

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

  • 相关阅读:
    apk逆向工具总结
    DAY...
    DAY1-Flask项目
    Django笔记
    DAY8-Python学习笔记
    DAY7-Python学习笔记
    DAY6-Python学习笔记
    DAY5-Python学习笔记
    DAY4-Python学习笔记
    DAY3-Python学习笔记
  • 原文地址:https://www.cnblogs.com/zeng2210/p/9335243.html
Copyright © 2011-2022 走看看