iviewUI使用中遇到的问题与解决方案(一)

使用iviewUI做Vue管理系统/动态收缩左侧菜单遇到的问题 根据iviewUI官网https://www.iviewui.com/components/layout#ZDYCFQ,写侧边菜单遇到的问题 实现代码,使用了自定义触发器@click.native="collapsedSider"(自定义触发器,可以设置hide-trigger属性) <style scoped> .layout { border: 1px so... 阅读详情
项目中使用的iviewUI的版本是2.7.3,在使用中遇到的问题总结了一些,后续会更新,如果各位大神有遇到的坑欢迎评论补充
1、modal的样式要放到最外面,否则样式给不到;
2、iview组件的事件@on-change=fn,fn后面没有‘(参数)’;
3、router-view不能放到tabs里面,组件会渲染两次,要把它单独拿出来
4、FormItem里面input或者select不能用:model动态绑定元素,要用v-model
5、表格中嵌套其他组件
(1)table+tooltip
首先:render函数的使用
规则:h('标签名',{属性},[子节点])
eg:
render: (h, params) => {
return h('div', {}, [
h('Tooltip', {
props: {
    placement: 'bottom'
},
    style: {
},
on: {
click: () => {

}
}
        }, [
h('Button', {
props: {
    type: 'text'
}
}, params.row.xxx),
h('div', {
slot: 'content',
style: {
zIndex: 999,
whiteSpace: 'normal'
}
}, 'tooltip內容')
])

])
}

(2) table+switch


iviewui 中表格 Table的render函数在操作栏加上Poptip 气泡提示 业务中需要给iview表格中的操作栏按钮加上一个气泡提示框 阅读详情

相关推荐

Vue.js和iviewUI构建的高效人员管理系统

Vue2.0的核心特性之一是其数据驱动视图更新的机制。开发者只需要关注数据的变化,Vue会自动追踪依赖,并更新对应的DOM元素,从而大大简化了DOM操作的复杂性。此外,Vue2.0还提供了虚拟DOM机制,进一步优化了性能,使其在大型应用中依旧保持良好的性能表现。// 示例代码:Vue实例的创建data: {});通过上述代码,我们可以看到Vue实例化的过程,el属性用于指定挂载点,data中定义的数据在模板中可以通过插值表达式进行显示。

weixin_33245447的博客 882

iview框架中遇到在modal中嵌套modal

在iview中modal的z-index是一样的,都是1000,但是很多时候需要在modal1的上面弹出modal2,这时需要对modal添加一个class-name,然后对这个class添加属性值{z-index:1002},这时解决了modal2显示在modal1上,可是modal2的mask(即阴影)还在modal1下,所以我们需要找到modal2的父级元素,然后在父级元素上添加一个clas...

weixin_38098192的博客 8405

铝合金外壳表面处理工艺全解析:从阳极氧化到瓷泳喷涂的7种方法对比

本文全面解析了铝合金外壳的7种主流表面处理工艺,包括阳极氧化、粉末喷涂、瓷泳喷涂等。通过对比其原理、性能、成本与应用场景,为产品设计师和工程师提供了从防护性、装饰性到功能性的立体选型框架,帮助您根据具体需求选择最佳工艺方案。

weixin_29278805的博客 744

vue使用iview的notice

问题描述iview是一个vue的组件库,用起来很好用,但是在使用notice和message的时候发现一个问题,就是按照文档的写法不能调用,文档中的写法是这样的:this.$Notice.info({ title: "这是一个提示消息" })在运行的时候就会报$Notice没有定义。解决办法经过查询,发现如下解决办法: 按照iview文档的写法是这样的引入的:import { Notice...

Joker_Fei的博客 4838

前端实现微信扫一扫的思路

本篇文章的关键点就是讲解了我在实现处理多张二维码的场景时的思路,利用canvas遮挡识别过的二维码这个思路是pbk-bin大佬最先想到的,在实现这个需求以后还是很感叹这个思路的巧妙。👏pbk-bin🎁~如果文章对你有帮助,不妨赠人玫瑰,手有余香,预计将会在下篇更新较为完整的微信扫一扫界面和功能。

fang_my的博客 2488

易灵思Trion FPGA实战:5分钟搞定MIPI硬核配置(附Interface Designer避坑指南)

本文详细介绍了易灵思Trion FPGA中MIPI硬核的快速配置方法,通过Interface Designer工具实现从时钟配置到数据收发的全流程实战。特别针对初次接触Trion系列的设计师,提供了六个关键配置陷阱及解决方案,帮助开发者高效完成嵌入式视觉和高速数据传输项目。

eee77的博客 791

iView踩坑日记(一)

实习工作中遇到了之前并没有接触过的组件库iView,在使用过程中也渐渐的发现了一些让人难以理解的坑,曾一度让我怀疑是自己的问题,今天就开始记录啦iView气泡提示Poptipbug场景: 将poptip的出现位置属性placement设置为top,并且在接近浏览器顶部的位置使用,由于iview在2.12.0版本加入了自动识别,所以poptip的位置会自动变成bottom,并且,宽度莫名变得很宽,通过width属性限定宽度的情况下出现了下面这种离奇的效果(由于项目保密又懒得新建一个项目演示,暂且

xiaowu0929的博客 627

Transformer是什么?看完这篇你就醍醐灌顶

前言 由谷歌团队提出的预训练语言模型BERT近年来正在各大自然语言处理任务中屠榜(话说学者们也挺有意思的,模型名都强行凑个芝麻街的人物名,哈哈哈)。 BERT算法的最重要的部分便是Transformer的概念,它本质上是Transformer的编码器部分。 而Transformer是什么呢?transformer是永远的神,自从transformer使用了抛弃rnncnn的纯attention机制之后,各种基于transformer结构的预训练模型都如雨后春笋般雄起,而transformer中最重要就是使用

fs1341825137的博客 6万+

关于iview弹窗组件的问题

给Modal添加属性loading后,点击确定按钮对话框不会自动消失,并显示 loading 状态,需要手动关闭对话框,常用于表单提交。 那么如何去掉这个加载样式呢,而且又能保证弹窗是需要手动关闭的,这是我想到可以用setTImeout进行实现,那么在确定的回调函数里面可以这样写, setTimeout(() => { this.loading = true; }, 0); this.loading = false; ...

BIlly Feng的博客 1309

从‘眼花缭乱’到‘心中有数’:rs-fMRI统计分析全流程避坑指南(附DPABI操作截图)

本文详细解析了rs-fMRI统计分析的全流程,从质量控制到统计模型选择,再到多重比较校正和结果解读。特别针对DPABI软件操作中的常见陷阱提供实用指南,帮助研究者避免FDR和GRF校正等关键环节的错误,实现从数据混乱到清晰分析的转变。

weixin_33686714的博客 398

R语言的下载、安装及环境配置(Rstudio&VSCode)

R for Windows是一个免费的用于统计计算和统计制图的优秀工具,是R语言开发工具。它拥有数据存储和处理系统、数组运算工具(其向量、矩阵运算方面功能尤其强大)、完整连贯的统计分析工具、优秀的统计制图等功能。提供的图形界面,可以在其中访问控制台、创建脚本或安装其他软件包。

zegeai的博客 2万+

vue封装一个类似于element-ui的Notice通知组件,并挂载到Vue原型上使用this.$Notice.xxx()调用

在原型中我们添加了两个方法,并接收4个参数,top:距离顶部的距离,title: 标题,desc:标题详情, duration:展示的时间;其中top,duration不传的话给默认值;点击展示或者隐藏会调用Notice.vue的open和close方法,并且没有传递duration则是默认。此时在页面中就已经可以展示组件了。

qq_55491577的博客 1627

OpenHarmony WiFi子系统全解析:从架构到代码实现(大合集)

头文件路径[相对路径][相对路径][相对路径][相对路径]// 网络配置结构 (wifi_device_config.h)// SSID字符串// 预共享密钥// 安全类型// 网络ID// 优先级// 是否隐藏网络// 扫描信息结构 (wifi_scan_info.h)// SSID// BSSID (MAC地址)// 安全类型int rssi;// 信号强度// 频率// 信道宽度// 时间戳// 连接信息结构 (wifi_linked_info.h)

m0_67505153的博客 1059

Vue2里使用IView因为各种原因出现的问题记录

关于IView组件的使用时所出现的问题(Vue2版本,目前只记录了Tabs组件和Form组件)

Afk_kong的博客 452

2025华为od面试手撕代码【求字符串表达式结果】

2025华为od面试手撕代码【求字符串表达式结果】

MISAYAONE的博客 1353

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

table多行表头合并 vue_vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法...

吐槽今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头。这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路。在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了。哎,废话不多...

weixin_39522170的博客 400

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

iview中的tabs组件父子组件重复渲染

最近公司的项目用到iview ui库,在用这个库的时候还是踩了不少坑,下面来总结一下: 父子组件都用tabs的时候,父组件会把子组件的合并渲染,如下图所示: 问题如上,这是父子组件分别用了tabs的代码, 解决办法:给tab和item加上name和tab就可以了 示例如下: 父组件代码: 子组件代码 完美解决: ...

张木期的博客 427

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

iviewUI组件库中select双向绑定不生效

前端小伙伴们有没有遇到过这样的场景,iviewUI组件库中select双向绑定数据时,修改了绑定值,但是页面中渲染的值还是之前的值,不管是去打印还是使用vue插件去查看变量,均显示绑定值已修改,可是页面始终显示修改之前的数据,是不是很困恼,心中简直是卧槽、卧槽、卧槽。 我之前做过很暴力的事情,就是在select标签上绑定v-if,在修改v-modal的值时,对v-if对应的变量先赋值false,...

qq_42112846的博客 1911

iviewui

https://www.iviewui.com

FMSCOTT 461

iviewUI使用中遇到的问题与解决方案(二)

1、列表中使用switch时在切换状态时用到拦截弹框,要使用原生事件@click.native2、DatePicker 使用校验的话,绑定数据不能用:value,而要用v-model,前者校验有问题。3、icon添加事件@click.native=fn()4、在返回选项时,是否将 label 和 value 一并返回,默认只返回 value,写法 =》   :label-in-value = "t

驚鴻入梦 3968

npm安装iViewUI框架 - cmd篇

vue+iview开发项目,如何安装引入iViewUI框架 ? cmd指令: 先cd到项目目录; cmd执行安装iview命令: npm install iview --save 执行如下截图: 以上就是关于“ npm安装iViewUI框架 - cmd篇 ” 的全部内容。 ...

草巾冒小子的博客 2646

iviewUI-Tabs选项卡切换组件

概述选项卡切换组件,常用于平级区域大块内容的的收纳和展现。源码地址:https://github.com/iview/iview/tree/2.0/src/components/tab...

NewTyun的博客 1265

Vue3 IviewUI Table组件封装 Slot穿透问题

Vue3 IviewUI Table组件封装 Slot穿透问题

lq545209147的博客 526

iviewui Message/Notice 设置居顶高度方法

iviewui Message 设置居顶高度,局部设置无效,需要全局设置,找到main.js文件,

小川搞开发的博客 343

使用iviewui的renderHeader实现多个列同时排序

【代码】使用iviewui的renderHeader实现多个列同时排序。

ding43930053的专栏 227

在vue2.x项目中使用iViewUI的Poptip组件,根据变量判断是否显示

在vue2.x项目中使用iViewUI的Poptip组件,根据变量判断是否显示

wangzhe123_的博客 209
上一篇: Vue开发中遇到的问题与解决方案(一)
下一篇: 项目中Eslint的使用心得
驚鴻入梦
博客等级 码龄10年 23粉丝 21原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值