Vue
我在在啦 我让让啦
一些记录
展开
-
89.实现长时间不操作页面会自动退出到登录页面
/ 超时后会跳转到登录页面 所以需要清除cookie、localStorage和sessionStorage。// 判断当前路径是否为登录,若不是则跳转到登录页面。// 获取鼠标按下后的最后时间。// 设置超时时间:12小时。// 鼠标按下时更新最后时间。// 判断是否超时方法。原创 2023-07-11 16:06:13 · 568 阅读 · 0 评论 -
84.elementUI表格动态更改列名
前言:因为项目要求,需要根据接口返回的type判断,动态更改表格第一列的列名以及对应的值,刚开始自己通过v-if判断type的值,来展示对应字段的值,但是不知道为什么会出现接口返回值了,但页面没有展示出来,所以再三研究加百度,找到解决办法了!不想打字了,直接截图吧:希望自己长记性,下次不要再不会了!!!...原创 2022-05-13 08:51:02 · 704 阅读 · 0 评论 -
83.echarts力导向图点击节点更改背景色并在点击下一个节点时还原之前节点背景色
啊啊啊啊可算做出来了!!!过程下:希望我长记性!!!!已经为此花费了整整6个小时了!!要哭死!!原创 2022-05-11 14:21:50 · 344 阅读 · 0 评论 -
82.elementUI下拉框可输入绑定数据
前言:项目要求 需要下拉框可用户自己输入内容添加数据,所以百度找到了这个方法 记录一下。<el-select v-model="addForm.name" @change.native="selectBlurLogic" @blur.native="selectBlurLogic"> <el-option label="1" value="1"></el-option></el-select>methods:{ // 下拉框输入原创 2022-04-13 09:49:37 · 1013 阅读 · 0 评论 -
81.Vue中echarts图表联动处理
我竟没想到如此简单!!!以下方法适用于引用同一组件 的多个图之间联动。在引用的组件里 initChart()方法里的setOption语句后边添加两行代码就可以!!!this.myChart.group = 'group1'echarts.connect('group1')zhuyi...原创 2022-03-24 17:20:57 · 1829 阅读 · 0 评论 -
80.Vue跳转页面在新窗口打开并传参
前言:项目要求需要点击表格某列跳转到另一个页面,这个页面是新窗口并且需要携带参数到另一个页面里使用。需要用到this.$router.resolve()1.在跳转方法里用this.$router.resolve()跳转并使用cookie保存参数传参// 因为chain_check页面有两个页签 selectNum 是为了区分跳转到trace查询还是span查询// 点击跳转到trace查询页面getToTrace(row){ const newUrl = this.$router.r原创 2022-01-24 16:50:25 · 978 阅读 · 0 评论 -
79.elementUI表格表头添加悬浮展示
果然度娘深得我心!!绝了!!!转一下 别忘了。。。ElementUI表格中添加表头图标悬浮提示_阿雷前进中...的博客-CSDN博客_elementui悬浮提示<el-table-column label="操作" fixed="right" :render-header="tableAction" width="120"> <!--scope 即为 userList scope.row即为当前行数据 --> <template slot-scope="scope"&g转载 2022-01-07 16:32:56 · 1261 阅读 · 0 评论 -
78.elementUI表格展开行有些行可展开有些行不可展开
根据接口返回的数据里某一行的某一个字段来判断这行是否可展开:果然,百度诚不欺我!!转一下,记录一下,防止忘掉......Element ui table expand展开,某些行需要展开,某些行不需要展开_struggling_web的博客-CSDN博客把大象放冰箱里需要几步1.添加自定义属性名2.根据自己的情况定义类名3.通过css控制 .expand 的显示隐藏ok!!成功把????放进冰箱https://blog.csdn.net/qq_45939795/article/details/1转载 2022-01-06 14:07:45 · 508 阅读 · 0 评论 -
77.实时刷新和重置(每隔1分钟请求一次所有接口)
前言:项目中有几个页面需要在右上角添加实时刷新和重置按钮,这里用灯泡亮代表实时刷新,灰停止实时,点击重置会重新实时刷新。1.先在页面右上角添加实时刷新灯泡和重置按钮原创 2022-01-06 10:27:49 · 2341 阅读 · 0 评论 -
76.解决Vue引用echarts报错Cannot read property ‘getAttribute‘ of undefined
记录一下 防止下次遗忘:vue使用echarts报错TypeError: Cannot read property ‘getAttribute‘ of undefined_weixin_40624809的博客-CSDN博客问题情况自定义一个名为change的函数,函数里面是echarts的渲染代码在created里面调用change,报错:TypeError: Cannot read property ‘getAttribute’ of undefined解决方案在mounted里面调用,或者在crea转载 2021-12-22 15:02:33 · 535 阅读 · 0 评论 -
75.为元素添加横向滚动条及隐藏纵向滚动条
铭记:需要设置父元素宽度为100%,然后各个子元素宽度加起来要超过父元素的宽度,不然不会显示滚动条<div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></div>ul{ width:100%; // 此时宽度若为1000px overflow-x:sc原创 2021-12-22 10:18:09 · 636 阅读 · 0 评论 -
74.解决Echarts图标切换后缩成一团的问题
已经遇上两次这种问题了,需要转一下原博主的文章记录一下,防止下次再忘了!!解决ECharts图表切换后缩成一团的问题_King汀的博客-CSDN博客_echarts图缩成一团转载 2021-12-21 17:37:40 · 1629 阅读 · 0 评论 -
73.elementUI表格展开行实现只展开一行以及打开子表格获取接口数据遍历不到子表格上的问题(已解决)
1.首先说一下点击表格展开行符号调接口获取子表格数据却遍历不上问题直接将接口数据赋值给子表格绑定的tableData1数组是无法将数据带到子表格里的,需要改成map接口数据,然后将每一个item逐个push到tableData1数组里。2.怎样才能实现每次只展开一行呢?这里需要再在外表格上添加两个属性以及在展开子表格方法里添加一些代码:至此,两个问题解决了!记录一下 防止下次遇到又不会了.........原创 2021-12-21 16:00:42 · 663 阅读 · 0 评论 -
72.Vue+elementUI表格多选时判断只要有一条数据不符合条件就弹出对话框提示
前言:项目中遇到表格里数据,编辑时有三个字段是必填的,然后点击操作列里的启动和左上角的批量启动时,就要判断,你所选的数据里,是否符合这三个字段全部不为空的条件,从而决定能不能进行操作。1.单条数据好判断,直接if---else就可以了if(row.user=='' || row.file=='' || row.time=='' || row.user==null || row.file==null || row.time==''){ this.$confirm('请检查编辑中必填项是否原创 2021-12-01 16:23:19 · 2072 阅读 · 0 评论 -
71.elementUI表格去掉表头
果然还是度娘深入我心!!!就设置一个属性 完美解决!!!1.原始表格代码:<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column>原创 2021-11-23 15:08:49 · 2716 阅读 · 0 评论 -
70.Vue+elementUI 同一系统中设置点击按钮切换两种菜单展示
前言:新开发的项目中,需要做该产品的两种不同类型的页面,对应的各自菜单又不相同,所以设置一个切换按钮,当切换后,刷新页面跳转到对应菜单的首页。1.首先在系统头部添加下拉框切换车险和非车(默认展示车险)2.默认展示车险,绑定值为1,切换到非车,绑定值就为23.在router.js和login.vue页面分别获取cookie值,判断selVal获取对应菜单数据4.结合这几个页面的逻辑,就可以切换车险和非车的菜单了,接下来就是将菜单对应的文件名建好,不要混乱了就OK...原创 2021-11-16 14:16:38 · 2428 阅读 · 0 评论 -
69.Vue+elementUI表格点击编辑按钮后没改数据,关闭弹框,再次点击编辑按钮,弹框里数据为空(已解决)
前言:在项目开发中,发现,第一次点编辑,弹框里数据赋值过来了,但关闭弹框,再次点击此条数据的编辑按钮,会发现,弹框里所有数据都为空,这是因为第一次打开没有改变数据,没有提交,数据内容不变,所以第二次打开弹框,监听的此条数据没有变化,即监听不起作用了解决方法就是,在父组件watch里监听新增编辑弹框的visible,如果为false时,就将传给子组件的rowData数组设置为空数组。watch:{ dialogFormAddEdit(value){ if(value == f原创 2021-11-11 15:08:07 · 1887 阅读 · 0 评论 -
68.Vue引用d3.js v3升级到v5办法
前言:最近开发的项目需要做力导向图,我记得之前的项目写过,就想直接按着写,谁知道一直报错,后来才发现现有的项目安装的版本是3.5.17,但代码里一些方法、属性是v4版本以上用到的,所以就想升级一下版本。我看有人说有3种方法 我就试了其中一种,对我有用,记录一下,防止下次忘了。1.先在package.json里修改d3版本到指定版本"dependencies":{ ... "d3":"5.16.0", ...}2.按Ctrl + ~ 键 输入命令行:npm updat.原创 2021-11-09 15:08:15 · 1144 阅读 · 0 评论 -
62.使用npm install 安装依赖报错问题解决
公司连外网需要代理 最近发现电脑本地的npm不能用了 npm安装Vuecli都开始报错了 百度发现 有可能是因为代理失效 再全局下设置一下代理就可以了npm config set proxy http://server:port记录一下 以防下次遇见再忘了.........原创 2021-09-14 17:30:35 · 203 阅读 · 0 评论 -
60.实现elementUI表格点击某一行选中勾选框
前言:项目中需要做到除了勾选表格第一列勾选框去选中数据外,还要通过点击某一行任何地方,都可以勾选到这条数据,并且要做到选中的数据不能重复,记录一下:(全选和选中勾选框的方法就不写了 这里只写通过点击行选中勾选框)1.首先给<el-table>添加 ref='multipleTable' 和 @row-click="handleClickTableRow"<el-table ...... ref="multipleTable" @row-cli原创 2021-08-20 14:24:55 · 5419 阅读 · 1 评论 -
59.解决elementUI表格勾选数据后切换每页几条后串行问题
前言:项目里要求选择几条数据后,不论切换每页几条还是切换页数,选择的那几条数据不变,直到重新查询新的数据才不显示。之前只做到切换页数和切换每页几条后,勾选几条数据没有取消,但发现勾选后获取的数组和数据左侧打对钩的数据不对应,串行了。这是因为我监听表格数据变化时,拿自己设置的ids做比较了,一旦切换每页几条或更改页数后,ids就会变化,不是唯一的,但每条数据的id是唯一的,所以把判断依据改成id就对了,代码如下:watch:{ tableData:{ handler(原创 2021-08-16 13:28:24 · 602 阅读 · 0 评论 -
57.elementU表格固定列在左侧或右侧不动
项目要求表格里前两列系统列、子系统列和最后一列操作列都需要固定住,在左右拉动水平滚动条时,这3列始终保持原来位置不动。给前两列的<el-table-column>加上fixed="left",给操作列加上fixed="right"<el-table-column prop="system" label="系统" fixed="left"></el-table-column><el-table-column prop="subsystem" label="原创 2021-08-10 16:48:04 · 6073 阅读 · 0 评论 -
56.elementUI表格调整列宽后表头和内容宽度不一致问题解决
在项目app.vue文件的style里添加:<style> body .el-table th.gutter{ display:table-cell!important; }</style>原创 2021-08-10 15:29:16 · 1640 阅读 · 2 评论 -
54.Vue+elementUI日期时间范围选择器左侧添加快捷选项
前言:官网上只有最近一周、最近一个月和最近三个月快捷选项,但项目有要求,需要换成最近10分钟、最近30分钟、最近一小时、最近一天和最近一周,找了一些资料,写好了记录一下,以便下次使用。1.首先是日期时间范围控件(change事件和pickerOptions里的getTime方法和官网类似就不写了)<el-form-item label="操作时间"> <el-date-picker v-model="selectForm.exec_time"原创 2021-08-02 13:34:47 · 1187 阅读 · 0 评论 -
53.js如何判断滚动条是否滑动到底部
前言:这个真的!!一定要记录一下!!不然太对不起我找了各种方法都不可以最后误打误撞找到解决办法了!!我这里主要是根据滚动条是否滑动到底部来改变步骤条显示步骤的。1.在mounted()里添加window.addEventListener('scroll',this.scroll,true)2.在methods()里添加scroll()方法就可以啦...原创 2020-08-28 18:22:45 · 677 阅读 · 0 评论 -
52.在vue中使用d3创建力导向图并动态新增、删除节点及联系
1.安装d3npm install d3 --save-dev2.在页面中引入d3import * as d3 from 'd3'原创 2020-07-27 16:25:39 · 6062 阅读 · 5 评论 -
51.vue页面跳转parmas传参之刷新页面参数丢失问题解决方法
说在前面:今天遇到一个问题,通过vue的parmas传参,跳转到相应页面后,F5刷新传过来的参数就会消失。尝试改成query传参,但由于项目的路由不能带参数,不然刷新会找不到页面。百度了很长时间,尝试了很多次,最后找到了一个方法,记一下,以备以后需要。(主要是实在搞不懂vuex 感觉还是local storage好理解一些。。。)...原创 2020-05-20 15:53:49 · 1066 阅读 · 0 评论 -
48.Vue.js官网学习笔记(处理边界情况)
一、访问元素组件1.访问根实例在每个new vue实例的子组件中,其根实例都可以通过$root属性进行访问:// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /*...原创 2020-01-17 15:26:00 · 226 阅读 · 0 评论 -
47.Vue.js官网学习笔记(插槽)
1.插槽内容vue实现了一套内容分发的API,将slot元素作为承载分发内容的出口2.编译作用域父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子级作用域中编译的3.后备内容为插槽设置后备内容(默认的内容)是很有用的,它只会在没有提供内容的时候被渲染例如在下边这个组件中:如果我们希望绝大多数情况下会渲染文本submit,就可以在slot插槽中写上s...原创 2020-01-16 17:43:31 · 185 阅读 · 0 评论 -
46.Vue.js官网学习笔记(自定义事件)
1.事件名触发的事件名需要完全匹配监听这个事件所用的名称2.自定义组件的v-modelVue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <i...原创 2020-01-16 17:23:26 · 299 阅读 · 0 评论 -
45.Vue.js官网学习笔记(prop)
1.prop的大小写HTML中的attribute名称大小写不敏感,所以当使用DOM中的模板时,需要将驼峰命名法的prop名(firstName)改成短横线命名(first-name):Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<...原创 2020-01-14 14:39:17 · 293 阅读 · 0 评论 -
44.解决form表单提交前删除某一项,再次打开表单,那一项不会还原的问题
前言:在项目开发中,由于需求中要求编辑页面,类型下拉框展示的是type(中文),而传给后台的参数却是对应的typeid,并且需要删除form对象中的type。之前写的代码,虽然每次传参都会把type给删掉,只传id,但再次打开表单,会发现类型那一项为空(但是是有数据的)解决方案如下:通过JSON.stringify(_this.form)和JSON.parse(newObj),相当...原创 2020-01-13 13:56:53 · 689 阅读 · 0 评论 -
43.vue.js官网学习笔记(组件注册)
1.组件名在注册组件时,需要有组件名,即Vue.component( )的第一个参数;自定义组件名,字母必须全部小写,且必须包含一个连字符定义组件名的方式有两种:(1)使用短横线分隔命名(引用这个组件时也得使用短横线分隔 <my-firatName>)Vue.component('my-firstName',{...})(2)使用首字母大写命名(引用这个组件时&l...原创 2020-01-13 13:10:43 · 212 阅读 · 0 评论 -
41.vue.js官网学习笔记(表单输入绑定、组件基础)
一、表单输入绑定1.基础用法使用v-model进行数据的双向绑定(1)文本<input v-model="message" placeholder="edit me"><p>Message is : {{message}}</p>(2)多行文本<span>Multiline message is:</span>...原创 2020-01-07 17:17:46 · 229 阅读 · 0 评论 -
40.vue.js官网学习笔记(列表渲染、事件处理)
一、列表渲染1.用v-for把一个数组对应为一组元素用v-for基于数组去渲染列表,需要item in items形式的语法,items是源数据数组,item是被迭代的数组元素的别名。(1)v-for还支持第二个参数(可选),即当前项的索引:<ul id="example-2"> <li v-for="(item, index) in items">...原创 2020-01-06 09:39:27 · 161 阅读 · 0 评论 -
39.elementUI弹框中根据input框值是0还是大于0判断是否新增一项(动态添加input框)
前言:近期参与的项目中,需要在新增的弹框中做一个判断(编辑不动):通过判断用户输入的数量的值来动态的添加内容的input框。即:实现过程:(1)首先还是在showtable.vue页面写好新增编辑弹框和风险内容弹框<!-- 新增编辑 --><el-dialog :title="title" :visible.sync="dialogFormVisi...原创 2020-01-03 15:26:35 · 1297 阅读 · 0 评论 -
38.vue.js官网学习笔记(计算属性和侦听器、class与style绑定、条件渲染)
一、计算属性和侦听器1.计算属性对于任何复杂逻辑,都应属性当使用计算属性<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></...原创 2019-12-31 16:23:51 · 168 阅读 · 0 评论 -
37.vue.js官网学习笔记(安装与介绍、vue实例、模板语法)
一、安装与介绍1.用<script>引入直接下载并用script标签引入,Vue会被注册为一个全局变量;在开发环境下,不能使用压缩版本,否则会失去所有常见错误相关的警告。2.命令行工具vue提供了官方的cli,为单页面应用(SPA)快速搭建繁杂的脚手架;会带有热重载3.vue介绍vue是一套用于构建用户界面的渐进式框架,可以自底向上逐层应用,vue核心库只关心视...原创 2019-12-30 15:41:36 · 231 阅读 · 0 评论 -
35.解决elementUI里el-tag遍历数据错误的问题
前言:所参与的项目里,有个编辑页面是通过点击按钮能出现一个弹框,展示这个编辑项的所有值,可以实现选中几个,编辑项后就会展示几个原创 2019-12-27 15:38:36 · 2660 阅读 · 0 评论 -
32.vue中新增和编辑用同一组件情况下,解决两项分别可点击和不可点击问题
前言:最近项目开发中,有遇到需求如下图:即:在新增时只要求是否配置默认为否且不可点击,但编辑时就比较麻烦了,首先判断是否配置是“是”还是“否”,若“是”,则两个都不可点击,若“否”,则两个都可点击。1.刚开始写代码时,实现新增时不可点击很简单直接在show_table这个父组件中声明一个变量去判断,当点新增,使其为true,点编辑,使其为false:然后在...原创 2019-12-18 18:26:44 · 2516 阅读 · 2 评论