lianwenxiu的博客

el-input只能输入0-100或1-100的正整数

后端校验toast提示，改为前端el-input框校验提示

1.把.el-table的样式设为：position:absolute.el-table { position: absolute !important;}2.把包着表格的父级设为 position: relative.tableArea { position: relative;}修改表格滚动条样式：// 修改表格滚动条样式.el-table__body-wrapper::-webkit-scrollbar { width: 6px; heig...

像这种效果，不论切换大小屏幕都要让页码直接在底部显示，不要出现外侧的滚动条，只要滚动内部表格就可以思路：在页面初始化的时候，要获取当前屏幕的高度减去顶部其他部分的固定高度，设置表格的高度，然后在mounted钩子里设置当屏幕切换时，重新获取屏幕高度，再重新赋值渲染页面就ok!上代码：html:data数据定义：钩子函数：created() { this.getUsers(); let screenHeight = document.docu

proxyTable: { '/api': { target: 'http://10.10.10.47:10003', //服务器目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //路径接口 } } }

最近做一个后台管理系统，做登录页的记住密码功能，记录下：思路：点击登录按钮，调用登录接口，在登录成功回调里判断，如果记住密码已选，就把用户名密码存到Cookie里，否则就清除Cookie；点击退出后回到登录页，在登录页的created钩子函数里，从cookie里取用户名、密码赋值给当前input框，checked设为true。思路图：上代码：getCookie，setCookie，clearCookie方法：//读取cookiegetCookie() { if (docum

业务场景：在新增用户弹框里，邮箱为非必填项，不填也能提交成功，但是如果填了，要进行格式校验vue结构：要加prop<el-form-item label="邮箱" prop="email"> <el-input v-model="editForm.email" clearable></el-input></el-form-item>data数据里定义校验规则：// 邮箱校验规则const checkEmail = (rule, v

后台在查询用户列表时，返回一个status状态值 true 或 false 来表示 开启 或者 停用true为开启，false为停用，所以对应的操作应该是相反的，开启(true)的时候显示停用按钮，停用(false)显示开启按钮操作区代码示例：因为调用开启停用接口，后台并未返回状态值，直接用查询接口中的status值做取反处理即可，也就是当前行的row.status最后，点击开启或关闭按钮，就会调用接口改变状态，同时按钮颜色也会跟着改变...

和后台调接口的时候遇到一个问题，记录一下调用退出登录的接口时，使用的是form-data的形式，在vue中如何设置1.需要在axios拦截器的地方通过传递过来的 type 值来判断，如果是form就设置请求头：content-type：application/x-www-form urlencoded；// Request interceptorservice.interceptors.request.use(config => { // 判断有无token，如果有设置h.

win10配置nginx文件下载1.首先打开nginx官网下载地址：http://nginx.org/en/download.html2.下载最新的稳定版本：3. 下载好之后，解压放到自己想放的盘下面4.在解压的根目录（nginx.exe所在页面）下 打开cmd窗口 执行start nginx.exe 或者直接执行 nginx.exe 即可启动Nginx5.此时在浏览器中输入localhost:80 即可进入欢迎页，在任务管...

在vue项目中，我们用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。this.$router.push({ path: '/liveing', query: { routeParams: JSON.stringif...

做H5项目的时候遇到一个问题，我从 login 登录页通过 this.$router.push（{ name: 'home' }）路由登录成功后跳转到首页，但在ios系统下，会有一个默认返回条，点击返回键出现以下情况，路由显示的是回到登录页，而页面却还是首页。解决思路：开始我试着把push改为replace，但是发现并没什么卵用，还是会出现问题，所以只好用路由导航守卫去监听。在首页加入...

在用vue+iview做的一个项目中，后台给我返回一个名称和费用拼接的字符串，我在iview的表格中显示出来，并且要让折行显示或者是加四个空格显示。发现后台给我加上的空格在前端根本显示不出来，还得自己处理。效果图：后台返回数据：typeList: " 图文咨询 (0.01) 视频会诊 (0.02)"解决思路：拿到后台给的属性，先把把字符串用空格分隔成数组，取到自己...

在H5项目中，进入如搜索页，点击搜索页再跳到另一个搜索页，要调起键盘事件在第一个搜索页的input绑定click事件，跳转到第二个搜索页，在input框加autofocus="autofocus"，发现有时好用，有时会闪现一下又消失，然后在mounted里加入一句代码，貌似好了// 进入页面调起键盘this.$nextTick(() => { this.$refs.se...

在vue项目里，选择婚姻已婚和未婚状态，也可以不选，后台返回字段 maritalStatus 为0时代表未婚，1代表已婚如果不选就显示-<span>婚姻：{{ datas.maritalStatus !== null && datas.maritalStatus === 0 ? ('未婚', '已婚') : '-' }}</span>...

在vue-router中做底部导航栏加active样式的做法：在router.js中设置linkExactActiveClass属性：在使用的地方加入exact:定义公共样式：.active{ color: #51BC8A }...

当启动vue项目安装依赖时报错暂时想到四个原因：1. node版本低，升级到新版本2. 执行npm cache clean，再重新npm install3. 如果是下载依赖包失败的话，可以使用cnpm淘宝镜像下载，或者yarn下载安装4. 报错一般都会有错误提示，根据错误提示进行操作...

如果和不同的后台调接口，如果后台接口没有合到一起，前端可以配不同的代理来共同访问他们的接口在config文件夹下的index.js中设置如下：proxyTable: {    '/api/login': {  // 第一个代理：此处的路径是所有接口前面相同的部分，用来匹配带有这部分路径的        target: "http://192.168.100.209:8910",...

1.父向子传值props父组件：&lt;child :inputName="name"&gt;子组件：（1）props: {   inputName: String,   required: true  }（2）props: ["inputName"]2.子组件向父组件传值$emit子组件: &lt;span&gt;{{childValue}}&lt;/s...

前言在实际开发中，有很多需要根据不同环境配置不同的接口地址的情况，如果每回打包的时候都去改配置文件就超级麻烦，所以这边提供了一个自动化的方法，无需打包前修改配置文件就能实现根据不同环境调用不同接口。步骤1.修改package.json文件备注：cross-env是跨平台地设置及使用环境变量的插件2.修改build/build.js文件此处设置node环境变量的语...

最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。1. UI设计师会把自己做的图标库上传到阿里巴巴图标库，打开设计师给的图标库地址，把所有要用到的图标点击加入购物车2. 到购物车中点击添加至项目3. 给项目起个名字，点击确定，...

做批量删除的时候，要确定数组对象中每一项中有没有发布状态的，如果有也就是判断releaseStatus字段有没有为true的，只要有一个为true就给出提示让撤回后再删除，如果没有发布中的直接删除，下面这句可以快速判断，只要有一个是true就返回false，否则返回true。看项目需要也可以用every来判断，具体用什么看具体业务逻辑，都是返回布尔值const search = [ ...

前提：vue+iview做后台管理系统需求：页面一行有固定的4张卡片，每张卡片里有图片，图片是从后台系统中上传的，大小不固定，要卡片中的图片高度随着屏幕大小自适应小屏幕效果：大屏幕效果：解决方法有两种：1. 利用@media媒体查询做。① 在index.html中加入meta标签 <meta name="viewport" content="width=dev...

项目中遇到一个问题，记录一下，vue项目中前期没有做图片懒加载的时候，当图片出现错误或者显示路径不对，我加了onerror事件进行错误监听并添加一张默认的图片，优化用户体验。后期因为图片数量变多，所以加入了图片懒加载，但在懒加载中挂载时只加了loading的图片，没有加error，所以导致页面图片未正常加载的地方出现默认图片闪烁的现象，最后在挂载时加入error引入一张默认图片就好了...

最近项目做的后台管理系统中，要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vue+iview做的，iview中有select远程搜索。但是，iview框架也有弊病就是会将输入框中的输入值进行过滤，如果你搜英文的，ok是可以实现的，看人家例子准备的数据也是英文的，但咱要求的是中文也能搜索，首字母和拼音都支持。 输入中文，因为框架中是根据value取值的...

今天在安装依赖包的时候老报错，报错如下：npm ERR! Unexpected end of JSON input while parsing near '...Comment: https://open'因为我安装过淘宝镜像，怀疑是因此报错，上网找答案，要执行下面这句话清除下缓存：npm cache clean --force然后再重新安装一下官方的镜像：npm set reg...

最近项目里要求支持多格式视频上传和播放，用的是H5的video标签，但video只支持三种格式mp4/ogg/webm这三种。实际需求要求同时也要支持flv/avi/rmvb这三种格式。到目前只找到能支持flv这种格式的插件，github地址：https://github.com/bilibili/flv.js1、在vue项目中，下载安装依赖包npm install --save f...

项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。先看下效果图：页面效果：点击 导出Excel 调用导出接口成功了：后台返回的数据流，一堆看不懂的乱码：接下来要处理这堆乱码，因为用到的地方多，所以在util.js...

最近用vue做移动端项目，要求当所有input框都有值时才点亮提交按钮，如下图：解决思路：通过三个input框的v-model值运用逻辑运算符返回一个布尔值，通过computed计算属性return出去，用此变量控制提交按钮button的disabled的禁用状态。具体做法：结构：computed属性的设置：当3个变量都为true时，返回true，disable...