vue可编辑table

//表格内进行编辑
            tableDbEdit(row, column, cell, event) {
                event.target.innerHTML = "";
                let cellInput = document.createElement("input");
                if(column.label=='明细'){
                    cellInput.value = row.goods_name;
                }else if(column.label=='金额'){
                    cellInput.value= row.amount;
                }
                cellInput.setAttribute("type", "text");
                cellInput.style.width = "80%";
                cellInput.style.height = "2em";
                if(this.childNode==false){
                    cell.appendChild(cellInput);
                }
                this.childNode=true;
                cellInput.focus();//焦点
                cellInput.onblur= function() {//j焦点移除
                    cell.removeChild(cellInput);
                    //重新赋值
                    if(column.label=='明细'){
                        row.goods_name = cellInput.value ;
                    }else if(column.label=='金额'){
                        if (vdt.priceFormat("金额",cellInput.value) == false){
                            return false;
                        }
                        row.amount = cellInput.value ;
                    };
                    event.target.innerHTML = cellInput.value;
                };

            },
v-on:cell-click="tableDbEdit"

猜你喜欢

转载自www.cnblogs.com/SimonHu1993/p/10400824.html