iviewiview弹窗modal滚动穿透

本文目录一览：

• 1、小程序的 iview Weapp 组件库的使用
• 2、iview内存泄漏
• 3、iview-树形控件的使用（一）
• 4、iview是什么意思
• 5、iview的表格行/列合并
• 6、iView怎么用？

小程序的 iview Weapp 组件库的使用

iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。

商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果，总的来看还是不错的。

还有个常用的动作面板。

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：

总的来讲 iview 还比较好看的。

更多用法去参考：

另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

iview内存泄漏

iview在升级到view-design之前，是存在严重的内存泄漏问题的，而如果你在项目中大量使用了iview组件，就可能面临大量的升级工作要做，因为样式很多是不兼容的。

我们今天就看一下iview的源码，看看到底问题在哪里？为什么会导致内存泄漏？

首先进入iview官网 ，安装老版iview2.0。

我们看一下常用的table组件吧：

我们可以看到，在beforeDestory周期中，只释放了挂载的resize事件，并未释放this下注册的自定义事件on-visible-change，这就会导致运行一段时间，this下挂载的自定义事件越来越多，从而导致内存的泄漏。

我们再看看升级后的view-design：

我们一定要重视beforeDestroy生命周期的作用，将dom的引用、所有注册的事件都要释放掉，防止内存泄漏的产生。

iview-树形控件的使用（一）

因为需要做一个权限管理，所以用到树形控件。

首先引入组件：

然后是data数据：

数据就会在页面上以树形结构的形式渲染出来：

左边是权限选项，右边是所选权限，如何达到这样的效果和只获取用户所选的权限。

树形控件里提供了三个事件和三个方法，这里用到的是事件是@on-select-change，点击树节点时触发，返回值是当前选中的节点数组，当前项，用到的方法是getCheckedAndIndeterminateNodes()，用于获取选中及半选节点。ref="tree'，这个属性一定要写，之后要获取的数据通过$refs.tree.data可获取。

首先是如何在右边显示用户选择的权限，要有层级关系，半选的选中的都要显示。

将用户选择的权限有层级关系的展示出来后，现在要做的是获取用户选择的权限，只需要全选的即可。这里用到的是iview提供的getCheckedAndIndeterminateNodes()方法。this.power里存放的就是用户选择的权限，然后通过按钮保存按钮提交到后台即可

iview是什么意思

view 英[vju:] 美[vju]

n. 看法; 风景; 视域; [建筑学] 视图;

vt. 看; 看待;

[例句]Washington and Moscow are believed to have similar views on Kashmir

据信华盛顿和莫斯科在克什米尔问题上的看法相似。

iview的表格行/列合并

最近的一个项目里面有一个需求是这样的，要实现表格第一列和最后一列相同的内容合并成一格，形成的结果就是多条有相同字段的数据放在表格里面看起来就是一条数据，但是中间的列还是显示每条数据不同的部分。实现的结果如下图

而项目用的UI库iview虽然官网上有介绍 表格行列合并 ，但是看完示例之后我是一脸懵逼的，完全就没有说清楚好不好，也有可能是我理解有问题吧。参考了网上的一些文章才最后弄懂这个东西怎么用，这篇文章就把这个记录下来以备以后忘了可以查看。

先按照官网上的写法来理解一遍

column配置照着官网文档写就行，而数据其实还是四条

最重要的是span-method

第一处if-else判断：

rowIndex === 0代表第一行，columnIndex === 0代表第一列

return [2, 1] 代表需要合并2行1列

同理 rowIndex === 1 columnIndex === 0代表第二行第一列

return [0, 0]代表合并0行0列，即它是被合并的单元格

同理可得第二个if-else判断就是把第三行第一列和第四行第一列合并在了一起，而最后一列的合并和第一列的合并基本相同，至此这个表格就算完成了。

注意： rowIndex和columnIndex都是从0开始的， return[0, 0] 都是代表的被合并的单元格。

项目中的数据肯定不会这样写了，从上面的 span-method 方法可以看出这个里面实际上进行了数据的遍历，所以我们可以先把接口拿到的数据处理好，然后在 span-method 中直接返回设置好的值就行了。写到这里我发现直接写下去有点难，我在项目里面后台返回的是一个分组之后的数据，所以很直观的就做出来了，如果取到的数据是一个散乱的一维数组，假设后台也懒得给你分组，那么整套流程就需要前端自己完成了。

为了使思路清晰一点，我们从结果反向推导：

这里用到了一些操作数组的方法，以下划线开头的，来自 lodash ，最后得到的一维数组就是table组件要用的data。

最后将上面几步合起来，我们就能从原始的数据得到table组件需要的数据了。table组件在合并单元格之后最好使用 disabled-hover 将hover样式去掉。

----------- 2021/10/18更新 -----------

最近做element的项目发现element官网上的判断方法挺好的，可以参考一下

View UI （iview）表格 行/列合并 教程

iView怎么用？

我正在使用iview， 首先保证系统有node.js, 可以支持npm安装，然后按照下面的简单步骤进行：

npm install iview --save

这样在你的package.json可以看到：

"dependencies": {

"axios": "^0.16.2",

"iview": "^2.0.0-rc.13",

在你的main.js这种文件里面（也就是你的工程里面new Vue的那个文件），加入下面代码：

import iView from 'iview';

Vue.use(iView);

然后在自己新加的component 里面，你就可以直接使用iview的控件了，例如Table，很方便也很美观。

最后推荐你研究下iview-admin这个，如果是做一个简单的网站，比如cms管理，你可以直接下载他们的工程，参考他们的代码，甚至直接这个工程进行修改。

iview的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于iview弹窗modal滚动穿透、iview的信息别忘了在本站进行查找喔。