1. 第一步循环 el-table-column

<el-table-column
v-if="item.show"
v-for="(item, index) in tableColumn"
:key="index"
:label="item.name"
:prop="item.value"
align="center"
show-overflow-tooltip
sortable="custom"
/> // this.state.tableColumn:[{name: '客户名', value: 'cusName', show: true}, {name:'年龄', value: 'age', show: true}, {name:'手机号', value: 'phone', show: false}]

2. 第二步  点击按钮动态添加一个(手机号)表头

// 动态表头保存
handleSaveSetTable() {
this.$set(this.tableColumn , 2, { name:'手机号', value: 'phone', show: true })
this.flag = !this.flag
} // 改变this.flag来触发重新做diff运算渲染dom,这样解决了一些固定表头可能出现错乱问题

3.第三步,在表格最外层容器添加key

element动态添加表头的正确姿势的更多相关文章

  1. Sql动态添加字段的正确姿势

    如何给指定表动态添加字段? 一.创建一张表[Tbl_AutoFileds] (tableName表名,fieldName字段名,dataType数据类型,length长度  isnull 是否允许为n ...

  2. Flutter Webview添加Cookie的正确姿势

    场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条:按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一 ...

  3. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

  4. angular.element 动态添加和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  5. easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮

    1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...

  6. 动态添加子视图 UIView 的正确方法

    很多时候哥比较喜欢用代码添加视图,特别是要同时加很多UIView时,而且跟 xib 比起来代码更容易管理,在多人的项目中代码不容易 conflict. 但小牛哥最近发现很多新人都不太清楚正确的使用方法 ...

  7. 【iOS开发】动态添加子视图 UIView 的正确方法

    很多时候哥比较喜欢用代码添加视图,特别是要同时加很多UIView时,而且跟 xib 比起来代码更容易管理,在多人的项目中代码不容易 conflict. 但小牛哥最近发现很多新人都不太清楚正确的使用方法 ...

  8. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  9. element ui table表头动态筛选条件

    本文主要实现:根据el-table表格数据自动生成表头筛选条件的方法,可根据表格数据动态调整. el-table表格的表头增加筛选功能,大家平时都是怎么实现的呢?先看看官方文档的例子: 1 <t ...

随机推荐

  1. Apache服务的主要目录和配置文件详解

    Apache服务的主要目录和配置文件详解 2014-01-14 19:05:14 标签:httpd配置文件详解 apache配置文件 httpd配置文件 apache文件目录 原创作品,允许转载,转载 ...

  2. 分享一个超级好用的SM图床

    分享一个超级好用的SM图床 ​ 大家都知道我是一个喜欢sm Markdown的人,但是Markdown有个很不方便的地方,就是图片的插入,一般用Markdown编辑器(我用的是Typora)直接插入图 ...

  3. OpenCV-Python 霍夫线变换 | 三十二

    目标 在这一章当中, 我们将了解霍夫变换的概念. 我们将看到如何使用它来检测图像中的线条. 我们将看到以下函数:cv.HoughLines(),cv.HoughLinesP() 理论 如果可以用数学形 ...

  4. Vue路由配置history模式

    我的博客: https://github.com/Daotin/fe-notes/issues vue需要node.js吗? 你可以用 script 标签的形式引入vue.min.js 这样的,不需要 ...

  5. link与@import区别整理,一个表格带你了解

    网上有许多link和@import的文章,不过大多比较零散,个人觉得一个表格的话看起来能够直观的表达. 于是制作了如下表格: 关于权重这个存在着一些争议,这次碰巧看到了一篇的博客很好的解释了这个问题, ...

  6. macro

    Hello, 宏定义魔法世界 宏只是在预处理器里进行文本替换,没有类型,不做任何类型检查,编译器可以对相同的字符串进行优化.只保存一份到 .rodata 段.甚至有相同后缀的字符串也可以优化,你可以用 ...

  7. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  8. D - 渣渣仰慕的爱丽丝 HDU - 6249(背包问题变形)

    爱丽丝喜欢集邮.她现在在邮局买一些新邮票. 世界上有各种各样的邮票;它们的编号是1到N.但是,邮票不是单独出售的;必须成套购买.有M套不同的邮票可供选择; 第i套包括编号从li到ri的邮票 .同一枚邮 ...

  9. C语言:static关键字用法

    参考博客:https://blog.csdn.net/guotianqing/article/details/79828100 看个例子: #include <stdio.h> void ...

  10. Go语言笔记(1)变量的定义与赋值

    变量的定义与赋值 在go笔记系列开始之前,我强烈建议大家使用Goland的IDM,配合vscode使用真的非常亲民. 1.go程序基本结构 首先,是go程序的基本结构,主要有package引入包.im ...