解决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 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
解决layui表格的表头不滚动的问题
Sep 04 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学习笔记之基础知识
2014/11/08 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
javascript一点特殊用法
2008/05/28 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python实现队列的方法
2015/05/26 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python多线程之事件Event的使用详解
2018/04/27 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Python tkinter实现日期选择器
2021/02/22 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
统计每一学生的平均成绩
2014/06/06 面试题
表彰大会策划方案
2014/05/13 职场文书
公司职员入党自传书
2015/06/26 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python