解决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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
轮播图组件js代码
Aug 08 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 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新手上路(十)
2006/10/09 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
微信小程序 Storage更新详解
2019/07/16 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python 内置函数complex详解
2016/10/23 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python中return如何写
2020/06/18 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
农村婚礼证婚词
2014/01/08 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
鉴定评语大全
2014/05/05 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
南京青奥会口号
2014/06/12 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
教学反思怎么写
2016/02/24 职场文书