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的动态绑定表头和可编辑功能就好了，还有许多不足请大神多多指教。

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

element-ui的table动态生成表头和数据，且表中数据可编辑的更多相关文章

（Element UI 组件 Table）去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...
vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
vue+element ui 的tab 动态增减，切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
Element UI的Table用法
Table 表格用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格基 2016-05-02 王小虎上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
tabcontrol动态生成选项卡，并且在选项卡中添加窗体
http://blog.csdn.net/zx13525079024/article/details/6084733 今天在论坛上看到有人问到,如果在点击TRVEVIEW时动态生成tabcontrol ...
element ui 合计/table show-summary
在el-table 上面加上show-summary就可以对table的数据进行合计但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...
element ui里面table分页,页数从0开始的怎么做？
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...

随机推荐

js数组中indexOf/filter/forEach/map/reduce详解
今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...
nodejs 小爬虫
编写爬虫示例: var http = require('http'); var cheerio = require('cheerio'); var url = 'http://www.cnblogs. ...
Asp.net下载文件
网站上的文件是临时文件, 浏览器下载完成, 网站需要将其删除. 下面的写法, 文件读写后没关闭, 经常删除失败. /// <summary> /// 下载服务器文件,参数一物理文件路径(含 ...
仿UC天气下拉和微信下拉眼睛头部淡入淡出--第三方开源--PullLayout
Android-PullLayout是github上的一个第三方开源项目,该项目主页是:https://github.com/BlueMor/Android-PullLayout 原作者项目意图实现类 ...
DataTable 导出到 Excel 类
底层类: #region DataTable 导出到 Excel /// <summary> /// DataTable 导出到 Excel /// </summary> // ...
java中修饰符及其用法
1. java中的修饰符 a. 权限修饰符 private,默认的,protected,public b. 状态修饰符 static,final c. 抽象修饰符 abstract 2. 类修饰符 p ...
Itext中根据html生成Word文件,包含图片
package cn.com.wzf; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.Str ...
JS JSON对象相关
1.多对象合并将2个或2个以上对象(object{....})中的属性进行合并,即最后合并为一个object{.....} 解决办法:Object.assign 方法 var form = {nam ...
C#基础知识回顾-- 属性与字段
今天在公交车上,突然想属性和字段到底有什么区别?很多字段属性都存在 get{}和set{} 和普通的变量没什么区别(可读可写) 我就感觉属性就是给字段一个多的选择方式,有的字段是不允许更改的.. 刚写 ...
index-document-shard
1.index.shard.document理解: a.每个index包含有多个document,index采用数据路由将document存放在shard中, b.算法(数据路由): shard = ...

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

element-ui的table动态生成表头和数据，且表中数据可编辑的更多相关文章

随机推荐

热门专题