解决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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
取选中的radio的值
Jan 11 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
JS中的模糊查询功能
Dec 08 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP安全下载文件的方法
2016/04/07 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
基于python历史天气采集的分析
2019/02/14 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
园林设计师自荐信
2013/11/18 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
球队口号
2014/06/18 职场文书
上党课的心得体会
2014/09/02 职场文书
拆迁委托协议书
2014/09/15 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2015教师节通讯稿
2015/07/20 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android