iview
南城夏季
一路浅行
展开
-
iview inputNumber 输入框有值但是校验失败
表单校验的时候,输入输入的数字,但是表格依然校验失败。原因:校验的时候,是先执行校验的回调函数,再执行修改赋值。 可以通过打印验证是否是这种情况:很明显,获取修改后值的方法111111打印在后,校验逻辑2222打印在前。<template> <Form ref="form" inline :model="form" :label-width="120" :rules="rules"> <FormItem label="汇款金额" prop="money原创 2021-12-09 18:30:03 · 2762 阅读 · 0 评论 -
网络图片url转base64
getBase64(imgUrl) { let _this = this var xhr = new XMLHttpRequest() xhr.open('get', imgUrl, true) xhr.responseType = 'blob' xhr.onload = function() { if (this.status == 200) { var blob = this.response原创 2021-12-08 14:13:24 · 648 阅读 · 0 评论 -
iview table里面的输入框值不更新
vm.table.data[params.index].charge = val //修改输入值 data() { return { table: { data: [], cols: [ { title: '添加时间', key: 'addTime', minWidth: 120, align: 'center',原创 2021-12-07 15:34:01 · 470 阅读 · 0 评论 -
iview表单校验,输入框有值校验失败
问题当做表单校验时,输入框回显了后端返回的值,但是点击确认按钮时,却校验失败,提示当前项不能为空。分析:由于后端返回的是number类型,而其前端却使用的是普通输入框,所以导致类型不匹配。普通输入框即使我们输入的是数字,打印出来的值也会是字符串,这就说明了,普通输入框不可能会输出数字,但是回显是又是数字,好了,类型不匹配,验证自然不通过。解决让类似保持一致,可以把普通输入框改成数字输入框,并确保后台返回的类似也是数字。也可以继续使用普通输入框,然后在获取后台对应的值的时候,将number转换为原创 2021-11-30 14:13:46 · 3210 阅读 · 0 评论 -
iview 表单日期有值校验失败
表单校验失败可能情况1. 双向绑定使用的是:value解决:将:value改成v-model <!-- 通关期限 --> <FormItem label="企业通关期限" prop="tannetCompanyDTO.copEndDate"> <DatePicker type="date" format="yyyy-MM-dd" //:value="form.tannetCompanyDTO.cop原创 2021-07-28 18:31:02 · 670 阅读 · 0 评论 -
iview表单动态校验 提示信息错位
一开始我们对表单所有项进行校验,可以看到校验信息是正常的:然后我们取消一个口,通过v-if指令,justHz为false来隐藏掉对应的表单行:<FormItem label="执行标准适用国别" prop="standardPlace" v-if="justHz" :rules="{ required: justHz, message: `请选择执行标准适用国别`, trigger: 'blur' }"> <Select v-model="form.data.stan原创 2021-04-22 11:17:00 · 1467 阅读 · 0 评论 -
iview 的table表格组件怎么使单元格可编辑和输入
iview的官方文档没有给出可以编辑表格的属性,但是有时候我们有这个需求,希望直接在表格上改数据,就需要编辑功能了表格的列定义中,在需要编辑的字段下使用render函数template表格组件<Table border :data="detailData.vos" :columns="table.cols" :loading="table.loading"></Table>data中定义table对象 table: { cols: [ .原创 2021-04-01 10:05:51 · 1251 阅读 · 0 评论 -
uni-app 裁剪插件传了图片后,重复打开会出现第一张图片在左上角
关于传了图片后,重复打开会出现第一张图片在左上角的,可以通过位置来在视窗隐藏掉uni-app裁剪插件,https://ext.dcloud.net.cn/plugin?id=1076原创 2021-01-29 15:56:33 · 308 阅读 · 0 评论 -
iview table sortable排序不正确
解决方案问题方法注意点问题排序过程中发现有的项,倒序没问题,正序排序会有几个是乱的,暂时没明白是什么原因造成的。方法 { title: '周排名', key: 'thisWeekRank', sortable: true, //配置排序 align: 'center',原创 2021-01-28 11:35:48 · 982 阅读 · 0 评论 -
iview tab 组件设置当点击对应tab时才渲染和调用对应接口
tabs标签页,默认一开始就加载所有tab页中的内容,但有时候tab较多,而我们只关注其中一两个tab,这样就造成了性能浪费。所以,我们想当点击对应tab时才渲染和调用对应接口我们可以通过tab提供的事件,拿到当前点击tab的name,然后根据name来用v-if设置显示;<template> <Tabs @on-click="getTabName" value="generalSetup" name="setTab"> ...原创 2020-10-15 18:37:06 · 1648 阅读 · 0 评论 -
vue 点击左侧菜单右侧视图切换
1.业务需求:点击左侧的侧边栏菜单,希望只更新右侧的视图,实现这种局部更新的效果。这里就需要用到Vue的路由控制了。2.实现:2-1 在router.js中:截图:router.js完整代码:import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import center from '../views/center.vue...原创 2020-09-28 12:35:14 · 14998 阅读 · 15 评论 -
iview的DatePicker 怎么选择时分秒
<DatePicker@on-change="changeDate"ref="changeDatePicker"type="datetime"v-model="formatDates"></DatePicker>官方文档给的属性是不符合需求的,它只是在日期后面加默认的"00:00:00",所以我们需要自己去写方案:<DatePicker@on-change="changeDate"ref="changeDatePicker"type="dat...原创 2020-09-14 16:51:29 · 1946 阅读 · 0 评论 -
mpvue中怎么使用iview-weapp
1.去github下载iView Weapp 的dist文件夹,https://github.com/TalkingData/iview-weapp。2.将下载好的dist文件夹放入要做的项目的根目录static下,同时将dist文件夹改名字为iview(不改也可以,我这里是为了区分)。3.在src下面的main.js中写入下面代码export default { // 这...原创 2019-11-06 23:35:01 · 233 阅读 · 0 评论 -
去掉textArea右下方的小三角,或让小三角在聚焦时显示
需求:让小三角在聚焦时显示,失去焦点时掩藏。要掩藏直接加样式:textarea{ resize: none;} 完整代码:html: <Input @on-focus="focusInput" @on-blur="blurInput" :class="inFocus...原创 2019-10-11 21:10:57 · 897 阅读 · 0 评论 -
iview中的内置样式如何更改,iview中怎么使用框架中的类名类修改样式
这个问题真是困扰了这么久了。之前一直没查出来怎么去改,一直是通过行内样式来修改。问题:当一个元素封装了很多层时,我们无法找到里面封装的那个标签,所以无法要通过行内样式去修改。解决:方法一:直接重置样式 ---最简单的办法直接重置样式比如我们要修改iview中的封装的ivu-layout-header这个class类对应的样式先在浏览器找到影响样式的类名:iv...原创 2018-10-09 10:38:38 · 19888 阅读 · 2 评论 -
html2canvas使用中报 Error: Element is not attached to a Document
需要注意的是:绘图要选择的dom元素必须是原生元素,不能使用ui库元素,如用iview中的< Content >就会报错。Error: Element is not attached to a Document。下面代码可以看到,绘图的元素this.$refs.imgTransf指向的是div元素,这样是没有问题的, <img class="co...原创 2019-08-08 22:08:57 · 22868 阅读 · 5 评论 -
vue 中如何使用html2canvas将DOM转化为图片
1.安装依赖:npminstallhtml2canvas--save2.在vue文件中引入<script>import html2canvas from "html2canvas";3.在html中定义要转换的dom片段,及要图片要挂载的位置<Button type="primary" @click="changeImage">保...原创 2019-08-08 22:20:07 · 1211 阅读 · 0 评论 -
vue+axios+express+multer 在express使用multer上传和下载图片
1. 安装-----node中npm install multer –save2. 引入,还需要引入node中原生的2个模块(无需安装)-----node中var multer = require('multer');let fs = require("fs");let path = require("path");3. 写接口-----node中//上传接口...原创 2019-08-09 00:14:13 · 1095 阅读 · 0 评论 -
vue中循环列表点击每一项显示绑定的不同模块
需求:我需要点击每一项,来显示其对应的模块,隐藏其他循环项的模块解决:注意,还有其他更简单的方法,我这里写的只是针对我场景来的。vue: <div @click="joinGroupChart">加入群聊</div> <ul v-for="(item, index) in resulist" :key="index" ...原创 2019-08-16 23:03:54 · 1883 阅读 · 0 评论 -
去掉iview中 input table button的border
。。。必须要吐槽下了,太坑啊,直接权重重置样式不生效。。。1.错误写法html中 : <Input class="jm-input" size="large" v-model="jmName" placeholder="请输入你的大名" />css中 :.ivu-input{ border: none!important; }嘿嘿,...原创 2019-09-26 23:34:33 · 853 阅读 · 0 评论 -
iview 的Dropdown 下拉菜单click点击无效
iview的文档是个坑啊!!!!!!点击事件后面要加个修饰符native,如@click.native <Dropdown> <span> 在线制作 <Icon type="ios-arrow-down"></Icon> </span> ...原创 2019-08-03 17:08:40 · 4322 阅读 · 4 评论