最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
elementUI中Table表格问题的解决教程
时间:2022-06-25 15:27:28 编辑:袖梨 来源:一聚教程网
前言
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染。
在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考。
1.表格样式问题:
如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题。
打开调试之后,发现table的宽度并没有按照100%来显示,而是根据表格宽度值来计算的(我这里是640px),并且在table标签底下发现了colgroup和col标签,colgroup包裹着对应单元格数的col,并且col的宽度为80px,瞬间恍然大悟,明白640px是怎么得来的,这里一共有8个单元格,8*80就是640px了,那要怎么解决这个默认样式呢?
一、给表格添加固定宽度
//但是这个方法有个弊端,当显示的单元格过多时,表格下方会出现横向滚动条,数据不能一目了然,用户体验感不佳,还是宽度自适应比较好。
二、利用flex的特性
css;">// 在项目中新建一个公共css文件,这样可以适用于所有表格table //common.css table,tbody,thead { width: 100% !important; } colgroup { position: absolute; width: 100% !important; display: flex; } col { flex: 1; text-align: center; } //在main.js中引入即可,table里面的单元格不用设置宽度属性,这里就可实现自适应。
2.table表格数据问题
table显示的数据并不是一成不变的,这里传入table的data需要有实时监控的功能,其中一个数据的改变就要及时显示,这里我用计算属性computed来进行监控。有时候后台返回的状态数据是0,1等等,我们也可以在里面进行判断渲染。
//vue文件//这里的dataList就是computed里面的dataList
3.table表格的排序、筛选
//有时候需要对表格进行排序或者筛选,查看或对比需要的数据,这里就要用到sortable属性、filters属性、filter-change方法、sort-change方法。 //vue文件// 将filter-change方法、sort-change方法放在el-table里面//列中设置filters属性即可开启该列的筛选,filter-multiple是否多选 {{ scope.row.status }} {{ scope.row.status }} //在列中设置sortable属性即可实现以该列为基准的排序
今天的心得就到这儿了,希望可以帮助到有需要的小伙伴儿O(∩_∩)O
相关文章
- 光遇11.7每日任务怎么做 11-07
- 英雄联盟双城之战2主题曲怎么样 11-07
- 《怪物猎人荒野》锁头机制介绍 11-07
- 逆水寒手游流派首席竞选怎么玩 逆水寒手游流派首席竞选玩法介绍 11-07
- 《怪物猎人荒野》双刀玩法介绍 11-07
- 《怪物猎人荒野》帐篷搭建方法 11-07