
iview 踩坑
前端加油站
如果可以实现记得点赞分享,更多关注:
https://gitee.com/coding_zxd
http://www.zxdblog.net
谢谢老铁~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
iviewUI Checkbox 多选框 多组全选或者全不选的问题
1.需求:点击类别,可以全选或者全部取消;选中当全选下面的子选项,父类型要跟着选中2.应用场景:一般常用于权限列表多层勾选3.解决思路 :单独封装一个多组全选的组件,这样就解决了其他类别同时被选中的问题父组件:<Modal width="900" v-model="modalAuthority" title="权限列表" ...原创 2018-11-29 14:18:49 · 9285 阅读 · 13 评论 -
打包之后npm run build放到服务器上之后刷新会报404怎么解决啊
方法一:打包之后npm run build放到服务器上之后刷新会报404怎么解决啊如果你是 iview + vue 的项目 请到src/route/index.js 把mode: 'history' 注释掉 再重新打包其他纯 vue-cli 项目的 直接找到mode: 'history' 对应的文件,一样 注释掉 再重新打包方法二:当然,如果不想要很丑的 hash,我们可以用路由的h...原创 2018-12-24 11:37:16 · 3206 阅读 · 1 评论 -
vue iview-admin 如何兼容IE浏览器(通用)
1. 安装babel-polyfill `yarn add babel-polyfill --save`2. src/main.js 引入babel-polyfill `import '@babel/polyfill`3. 在根目录增加babel.config.js文件 ``` module.exports = { presets: [ ['@v...原创 2018-12-29 11:26:43 · 4564 阅读 · 2 评论 -
vue 解决响应大数据表格渲染崩溃问题
1.场景描述发起请求获取上万条数据,进行表格渲染,使浏览器卡顿,导致网页崩溃。2.分析原因1.大量数据加载,过多操作Dom,消耗性能。2.表格中包含其他控件,增加渲染负担。原创 2023-12-01 11:59:53 · 2011 阅读 · 0 评论 -
iview 表单校验控件一直loading
1.需求描述:表单校验2.使用场景:新增或编辑角色,弹窗操作3.问题描述:modal弹窗做from表达校验,点击确定,如果校验不通过,控件不应该一直loading 如图:4.解决思路:一般这种问题很大可能就是自定义了检验函数,然而此函数并没有一个闭环,没有跑出去一个Boolean;可以检查一下是否函数内的判断逻辑是否有else的分支data () { const validateTime = (rule, value, callback) => { // 重点原创 2021-02-04 10:38:10 · 1194 阅读 · 0 评论 -
iview UI 下拉框select表单校验错误信息不消失
1.需求描述弹窗添加时,对下拉框进行选择,点击确定进行非空校验2.使用场景对下拉框进行校验3.问题描述选中下拉框的值之后,下拉框select表单校验错误信息不消失4.解决方案 (已解决加入)经过排查,是change事件重复导致冲突了,如下代码所示:<FormItem label="选择实验名称" prop='abtest_id'> <Select v-mo...原创 2020-04-02 11:23:25 · 2786 阅读 · 10 评论 -
iview UI 阻止下拉框select选中的值,不让其进行渲染
1.需求描述在一个table中,每一行都有排序下拉框,每个排序都是唯一的,不能重复,如图所示:2.问题描述现在的排序是 1, 2, 3 现在将第三行下拉框的值由 3 改变成 1,因为 1 已经再第一行存在,所以不允许重复,但是还是渲染成了 1 怎么破???4.解决思路首先查看API文档并没有回调拦截的事件或方法,所以只能自己重新渲染了,那如何渲染呢?...原创 2019-07-29 20:24:58 · 1734 阅读 · 2 评论 -
vue (iview)根据权限控制columns 的某列显示与隐藏(通用)
1.需求描述根据权限控制某列中显示与隐藏2.使用场景根据不同用户(普通用户,vip用户),展示对应的列3.解决思路将原来的columns copy一份,然后根据权限去让它过滤对应的列,就能返回最新的columns了举个例子,代码如下created() { userType(type) { // type: 1 普通用户 2 vip用户 如...原创 2019-07-14 14:55:25 · 10088 阅读 · 1 评论 -
iview Table里面Columns的this指向不是vue的问题
1.需求:操作某列中需要调用方法来实现功能2.应用场景:一般常见于列中是控件(如:selecte下拉框,input输入框)3.解决思路 :使用Table中 从 3.2.0 版本开始支持 slot-scope 写法。在 columns 的某列声明 slot 后,就可以在 Table 的 slot 中使用 slot-scope。slot-scope 的参数有 3 个:当前行数据 ro...原创 2019-07-09 17:38:58 · 1064 阅读 · 0 评论 -
iview-modal 点击按钮“确定”时弹窗自动关闭
1.需求描述:编辑或新增一条数据,弹框modal操作,做表达校验2.使用场景:新增或编辑角色,弹窗操作3.问题描述:modal弹窗做from表达校验,点击确定,如果校验不通过,不应该自动关闭弹窗4.解决思路:.解决思路1:给Modal添加属性loading后,点击确定按钮对话框不会自动消失,并显示 loading 状态,需要手动关闭对话框,常用于表单提交。(本人用此方法).解...原创 2018-11-29 14:27:16 · 5186 阅读 · 4 评论 -
iview checkbox 编辑内容时,没有将单条数据渲染过来
1.需求描述点击“编辑”将列表中的单条数据渲染在编辑弹窗中2.使用场景编辑“用户管理”3.问题描述编辑内容时,没有将单条数据渲染过来4.解决思路因为编辑页是做了表达校验的,在ruleValidate对象中,数组时必须要声明 type:'array',否则校验不通过,且一定要注意双向绑定的数据类型跟后台返回的数组里面字段的数据类型是否一致,如果不一致,是不可能渲染得...原创 2018-11-29 14:30:37 · 459 阅读 · 0 评论 -
iview 用vscode编写MenuItem标签报错
这是vetur中eslint的问题 在vscode菜单中,window: 文件->首选项->设置Mac: code ->首选项->设置输入eslint ,打开settings.json找到 “vetur.validation.template”: true 将其改为falseOK,收工!如果可以实现记得点赞分享,谢谢老铁~...原创 2018-12-06 15:02:24 · 1179 阅读 · 0 评论 -
iview 日期控件类型type=“datetimerange“ 表单校验规则
1.需求描述编辑页面需要做日期控件类型type="datetimerange"的表单校验2.使用场景规则管理--》编辑弹窗表单校验3.问题描述日期控件类型type="datetimerange"或者 type="daterange" 的表单校验不提示错误信息4.解决思路修改规则,代码如方案5.解决方案 (已解决加入)<Form-item label=...原创 2018-11-29 14:37:22 · 6025 阅读 · 5 评论 -
iview UI 下拉框select表单校验不自动展示错误信息
1.需求描述弹窗添加时,对下拉框进行选择,点击确定进行非空校验2.使用场景规则管理中添加规则3.问题描述下拉框select表单校验不自动展示错误信息4.解决思路表单校验中 下拉框控件感觉很奇怪,自带失去焦点事件5.解决方案 (已解决加入)校验中把 trigger: 'blur'去掉即可代码如下:ruleValidate: { str: ...原创 2018-11-29 14:34:02 · 2100 阅读 · 0 评论