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 ...
随机推荐
- Struts1入门实例(简单登录)
Struts1入门实例(简单登录) 现在开始加入公司的核心项目,但由于项目开发比较早,所以使用的技术不是很新潮,前台用的还是struts1. 虽然不是什么新技术,但仍可以从中学到好多东西的.花了一个晚 ...
- [Be a Coding Plasterer] Components 1:get Basic Things
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Written In The Font I a ...
- Android UI(一)Layout 背景局部Shape圆角设计
Jeff Lee blog: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...
- bootbox.js官方文档
简介 Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事 ...
- 第8章 CentOS包管理详解
8.1 Linux上构建C程序的过程 在说明包相关的内容之前,我觉得有必要说一下在Linux上构建一个C程序的过程.我个人并没有学习过C,内容总结自网上,所以可能显得很小白,而且也并非一定正确,只希望 ...
- C语言学习之assert
C语言学习之assert assert (编程术语) 编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作是异常处理的一种高级形式.断言表示为一些布尔表达式,程序员相信 ...
- μC/OS-II 创建一个任务的流程
1. 声明任务的优先级.任务堆栈的大小及任务函数 #define LED_TASK_PRIO 6 #define LED_STK_SIZE 64 void led_task(void *pdata); ...
- 第一册:lesson ninety one.
原文: Poor lan. Has lan sold his house yet? Yes,he has. He sold it last week. Has he moved to his new ...
- 使用wubi安装ubuntu14.04出现的常见错误的解决办法
花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot download the metalink and therefore the ISO”错误,解决后,又报“ ...
- UWP: 妙用自定义 Action 以简化并重用代码
相信每一位 App 开发者,在开发过程中,都会有一些代码被反复用到,比如:复制文本,打电话,发短信,发邮件,给应用添加评论等等.在项目之间复制这些代码段,实在不是一个好办法,所以大家可能会把这些代码放 ...