
vue
Ccoolor
这个作者很懒,什么都没留下…
展开
-
url加时间戳方法及作用
场景复现:在页面通过绑定url显示一个图片,当鼠标移动到图片上面时显示上传阴影图标,上传完成之后,显示最新的图片。产生问题:上传图片之后,页面显示的图片并没有发生变化,刷新几次浏览器之后才会发生变化。解决方案:将绑定的图片url后面加上时间戳。原来url "https://uatcdn.software.com/upload/one.png"修改后url "https://uatcdn.software.com/upload/one.png"+'?timestamp=' + new原创 2022-02-09 18:34:35 · 5851 阅读 · 0 评论 -
vue项目记录页面滚动条高度,再次返回该页面时自动滚动到当前高度
一、离开当前页面之前保存滚动条高度我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab方法,故在该方法中保存离开页面时滚动条的高度。 beforeLeaveTab(tab, event) { //参数tab是要进入的页面的唯一值,event是要离开的页面的唯一值。 let _this = this // 存滚动条位置 if (_this.$el.querySelector('.tableQh'原创 2021-04-08 11:23:14 · 1283 阅读 · 0 评论 -
vue父组件调用子组件的表单验证方法
需求:父组件调用子组件的表单验证方法,验证成功,继续进行接下来的操作,验证失败,提示用户并返回。一、在父组件中引入子组件 <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" > <exciter-edit ref="alternatorRef" /> <sp原创 2021-03-02 14:02:10 · 4548 阅读 · 0 评论 -
vue小记
何时适合侦听属性:虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ an转载 2021-02-20 09:44:39 · 168 阅读 · 0 评论 -
vue watch监听对象属性
一、监听对象eg:data里面定义的对象; queryInfo: { model_type: '', name_key: '', bus_base: '', bus_base2: '', bus_name2: '', },watch监听监听对象的时候要在监听属性里面写上deep: true watch: { queryInfo: { handler: function (val,va原创 2021-02-03 15:54:18 · 362 阅读 · 0 评论 -
vue实现中英文的切换
原文链接1.下载插件npm install vue-i18n --save-dev2.创建中文文件(zh.js)和英文文件(创建目录src/com/language)//zh.jsmodule.exports = { language: { name: '中文' }, user: { LogOut: '退出登录', Rights: '权限管理', systemLog: '系统日志', }}//en原创 2021-01-22 10:00:58 · 707 阅读 · 0 评论 -
vue兄弟父子组件之间传值
一:父组件修改子组件的值1.在父组件中声明子组件import editstability from '../edit/editSimilarStability.vue'2.使用引入的子组件,可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用 <editstability v-if="editVisible" ref="editVisibleRef" @alterGovernorSt="getData" >原创 2021-01-13 10:49:57 · 137 阅读 · 0 评论 -
vue项目设置反向代理跨域
网上介绍vue设置反向代理的博客很多,方法也很多,我用的是在vue.config.js文件里进行设置,改文件和src文件夹同级代码如下:// vue.config.jsconst webpack = require('webpack')module.exports = { devServer: { proxy: { '/api': { target: 'http://192.168.20.220:8092',// 发送原创 2020-12-04 15:58:57 · 616 阅读 · 0 评论 -
项目登录页面,后端生成验证码,前端显示问题
需求,项目中的登录页面用到了验证码,后端生成啦图片数据,前端调取接口获取数据,显示在页面template <el-form-item prop="code"> <el-input ref="code" prefix-icon="el-icon-document-checked" clearable placeholder="验证码" v-m原创 2020-12-04 09:57:35 · 1695 阅读 · 0 评论 -
element-ui tree树形组件自定义实现可展开选择表格
原文链接:原文链接转载 2020-12-28 10:02:55 · 995 阅读 · 0 评论 -
elementUI中表格翻页后保持记忆功能
需求:在当前也勾选表格某一行之后,当再次跳转回该页面之后,原来已经勾选了的还保持选中状态一 table树形添加row-key="id" <el-table border :data="treeTableData" row-key="id" ref="multipleTable" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="原创 2020-12-01 14:29:43 · 693 阅读 · 0 评论 -
实现elementUI的表格组件只能同时选中一行,且不可以全选
需求:表格组件只可以同时选中一行,若已有某一行被选中,则再次点击其他行时,已选中的当前行变为未选中状态。实现只可以选中一行template <el-table height="94.8%" ref="multipleTable1" type="index" border style="width: 96%; border-bottom: 1px solid black" :da原创 2020-11-24 08:38:38 · 2234 阅读 · 1 评论 -
vue项目post请求中携带‘Content-Type‘: ‘application/json;charset=UTF-8‘
今天使用post方法向后端请求数据,始终不成功,最后在方法请求头中加上 ‘Content-Type’: ‘application/json;charset=UTF-8’,请求成功 async bpaParams() { const res = await this.$http.post( '/acline/datbpagenerate', JSON.stringify(data), { headers: {原创 2020-11-18 15:02:11 · 9251 阅读 · 0 评论 -
前端下载时传递参数将参数拼接在接口(url)后面传递给后端
需求:常见的传递参数都是将参数写在花括号里面,但是有时候花括号并不适合,可以选择将参数拼接到接口后面let url = this.paramConfig.httpPath + '/basedata/download?baseDataID=' + ss.join(',') + '&Area=' + window.sessionStorage.getItem('userArea')完整的代码如下,实原创 2020-11-09 11:56:01 · 3508 阅读 · 1 评论 -
echarts地图,拖动地图实时获取鼠标处的经纬度、当前放大倍数等信息
注册地图 var myChart = echarts.init(document.getElementById('viewChart')) echarts.registerMap('guizhou', guizhou)监听鼠标拖动事件 myChart.on('georoam', function (params) { console.log(myChart.getOption().geo) //地图中的信息,包括经纬度、缩放大小等 })监听鼠标点击事件 myChart.on('c原创 2020-10-23 15:20:32 · 2138 阅读 · 0 评论 -
vue+elementuI 解决页面跳转后table表格最后一行边框线显示不全问题
overflow属性为hidden时,最后一行显示不全 .el-table { overflow: hidden;} overflow属性为auto时,最后一行可以显示.el-table { overflow: auto;}原创 2020-09-25 11:04:27 · 4337 阅读 · 1 评论 -
Vue+elementUI+upload 点击按钮弹出弹框,在弹框中有两个按钮,点击下载按钮进行下载功能,点击上传进行上传文件功能
需求分析:点击按钮会弹出一个弹框,弹框中有两个按钮,点击下载按钮进行下载,点击上传按钮进行文件上传。ps:功能看着可能有点多 ,其实分析一下很简单,首先 点击按钮弹出弹框,在弹框中有一个按钮和一个upload组件,点击下载按钮则关闭弹窗调用方法进行下载,点击上传则走upload组件的功能。template <el-button class="elbutton" style="width:100%" type="pr原创 2020-09-12 17:50:28 · 3867 阅读 · 0 评论 -
vue-element-upload 文件上传打开选择文件弹框前进行提示或操作
需求分析:在使用elementUI中的上传组件时,点击上传按钮就会立即打开文件弹框,有时候不想让文件弹框立即打开,而是点击按钮后先进行其他的判断,若符合情况再打开文件弹框。方法一原文链接方法二template<div id="app"> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"原创 2020-09-12 17:04:50 · 8908 阅读 · 2 评论 -
elementUI中table表格,带选择框,默认勾选指定的数据
需求场景:table表格,第一列为选择框,默认某几行数据为选中状态。原文链接template <el-table :data="roleData" border stripe height="260" style="margin:20px 0" ref="docTable" @select="(selection,row)=>{selectHandle(selection,row转载 2020-09-10 23:19:05 · 5010 阅读 · 3 评论 -
elementUI中的table表格,带选择框,点击选中选择框,获取当前行id,存储数组若没有当前id,存进数组,再次点击,取消选中,从存储数组中删除id
需求场景:一个表格中有几十条数据,每一行代表一条,表格第一列是选择框,当点击某一行的选择框,选中此条数据,将此条数据的id存进存储数组,若点击取消选中状态,则将该条数据对应id从存储数组中删除。template代码 <el-table :data="roleData" style="margin:15px 0" border stripe height="260" @select="(selection,row)=原创 2020-09-10 21:56:31 · 2330 阅读 · 3 评论 -
elementUI动态切换校验规则且切换校验规则时清空上一次校验产生的警告文字
**this.$refs.transformerForm.clearValidate(['transformerLVSRateCapacity'])**清除切换校验时上一次校验留下的警告文字,<el-form :model="transfomerInfo" :rules="rules" ref="transformerForm" label-width="170px"> <el-form-item label="低压侧容量(MVA):" prop="transformer...原创 2020-09-03 18:34:16 · 1675 阅读 · 0 评论 -
vue中post请求报400的错误
首先上图出现了400错误,一般是前后端交互的方法参数不一致,发生此错误需要仔细检查前端传递的参数数据的参数名、参数数目、参数类型是否与后端保持一致。我看了我提交的参数和路径,和后台都一样,而且用ostman可以获取到数据,但在项目中获取不到,这是我开始的请求方法查资料得知axios默认使用application/json格式来提交数据的,而Postman请求格式是application/x...原创 2020-02-27 13:44:36 · 7692 阅读 · 6 评论 -
eslint验证末尾有分号,字符串单引号与vscode格式化文档冲突
在项目根目录下面创建 .prettierrc 文件,写入{“semi”:false,“singleQuote”:true}原创 2020-02-20 23:44:29 · 1398 阅读 · 1 评论 -
vue+elementUI中使用v-for循环出多个select下拉框,默认绑定,但改变一个下拉框,其余下拉框也会改变的问题
vue+elementUI中使用v-for循环出多个select下拉框,默认绑定,但改变一个下拉框,其余下拉框也会改变的问题样式如下<el-table-column label="姓名" prop="username"> <template slot-scope='scope'> <el-select v-model='scope.row.type'>...原创 2019-12-18 12:59:51 · 11049 阅读 · 10 评论