elementUI中Table表格问题的解决方法


Posted in Javascript onDecember 04, 2018

前言

element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染。

在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考。

1.表格样式问题:

elementUI中Table表格问题的解决方法
混乱样式.png

elementUI中Table表格问题的解决方法
正常样式.png

如上图,在当前导航表格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

总结

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

Javascript 相关文章推荐
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
Vue的轮播图组件实现方法
Mar 03 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
vue 之 css module的使用方法
Dec 04 #Javascript
Vue源码解析之数组变异的实现
Dec 04 #Javascript
小程序指纹验证的实现代码
Dec 04 #Javascript
js实现下拉框二级联动
Dec 04 #Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 #Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python实现同一局域网下传输图片
2020/03/20 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
烹调加工管理制度
2014/02/04 职场文书
入学申请自荐信范文
2014/02/26 职场文书
社区食品安全实施方案
2014/03/28 职场文书
少儿节目主持串词
2014/04/02 职场文书
教师考察材料范文
2014/06/03 职场文书
青奥会口号
2014/06/12 职场文书
商务英语专业求职信
2014/06/26 职场文书
在职员工证明书
2014/09/19 职场文书
校友会致辞
2015/07/30 职场文书
感恩主题班会教案
2015/08/12 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python