可参考: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动态生成表头和数据,且表中数据可编辑的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. 【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍

    下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...

  3. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  4. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  5. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  6. tabcontrol动态生成选项卡,并且在选项卡中添加窗体

    http://blog.csdn.net/zx13525079024/article/details/6084733 今天在论坛上看到有人问到,如果在点击TRVEVIEW时动态生成tabcontrol ...

  7. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  8. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  9. 怎么样使element ui 的table某列变色

    第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...

随机推荐

  1. js数组中indexOf/filter/forEach/map/reduce详解

    今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...

  2. nodejs 小爬虫

    编写爬虫示例: var http = require('http'); var cheerio = require('cheerio'); var url = 'http://www.cnblogs. ...

  3. Asp.net下载文件

    网站上的文件是临时文件, 浏览器下载完成, 网站需要将其删除. 下面的写法, 文件读写后没关闭, 经常删除失败. /// <summary> /// 下载服务器文件,参数一物理文件路径(含 ...

  4. 仿UC天气下拉和微信下拉眼睛头部淡入淡出--第三方开源--PullLayout

    Android-PullLayout是github上的一个第三方开源项目,该项目主页是:https://github.com/BlueMor/Android-PullLayout 原作者项目意图实现类 ...

  5. DataTable 导出到 Excel 类

    底层类: #region DataTable 导出到 Excel /// <summary> /// DataTable 导出到 Excel /// </summary> // ...

  6. java中修饰符及其用法

    1. java中的修饰符 a. 权限修饰符 private,默认的,protected,public b. 状态修饰符 static,final c. 抽象修饰符 abstract 2. 类修饰符 p ...

  7. Itext中 根据html生成Word文件,包含图片

    package cn.com.wzf; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.Str ...

  8. JS JSON对象相关

    1.多对象合并 将2个或2个以上对象(object{....})中的属性进行合并,即最后合并为一个object{.....} 解决办法:Object.assign 方法 var form = {nam ...

  9. C#基础知识回顾-- 属性与字段

    今天在公交车上,突然想属性和字段到底有什么区别?很多字段属性都存在 get{}和set{} 和普通的变量没什么区别(可读可写) 我就感觉属性就是给字段一个多的选择方式,有的字段是不允许更改的.. 刚写 ...

  10. index-document-shard

    1.index.shard.document理解: a.每个index包含有多个document,index采用数据路由将document存放在shard中, b.算法(数据路由): shard = ...