解决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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
js实现的网站首页随机公告随机公告
Mar 14 Javascript
js 与或运算符 || && 妙用
Dec 09 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
python实现俄罗斯方块游戏
2020/03/25 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Django缓存Cache使用详解
2020/11/30 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
一封普通求职者的求职信
2013/11/20 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
安全标准化实施方案
2014/02/20 职场文书
环境建设实施方案
2014/03/14 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书