解决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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
玩转方法:call和apply
May 08 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
element实现合并单元格通用方法
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
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php获取域名的google收录示例
2014/03/24 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue.js中created方法作用
2018/03/30 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python实现自动登录
2018/09/17 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python编写实现抽奖器
2020/09/10 Python
Python用Jira库来操作Jira
2020/12/28 Python
网络体系结构及协议的定义
2014/03/13 面试题
社区中秋节活动方案
2014/01/29 职场文书
校园活动宣传方案
2014/03/28 职场文书
团代会开幕词
2015/01/28 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书