Vue之iView Ui库在小demon中出现的使用情况

最新推荐文章于 2022-08-15 11:06:36 发布
最新推荐文章于 2022-08-15 11:06:36 发布
阅读量219 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39532595/article/details/89007396
版权
本文记录了在Vue项目中使用iView UI库时遇到的七个问题，包括模板验证错误的解决方案、菜单栏点击事件触发、router-link事件监听、路由变化数据同步、下拉列表去重、分页器使用以及表格排序的困扰，并提供了一些参考资料和解决思路。
摘要由CSDN通过智能技术生成

今天iView来开始一个项目 好的
搭建下载看官方文档就好 命令太多 真的记不住

第一个错：
在这里插入图片描述
Iview会将标签渲染成html，但是这样结束标签会报错，在vs里面设置就好了
打开设置，搜索“vetur.validation.template” 取消对勾就好，然后重启，
接下来是盗图的截图：
在这里插入图片描述

第二个问题：
写菜单栏的时候 点击一个 全部都触发了 因为代码是动态绑定数据的，如下
这是脑抽这是脑抽
在这里插入图片描述

第三个问题：
在使用vue 的router-link 中想要添加事件，直接写click 是没有用的，需要添加native修饰符，因为route-link是会组织click等事件的，
官网解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
我的解释就是，使用可以理解.native 是把一个组件转化为一个普通的html标签，如果本先元素就是一个html标签，那么na

