解决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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JavaScript实现三级联动效果
Jul 15 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
设置python3为默认python的方法
2018/10/31 Python
python解析xml简单示例
2019/06/21 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
高中体育教学反思
2014/01/29 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
超级礼物观后感
2015/06/15 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis