前言
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了,那要怎么解决这个默认样式呢?
一、给表格添加固定宽度
<template> <div class="table"> <el-table :data="data" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable"> <el-table-column prop="deviceTypeName" label="柜子类型名称" width="250" align="center" highlight-current-row="true"> </el-table-column> <el-table-column prop="deviceTypeIntroduce" label="柜子类型说明" width="250" align="center"highlight-current-row="true"> </el-table-column> </div> </template> //但是这个方法有个弊端,当显示的单元格过多时,表格下方会出现横向滚动条,数据不能一目了然,用户体验感不佳,还是宽度自适应比较好。
二、利用flex的特性
// 在项目中新建一个公共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文件 <template> <div class="table"> //这里的dataList就是computed里面的dataList <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" > <el-table-column prop="deviceTypeName" label="柜子类型名称" align="center" highlight-current-row="true"> </el-table-column> <el-table-column prop="deviceTypeIntroduce" label="柜子类型说明" align="center"highlight-current-row="true"> </el-table-column> </div> </template> <script> export default { name: "basetable", data(){ return{ tableData:[], } }, computed: { dataList() { //这里的 this.tableData是请求接口得到的数据 let liArr = this.tableData; if(liArr .length>0){ for (var i = 0; i < liArr.length; i++) { if (liArr[i].status == 0) { liArr[i].status = "启用"; } else if (liArr[i].status == 1) { liArr[i].status = "停用"; } if (liArr[i].line == 0) { liArr[i].line = "离线"; } else if (liArr[i].line == 1) { liArr[i].line = "在线"; } } return liArr; } } }, } </script>
3.table表格的排序、筛选
//有时候需要对表格进行排序或者筛选,查看或对比需要的数据,这里就要用到sortable属性、filters属性、filter-change方法、sort-change方法。 //vue文件 <template> <div class="table"> // 将filter-change方法、sort-change方法放在el-table里面 <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" @filter-change="handleFilterChange" @sort-change='handleSortChange'> //列中设置filters属性即可开启该列的筛选,filter-multiple是否多选 <el-table-column prop="status" column-key="status" label="启用状态" align="center" :filters="[{ text: '启用', value: '启用' }, { text: '停用', value: '停用' }]" filter-placement="bottom" :filter-multiple="ismultiple" > <template slot-scope="scope"> <span v-if="scope.row.status=='启用' " style="color:green">{{ scope.row.status }}</span> <span v-else style="color: red" >{{ scope.row.status }}</span> </template> </el-table-column> //在列中设置sortable属性即可实现以该列为基准的排序 <el-table-column prop="deviceTypeIntroduce" label="涨幅" sortable align="center" highlight-current-row="true"> </el-table-column> </el-table> </div> </template> <script> export default { name: "basetable", data(){ return{ tableData:[], ismultiple:false } }, methods:{ //过滤方法 handleFilterChange(filters) { //从filters获取需要的参数 }, //排序方法 handleSortChange(sorts){ //从sorts获取需要的参数 } } } //其他table的属性和方法可根据实际情况对应地去使用,用法大多是大同小异的,可以去官网查看文档喔 </script>
今天的心得就到这儿了,希望可以帮助到有需要的小伙伴儿O(∩_∩)O
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 黑鸭子.2005-《发烧DSD》柏菲[WAV分轨]
- 群星.1990-电影看板·人间道【宝丽金】【WAV+CUE】
- 周殷廷.2024-TO.WHOM.IT.MAY.CONCERN【环球】【FLAC分轨】
- 草蜢.1997-三人世界精选17首【宝丽金】【WAV+CUE】
- 【古琴音乐】管平湖《广陵散》2004[FLAC+CUE]
- 【中国民乐】《少数民族器乐·苗岭的早晨》2004[WAV+CUE]
- 【中国音乐】盛中国《新疆之春》2004[FLAC+CUE]
- 群星《音你而来 第8期》[320K/MP3][44.64MB]
- 群星《音你而来 第8期》[FLAC/分轨][121.21MB]
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]
- 陈百强.1993-离不开...纪念歌集2CD【华纳】【WAV+CUE】
- 于台烟.2003-爱自己【乾坤唱片】【WAV+CUE】
- 群星.2024-我们永远是我们电影原声带【乐禾发文化】【FLAC分轨】
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[DSF]