解决iView Table组件宽度只变大不变小的问题


Posted in Javascript onNovember 13, 2020

示例:

<Table class="my-table"></Table>

打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值,而且在父元素变小的时候这个值并没有相应地变小,所以才会导致的iView Table组件只会变大不会变小。

那么我们就可以根据这个原因才决定解决方案

1、给Table组件的table标签设置一个important的width

.my-table table {
 width: 100% !important;
}

这个方法并不是特别好,因为他可能会出现table慢慢变小(而不是瞬间变小)的情况,所以看起来并不是特别好。

2、给Table组件一个确定的计算值

.my-table {
 width: calc(100% - 100px);
}

这个方法在目前我已知的方法里是最优的。

3、不要给Table组件的columns参数中添加width属性(未验证)

columns: [{
 title: '标题',
 width: 200 // 不加这东西
}]

这个方法是网友给的,我没验证不知道有没有用。

补充知识:iview表格Table表头动态化实现

业务逻辑:根据日期,时间筛选跨度固定为3个月,获取数据,表格动态按月份展示,看图

解决iView Table组件宽度只变大不变小的问题

解决iView Table组件宽度只变大不变小的问题

表格还是这么简单

<Col span="8"> 时 间:
 <Date-picker type="month" format="yyyy-MM" :clearable='false' :editable='false' :options="startOption" v-model="searchParams.sDate" style="width: 200px"></Date-picker> 至 
 <Date-picker type="month" format="yyyy-MM" :clearable='false' :editable='false' :options="endOption" v-model="searchParams.eDate" style="width: 200px"></Date-picker>
</Col>
<Table stripe :columns="tableColumns" :data="tableData"></Table>

思路:固定时间跨度监听解决不赘述,搜索获取数据后,对tableColumns,进行处理,(push,splice,uhshift…都可以)引起DOM刷新,

处理tableColumns的函数

this.$utils.time.formatTime为封装好的时间处理函数,moment.js

// 初始化表头
  columsInit () {
   let timeStr1 = this.$utils.time.formatTime(this.searchParams.sDate, 'YYYY-MM')
   let startMonth = timeStr1 + '月维护企业数'
   let timeStr2 = this.$utils.time.formatAddTime(this.searchParams.sDate, 'YYYY-MM', 1, 'months')
   let midMonth = timeStr2 + '月维护企业数'
   let timeStr3 = this.$utils.time.formatTime(this.searchParams.eDate, 'YYYY-MM')
   let endMonth = timeStr3 + '月维护企业数'
   this.tableColumns.splice(3, 4,
    {
     title: startMonth,
     align: 'center',
     render: (h, params) => {
     //下面业务逻辑直接不用看
      // console.log(timeStr1)
     /*  let arr = params.row.historyDataListDto || [];
      let obj = null
      arr.forEach((item, index) => { //有些人员,有些月份的数据没有
       if (item.month == timeStr1) {
        obj = arr[index]
       }
      })
      if (obj) {
       return h('a', {
        on: {
         click: () => {
          this.toDetail(params.row.uId, params.row.class2Id, obj.month, obj.month, obj.dirId)
         }
        }
       }, obj.whsNum)
      } else {
       return h('span', '--')
      }
     */业务逻辑
     }
    },
    {
     title: midMonth,
     align: 'center',
     render: (h, params) => {
     
     }
    },
    {
     title: endMonth,
     align: 'center',
     render: (h, params) => {
      
     }
    },
    {
     title: '平均',
     align: 'center',
     key: 'avgNum'
    }
   )
  },

以上这篇解决iView Table组件宽度只变大不变小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 #Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 #Javascript
在vue中嵌入外部网站的实现
Nov 13 #Javascript
如何基于viewport vm适配移动端页面
Nov 13 #Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 #Javascript
You might like
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
jquery JSON的解析方式
2009/07/25 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python 使用值来排序一个字典的方法
2018/11/16 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python面向对象 反射原理解析
2019/08/12 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Ruby如何创建一个线程
2013/03/10 面试题
求职信范文怎么写
2014/01/29 职场文书
财务出纳岗位职责
2014/02/03 职场文书
户外拓展活动方案
2014/02/11 职场文书
投标承诺书范本
2014/03/27 职场文书
党员一句话承诺大全
2014/03/28 职场文书
亮剑观后感500字
2015/06/05 职场文书
爱国电影观后感
2015/06/19 职场文书
医院感染管理制度
2015/08/05 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL