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系列(6) 强大的原型和原型链
Jan 15 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
javascript相关事件的几个概念
May 21 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
JavaScript知识点整理
Dec 09 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
简单实现js放大镜效果
Jul 24 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 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
实用函数10
2007/11/08 PHP
php 设计模式之 单例模式
2008/12/19 PHP
php header功能的使用
2013/10/28 PHP
两种php实现图片上传的方法
2016/01/22 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Python set集合类型操作总结
2014/11/07 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
《小池塘》教学反思
2014/02/28 职场文书
捐书倡议书
2014/08/29 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
银行求职自荐信范文
2015/03/04 职场文书
法制教育主题班会
2015/08/13 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android