元素界面中表格问题的解决方案

前言

元素ui是vue非常好的UI框架。元素封装了table并简化了vue对table的呈现。

在开发vue框架项目时，在引入元素插件和使用table组件时遇到了一些问题，下面列出来供参考。

1.表格样式问题：

混乱的风格。巴布亚新几内亚

正常风格。巴布亚新几内亚

如上图，目前导航表格样式没有问题，但是当我点击其他导航转到另一个页面，然后返回到上一个导航页面时，表格的样式会比较混乱。只需点击当前页面或刷新或拉伸页面，样式就会恢复正常，这是一个奇怪的样式问题。

调试后发现，表格的宽度不是按照100%显示的，而是按照表格宽度值计算的(我这里有640px)。colgroup和col标签位于TABLE标签下。colgroup用相应数量的单元格包裹col，col的宽度为80px。我突然明白了640px是如何获得的。这里有8个单元格，8*80是640px。

首先，给表格添加一个固定宽度

templatediv类=' table ' El-table : data=' data ' v-loading=' loading '边框样式=' width :100%；' text-藻酸盐algin:center': header-cell-style=' { background : ' # f4f6 F9 ' } Ref=' multi table ' El-table-column prop=' device type name ' label=' cabinet type name ' width=' 250 ' align=' center ' highlight-current-row=' true '/El-table-column prop=' device type import ' label=' cabinet type description ' width=' 250 ' align=' center ' highlight-current-row=' true '/El-table-column当显示的单元格过多时，表格底部会出现一个水平滚动条，数据不会一目了然。用户体验不好，最好适配宽度。第二，利用flex的特性

//在项目中创建新的公共css文件，可以应用于所有的表table//common.csstable，tbody，thead {width : 100%！重要；} col group { position : absolute；宽度： 100%！重要；display: flex} col { flex : 1；文本对齐：中心；}//可以引入main.js，表格中的单元格不需要设置width属性，在这里可以实现自适应。2 .表格数据问题

表显示的数据不是静态的。这里需要对导入表中的数据进行实时监控，其中一个数据变化要及时显示。在这里，我使用计算属性来监控。有时后台返回的状态数据为0、1等。我们也可以在其中进行判断和渲染。

//vue文件templatediv class='table' /这里的dataList是dataList El-table 3360 data=' dataList ' v-loading=' loading ' border style=' width :100%；' text-藻酸盐algin:center': header-cell-style=' { background : ' # f4f6 F9 ' } Ref=' multi table ' El-table-column prop=' device typename ' label=' cabinet type name ' align=' center ' highlight-current-row=' true '/El-table-column-table-column prop=' device type input ' label=' cabinet type description ' align=' center ' highlight-current-row=' true '/El-table-column/div/Templatescriptexportdefault { name 33if(LiaR . length 0){ for(var I=0；i liArr.length如果。status==0){ liar[I]。状态=“已启用”；} else if(liar[I]。status==1){ liar[I]。状态='已禁用'；} if(liar[I]。line==0){ liar[I]。line=' offline} else if(liar[I]。line==1){ liar[I]。line=' online} }返回liArr}}}，}/script3。表格的排序和过滤

//有时候需要对表格进行排序或者筛选，查看或对比需要的数据，这里就要用到可分类的属性、过滤器属性、过滤器更换方法、分类变化方法//vue。文件模板设计类='table' //将过滤器更换方法、分类变化方法放在埃尔表里面El-table :数据=' DataList ' v-loading=' loading '边框样式=“宽度：100%；”文本-藻酸盐褐藻胶： center ' : header-cell-style=' { background : ' # f4f 6 F9 ' } ' ref=' multipleTable ' @ filter-change=' handleFilterChange ' @ sort-change=' handleSortChange '//列中设置过滤属性即可开启该列的筛选过滤倍数是否多选El-table-column prop=' status '列-key=' status '标签='启用状态align=' center ' : filters='[{ text : '启用，值： '启用}，{ text: '停用，值： '停用}]'筛选器-放置位置='底部' :筛选器-multiple='ismultiple '模板插槽-作用域=' scope ' span v-if=' scope。划船。状态=='启用style=' color : green '(范围。划船。status } }/span span v-else style=' color : red ' { scope。划船。状态} }/span/template/El-table-column//在列中设置可分类的属性即可实现以该列为基准的排序El-table-column prop=' device type introduction ' label='涨幅可排序align=' center ' highlight-current-row=' true '/El-table-column/El-table/div/template script导出默认值{ name : ' base table '，data(){ return{ tableData:[]，ismultiple:false } }，methods:{ //过滤方法handleFilterChange(筛选器){ //从过滤获取需要的参数}, //排序方法handleSortChange(排序){ //从分类获取需要的参数} }} //其他桌子的属性和方法可根据实际情况对应地去使用，用法大多是大同小异的，可以去官网查看文档喔/script今天的心得就到这儿了，希望可以帮助到有需要的小伙伴儿O(_)O

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。