解决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 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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自定义session示例分享
2014/04/22 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JS实现吸顶特效
2020/01/08 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python单例模式实例详解
2017/03/01 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
用matplotlib画等高线图详解
2017/12/14 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python中比较两个列表的实例方法
2019/07/04 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
企业宣传方案
2014/03/04 职场文书
项目投资合作意向书
2014/07/29 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
行政上诉状范文
2015/05/23 职场文书
西安事变观后感
2015/06/12 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers