解决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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
js图片查看器插件用法示例
Jun 22 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
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Firefox div高度自适应
2009/04/28 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
python删除列表内容
2015/08/04 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 切换root 执行命令的方法
2019/01/19 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
WSDL的操作类型主要有几种
2013/07/19 面试题
文员自我评价怎么写
2013/09/19 职场文书
文明寄语大全
2014/04/11 职场文书
商业融资计划书
2014/04/29 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
董事会决议范本
2015/07/01 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
java实现web实时消息推送的七种方案
2022/07/23 Java/Android