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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
layer更改皮肤的实现方法
Sep 11 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php中spl_autoload详解
2014/10/17 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
JS实现吸顶特效
2020/01/08 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python实现带百分比的进度条
2016/06/28 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
自我鉴定范文
2013/11/10 职场文书
晚宴邀请函范文
2014/01/15 职场文书
专题组织生活会方案
2014/06/15 职场文书
放飞理想演讲稿
2014/09/09 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书