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 ...
随机推荐
- HashMap在JDK1.7中可能出现的并发问题
在JDK1.7及以前中,如果在并发环境中使用HashMap保存数据,有可能会产生死循环的问题,造成cpu的使用率飙升.之所以会发生该问题,实际上就是因为HashMap中的扩容问题. HashMap的实 ...
- 06 使用Tensorflow拟合x与y之间的关系
看代码: import tensorflow as tf import numpy as np #构造输入数据(我们用神经网络拟合x_data和y_data之间的关系) x_data = np.lin ...
- SpringCloud学习5-如何创建一个服务提供者provider
前几篇主要集中在注册中心eureka的使用上,接下来可以创建服务提供者provider来注册到eureka. demo源码见: https://github.com/Ryan-Miao/spring- ...
- 基于FineUIMVC的代码生成器(传统三层)v1.0
三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...
- Go Web:RESTful web service示例
RESTful架构的简介 web服务的架构模式主要有2种:SOAP和REST.SOAP和REST都回答了同一个问题:如何访问web服务. SOAP风格的程序是功能驱动的,要借助xml来传递数据,明确表 ...
- oracle9i的erp数据库无法正常关闭的解决方法。
oracle9i版本的ERP数据库无法正常关闭. 场景描述:oracle9i数据库正常关闭的时候,hang住在一个地方无法正常关闭. 解决思路:查看alert日志,分析问题. [oraprod@erp ...
- 分布式系统监视zabbix讲解七之分布式监控--技术流ken
分布式监控 概述 Zabbix通过Zabbix proxy为IT基础设施提供有效和可用的分布式监控 代理(proxy)可用于代替Zabbix server本地收集数据,然后将数据报告给服务器. Pro ...
- 南大算法设计与分析课程OJ答案代码(5)--割点与桥和任务调度问题
问题 A: 割点与桥 时间限制: 1 Sec 内存限制: 5 MB提交: 475 解决: 34提交 状态 算法问答 题目描述 给出一个无向连通图,找到所有的割点和桥 输入 第一行:点的个数,如果点 ...
- OpenCV入门之获取验证码的单个字符(二)
在文章 OpenCV入门之获取验证码的单个字符(字符切割)中,介绍了一类验证码的处理方法,该验证码如下: 该验证码的特点是字母之间的间隔较大,很容易就能提取出其中的单个字符.接下来,笔者将会介绍如 ...
- WebApi HTTP Put 405 Method not allowed
总结列表: 1. There is already an open DataReader associated with this Connection which must be closed fi ...