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 相关文章推荐
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
详解jQuery中的easyui
Sep 02 jQuery
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
基于python的字节编译详解
2017/09/20 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python实现停车管理系统
2018/11/30 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
基于python实现复制文件并重命名
2020/09/16 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
酒吧总经理岗位职责
2013/12/10 职场文书
2013的个人自我评价
2013/12/26 职场文书
写给老师的表扬信
2014/01/21 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
会计专业自我鉴定
2014/02/10 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
中学生思想品德评语
2014/12/31 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技