解决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 相关文章推荐
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
axios封装与传参示例详解
Oct 18 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图片上传存储源码并且可以预览
2011/08/26 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
网页常用特效代码整理
2006/06/23 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python正则表达式和元字符详解
2018/11/29 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Sony C++笔试题
2013/03/10 面试题
部队学习十八大感言
2014/01/11 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
解析Java异步之call future
2021/06/14 Java/Android