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的動態綁定表頭和可編輯功能就好了,還有許多不足請大神多多指教。

后續會添加一些文字說明等..  今天忙就先簡單寫一下。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM