解决iview table组件里的 固定列 表格不自适应的问题


Posted in Javascript onNovember 13, 2020

当在使用iview Table组件里固定列功能时

出现表格不自适应宽度问题 具体如下

解决iview table组件里的 固定列 表格不自适应的问题

解决这个bug 很简单 把组件里的 width 改为 minWidth 即可

columns: [
  {
   title: '账户名',
   key: 'accountName',
   fixed: 'left',
   minWidth: 150
  },
  {
   title: '订阅名称',
   key: 'subscriptionName',
   minWidth:140
  },
  {
   title: '订阅ID',
   key: 'subscriptionId',
   minWidth:200
  },
  {
   title: '资源组',
   key: 'resourceGroup',
   minWidth:140
  },
  {
   title: '实例名称',
   key: 'instanceName',
   minWidth:140
  },
  {
   title: '实例类型',
   key: 'instanceType',
   minWidth:140
  },
  {
   title: 'CPU',
   key: 'cpu',
   minWidth:140
  },
  {
   title: '内存(GB)',
   key: 'ram',
   minWidth:140
  },
  {
   title: '磁盘容量(GB)',
   key: 'storage',
   minWidth:140
  },
  {
   title: '操作系统',
   key: 'os',
   minWidth:140
  },
  {
   title: '实例状态',
   key: 'stateName',
   minWidth:140
  },
  {
   title: '项目',
   key: 'project',
   minWidth:140
  },
  {
   title: '拥有者',
   key: 'owner',
   minWidth:140
  },
  {
   title: '公有IP',
   key: 'publicIp',
   minWidth:140
  },
  {
   title: '私有IP',
   key: 'privateIp',
   minWidth:140
  },
  {
   title: '虚拟网络/子网',
   key: 'virtualNetworkSubnet',
   minWidth:140
  },
  {
   title: '网络安全组',
   key: 'securityGroup',
   minWidth: 120
  }
 ]

望大家少走弯路~

补充知识:iView中table表格组件使用中的一些问题解决方法

最近在做图层属性信息展示功能时,需要用到表格来展示请求到的属性信息,项目UI时iview,所以我就从iview中拿到表格组件来用。https://iviewui.com/components/table

解决iview table组件里的 固定列 表格不自适应的问题

最终成品是这样一个组件。

iview的组件功能还是很强,但是用起来也相当麻烦,在这个表格设计过程中我遇到了两个难点;

一、怎么拆分以及合并部分单元格;

二、怎么调整某一个单元格的设计宽度;

首先第一个问题,

viewUI里面提供了属性 span-method 可以指定合并行或列的算法。

该方法参数为 4 个对象:

row: 当前行

column: 当前列

rowIndex: 当前行索引

columnIndex: 当前列索引

该函数可以返回一个包含两个元素的数组,第一个元素代表 rowspan,第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

由于只有合并没有拆分,所以我就在原来列数基础上多增加几列满足拆分需求,行列数据在data中声明。

columns1: [
     {
      title: 'Name',
      key: 'name',
      width: 100
     },
     {
      title: 'Value',
      key: 'value',
      width: 88
     },
     {
      title: 'Other1',
      key: 'other1'
     },
     {
      title: 'Other2',
      key:'other2',
      resiable: true,
      width: 88
     },
     {
      title: 'Other3',
      key:'other3'
     }
    ],
   attribute: [
    {
     name: '图层名称',
     value: 18
    },
    {
     name: '基础地址',
     value: 25
    },
    {
     name: '图层范围',
     value: 'minX:',
     other1: '',
     other2:'minY:',
     other3: '',
     cellClassName: {
      value: 'cellwidth',
      other2: 'cellwidth'
     }
    },
    {
     name: 'maxX:',
     value: '',
     other1: 'maxY:',
     other2: '',
     cellClassName: {
      name: 'cellwidth',
      other1: 'cellwidth'
     }
    },
    {
     name: '字段',
     value: 26
    },
    {
     name: '空间参考',
     value: 11
    },
    {
     name: '要素数量',
     value: 78
    }
   ]

接下来就是写函数来合并单元格了,api里面给是示范代码,看起来不太好懂,但是总结起来就是if 是用来记录开始操作的单元格序号,而不是进行判断,通过if嵌套来实现在指定行列进行合并。

解决iview table组件里的 固定列 表格不自适应的问题

到这一步基本上就把大致表格做好了。

接下来第二个问题

我需要把字段比较短的单元格宽度变窄,在API中也有这些为行列以及单元格设置样式的扩展属性

行:通过属性 row-class-name 可以给某一行指定一个样式名称。

列:通过给列 columns 设置字段 className 可以给某一列指定一个样式。

单元格:通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。

但是我在项目中写的时候发现它所能改的样式只有背景颜色,字体颜色等不影响盒子状态的属性,例如width这样的属性即便写上也是无效的。在调试了许久还是一无所获之后,我想用js来写一个改变宽度的函数,于是在API里发现了

解决iview table组件里的 固定列 表格不自适应的问题

由于我把表头隐藏掉了,于是使用时我发现可以直接来设置单元格宽度,这样问题就解决了。

总结一下:官方组件库中提供的API能解决我们的大部分问题,所以在遇到问题时候多看官网,看看能不能从不同角度去解决。

以上这篇解决iview table组件里的 固定列 表格不自适应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
js实现车辆管理系统
Aug 26 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 #Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 #Javascript
在vue中嵌入外部网站的实现
Nov 13 #Javascript
如何基于viewport vm适配移动端页面
Nov 13 #Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 #Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
BBS(php & mysql)完整版(五)
2006/10/09 PHP
php中rename函数用法分析
2014/11/15 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
js自定义事件代码说明
2011/01/31 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
用Eclipse写python程序
2018/02/10 Python
python实现音乐下载的统计
2018/06/20 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
学习Python需要哪些工具
2020/09/04 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
迎新晚会策划方案
2014/06/13 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
学校社团活动总结
2015/05/07 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
返乡农民工证明
2015/06/24 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript