解决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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python常用的json标准库
2019/02/19 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
母亲追悼会答谢词
2014/01/27 职场文书
学校捐书倡议书
2015/04/27 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL