解决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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JS实现公告上线滚动效果
Jan 10 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php绘制一个矩形的方法
2015/01/24 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
大学老师推荐信
2014/02/25 职场文书
党员公开承诺事项
2014/03/25 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python