解决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入门教程(6) Window窗口对象
Jan 31 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python threading多线程编程实例
2014/09/18 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
使用Python在Windows下获取USB PID&VID的方法
2019/07/02 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python ORM编程基础示例
2020/02/02 Python
python实现程序重启和系统重启方式
2020/04/16 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
班组长岗位职责范本
2014/01/05 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python