最低0.47元/天 解锁文章
YeSyinnng
关注
专栏目录
探索前端设计的新境界——介绍IVueUI工具助力Vue页面设计
易编程
11-30 766
在Vue前端开发的旅程中，页面设计常常是一个不可避免的挑战。通过ivueui，你可以轻松创建复杂的Vue页面，无需深入的设计经验，即可打造出令人惊艳的界面。这意味着，不论你是在老项目中保持更新，还是在全新的Vue3项目中工作， ivueui都能为你提供强大的支持。这意味着，你不仅能获得设计好的页面代码，还能得到项目所需的所有文件，直接投入到你的Vue项目中。
IVIEW+VUE文件流下载EXCEL问题
qq_38030465的博客
06-30 649
用Axios调用导出方法返回的文件流下载时控制台返回乱码 vue需要用 new Blob([data])来处理 后台接口 @PostMapping(value = “exportKeHuFormat”) @ApiOperation(value = “导出-客户信息导入模板”, notes = “”) public void exportKeHuFormat(HttpServletRequest request, HttpServletResponse response){ try { api.expor
iview-project-3.0下载安装以及过程中遇到的坑
从入门到放弃的博客
05-30 1085
iview-project-3.0下载地址：https://github.com/iview/iview-project 坑1：npm run init会报错 解决方法：(详见github的issue中) You also do like this: file: webpack.dev.config.js change: fs.write(fd, buf, 0, buf.length, 0,...
IVIEW示例项目构建
FMSCOTT
10-31 622
1：下载示例项目 https://github.com/iview/iview-project https://codeload.github.com/iview/iview-project/zip/3.0
iview组件引入vue项目
Rookie_Rookieone的博客
02-26 1430
进入项目使用npm下载： $ npm install iview --save 下面这样显示就是下载成功： 在项目src/main.js中插入： import iView from ‘iview’ import ‘iview/dist/styles/iview.css’ Vue.use(iView); 入后就可以直接复制组件库的代码使用 菜鸟记录（一``) ...
vue+iview后台管理模板 它基于Vue.js并使用UI工具包iView
01-07
iView则是一个针对Vue.js设计的高质量UI组件库，提供了丰富的界面元素和便捷的交互效果，为快速构建现代化后台管理系统提供了可能。 在“vue+iview后台管理模板”中，开发者已经预先整合了这两个技术，创建了一个...
基于Vue的iView后台管理系统设计源码
05-22
iView后台管理系统设计源码：该项目基于Vue开发，包含198个文件，主要使用JavaScript...iView admin是一套基于Vue.js和iView UI组件库的后台集成解决方案，旨在为开发者提供一套功能完善、易于扩展的后台管理系统框架。
vue-iview-ui:iview基础上使用
04-02
在命令行中，你可以使用`yarn add vue-iview-ui`或者`npm install vue-iview-ui`来添加Vue-iView-UI到你的项目依赖。这里的`yarn`或`npm`是包管理工具，它们负责下载和管理项目所需的依赖。 使用Vue-iView-UI时，你...
基于vue3的炫酷风格ui组件库
11-20
基于vue3的炫酷风格ui组件库。基于vue3的炫酷ui组件库 特点：活力性 可玩性 原子性 组件库使用方式参考elementUI 使用 # npm npm install viog-ui #yarn yarn add viog-ui 特殊标注样式属性请添加前缀--vi-组件...
银行管理系统，采用Vue+ Express+ Mysql设计与开发，结合iViewUI组件库.zip
最新发布
08-30
银行管理系统，采用Vue+ Express+ Mysql设计与开发，结合iViewUI组件库.zip银行管理系统，采用Vue+ Express+ Mysql设计与开发，结合iViewUI组件库.zip银行管理系统，采用Vue+ Express+ Mysql设计与开发，结合iViewUI...
ivue-ui:iVue根据Google的材料设计规范创建
05-03
静脉 IVue是Vue的语义组件框架。 它旨在提供干净，语义和可重用的组件。 iVue根据Google的创建 浏览器支持 IVue支持所有现代浏览器，包括IE11和Safari 9+（使用polyfill）。 IVue利用了ES2015 / 2017的功能，这些功能要求对Internet Explorer 11和Safari 9/10使用polyfill。 如果您使用的是vue-cli-3，此操作将自动为您完成。 否则，您可以在项目目录中安装babel-polyfill： // my-project/ $ yarn add babel - polyfill // OR $ npm install babel - polyfill -- save 重要的是尽早在主index.js文件中包含该插件。 // my-project/src/index.js import 'babel-p
win10脚手架安装Vue与Iview
qq_38030465的博客
07-11 299
1.必须要有的环境 node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 1.node.js的安装 转载：安装教程 2.安装cnpm 命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，没报错表示安装成功 3.安装vue-cli 脚手架构建工具 在命令行中运行命令 cnpm install -g vue-cli ,假如提示不是内部或外部命令 转载：https://yidas
Vue PC端框架和Vue移动端UI框架
qq_45229580的博客
08-15 1558
在学习Vue的过程之中，我发现不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，而且框架层出不穷，学习文档也越来越多，Vue也越来越受欢迎。github地址：​。github地址：​。github地址：​。github地址：​。github地址：​。github地址：​。Vue移动端UI框架。github地址：​。github地址：​。github地址：​。github地址：​。github地址：​。...
一款粒子跳动及粒子波浪(iview)组件
gongpan2468的博客
10-28 2412
收集两款vue的组件 1，粒子波浪，该波浪来自与iview的官网（http://v1.iviewui.com/），该粒子波浪引入前，请npm install --save three 效果如下（截出来的gif不太好看，真实效果比这个好看）: 颜色背景自行更改 http://v1.iviewui.com/ <template> <div id="indexLizi"...
vue-particles粒子动画插件的使用和爬坑出现垂直滚动条
weixin_30301183的博客
09-22 528
1下载==》cnpm install vue-particles --save-dev 2引入 注册--》main.js//插件 import VueParticles from 'vue-particles' Vue.use(VueParticles) 在使用的时候外层必须要有一个id包裹（重要） 否则展示不出来 <template> ...
vue复选框组件自定义对勾_解决vue-iview的table组件，带有checkbox选择框勾选的问题...
weixin_39892481的博客
12-22 1553
近期做的项目用到了iview的table组件，并且带有checkbox选择框。iview坑：(1)给data设置_check的属性。 _checked属性会影响checkbox的选中状态。但是checkbox的选中状态不会影响_check 属性(2)iview 官方文档说：@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。实现效果并不是这...
iviewUI库 Col以及Row 组件用法
热门推荐
weixin_40419104的博客
02-25 1万+
使用row在水平方向创建一行 一将组col插入在row中 每个在col中，键入自己的内容 设置通过col的span参数，指定跨越的范围，其范围是1到24 每个row中的col总和应该为24 如下图这样 注意：非模板/渲染模式下，需使用i-col 给通过row添加gutter属性，给可以的下属col添加间距 我这里给的col间距是30px 给通过row设置参数align为不...
vue 日期组件 滚动选择-非翻页--vue.js
u011263368的博客
10-25 2702
地址: https://github.com/DaveyDai/vue-scrolldatepricker npm install npm run dev App.vue 中有调用示例~ 兼容同时多种选择 喜欢就给个星星~~3q~
vue+iview ui库table组件中添加日期选择器
05-31
在iview的Table组件中添加日期选择器可以通过iview的template模板语法来实现，可以参考以下代码： ```html <template> <Table :columns="columns" :data="data"> <template slot-scope="{row, column}"> <DatePicker :value="row[column.key]" type="date" @on-change="onChange(row, column.key, $event)" /> </template> </Table> </template> <script> import { Table, DatePicker } from 'view-design' export default { components: { Table, DatePicker }, data() { return { columns: [ { title: '日期', key: 'date' }, { title: '内容', key: 'content' } ], data: [ { date: '2021-08-01', content: '示例1' }, { date: '2021-08-02', content: '示例2' } ] } }, methods: { onChange(row, key, value) { row[key] = value } } } </script> ``` 这里使用iview的DatePicker组件来选择日期，通过在Table组件的template插槽中添加DatePicker组件，可以将选择器添加到表格的每一行中。 注意，在onChange方法中，需要将选择器选中的日期值赋值给对应的行数据属性，这样才能实现选择器的同步更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值