解决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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
js实现网页定位导航功能
Mar 07 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
webpack之devtool详解
Feb 10 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
python实现的各种排序算法代码
2013/03/04 Python
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python实现简单的语音识别系统
2017/12/13 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
美国电视购物:QVC
2017/02/06 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
公司请假条范文
2014/04/11 职场文书
力学专业求职信
2014/07/23 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书