解决ele ui 表格表头太长问题的实现


Posted in Javascript onNovember 13, 2019

设计图是这样:解决ele ui 表格表头太长问题的实现

可是做出来是这样:

解决ele ui 表格表头太长问题的实现

出现了一行连着。。要知道工作上总有些ui没事做喜欢指指点点。

后来翻查官方手册发现了这个参数:

解决ele ui 表格表头太长问题的实现

附上网址:https://element.eleme.cn/#/zh-CN/component/table

首先,我们要知道h是vue封装的一个方法。叫$createelement,大意是创建一个节点(猜的,,没办法英语一级都没考过.),然后这方法返回一个column和index,column其实就是这一格子里面的东西。我们来打印看一下。

现在我的动态表头里面添加这个方法:

解决ele ui 表格表头太长问题的实现

打印column出来是这个格子里面的所有属性。:

解决ele ui 表格表头太长问题的实现

接着我们为了实现设计图。要这样写方法:

细心的人会发现我的这表头里面多了一个|的符号,其实是为了这方法用的

解决ele ui 表格表头太长问题的实现

h是调用createelement这个方法,传入这是一个div,接着样式,最后利用split去分割这个字符串。添加一个div进行分割。样式如下:

解决ele ui 表格表头太长问题的实现

last,成雏形了。

解决ele ui 表格表头太长问题的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
原生js实现照片墙效果
Oct 13 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 #Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 #Javascript
JavaScript数组及常见操作方法小结
Nov 13 #Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 #Javascript
javascript操作元素的常见方法小结
Nov 13 #Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 #Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
php与js的区别是什么
2013/08/05 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue实现搜索功能
2019/05/28 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python实现二维插值的三维显示
2018/12/17 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
英文自我鉴定
2013/12/10 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
小学庆六一活动方案
2014/02/28 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python