解决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 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
关于微信小程序bug记录与解决方法
Aug 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
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python 流程控制实例代码
2009/09/25 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
怎么快速自学python
2020/06/22 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
就业协议书范本
2014/04/11 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python