前端
文章平均质量分 57
多数为vue实战中遇到的小问题
syx_cainiao
这个作者很懒,什么都没留下…
展开
-
vue 详情页返回列表页,保留列表页之前的筛选条件
需求场景:在列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件。 最开始的实现方法:路由跳转的时候,把筛选条件json对象放到query中去,传到详情页,返回的时候再带回来,会导致在url后面一直会有这么一堆东西在网上查到的方法:vuex + cookie 实现从详情页返回列表页,保留列表页之前的筛选条件在此基础上我抛弃了cookie,直接用vueX + 生命周期中的beforeRouteLeave、beforeRouteEnter轻松实原创 2021-03-15 13:47:59 · 2192 阅读 · 3 评论 -
vue+elementUI 时间选择器 选择时间时的顺序校验
页面如图显示:要求:时间的前后顺序 要有校验预计aa时间 早于 预计bb时间实际cc时间 早于 实际dd时间 早于 实际ff时间 早于 实际ee时间我的想法:选中后第一个时间后,后一个时间选择器的时间选择范围会以前一个时间选择器选中的时间为开始当修改两个时间中的前一个时间时,当选中前一个选择器的时间大于后一个时间选择器选中的时间时,后一个时间选择器清空代码:<el-form ref="formInfo" :inline="true" :model="BudgetYearForm原创 2021-03-09 15:24:28 · 1837 阅读 · 1 评论 -
vue 字符串内容格式化显示并添加序号
最近写代码遇到了返回数据 格式化显示的问题场景:当点击导入模板按钮导入数据失败时,后台会返回模板中数据填报错误地方的数据页面显示:返回数据:“共失败导入13条数据;\ n项目名称: vue显示内容格式化1, 项目进度必填;\ n项目名称: vue显示内容格式化2, 项目进度必填;\ n项目名称: vue显示内容格式化3, 项目进度必填;\ n项目名称: vue显示内容格式化4, 项目进度必填;\ n项目名称: vue显示内容格式化5, 管理类别必填;\ n项目名称: vue显示内容格式化6, 管理类原创 2021-03-08 13:41:56 · 1578 阅读 · 1 评论 -
elementUI 标记提示:图标显示待办业务数量
我曾经写了一篇 图标提醒效果:提示更新小红点 文章,这篇文章和之前的类似,都是用来做标记的场景:在页面添加图标,图标右上角显示待办业务数量效果:在这里我用到了elementUI中的标记组件:代码:<div class="oversee"> <el-badge :value="todoNum" :hidden="isHidden" :max="99" class="item"> <img src="../assets/images/enve原创 2021-03-04 16:50:30 · 3289 阅读 · 1 评论 -
路由守卫router.beforeEach——路由登录拦截
任务用户输入非登录页面的URL(网址),让用户返回登录URL,不让用户随意进入流程图实现首先,在定义路由的时候要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录但是我面对n多个路由,决定当在meta中添加requireAuth:true时,访问路由时不需要登录代码:routes: [ { // 登录 path: '/Login', name: 'Login', component: Login,原创 2021-01-04 15:22:26 · 1972 阅读 · 0 评论 -
vue路由跳转后页面未置顶显示
在登录页面输入用户名和密码之后跳转到主页面,浏览器可视区域上部显示的不是主页面的header部分,后来发现无论从哪一页面跳转到主页面,显示的都不是页面的header。此时解决问题的思路就很明了了就问题而言,在路由跳转时或者后,把页面定位设置成 x: 0, y: 0第一种想法:在路由的全局导航守卫router.beforeEach添加window.scrollTo(0,0)但是没好用,我得在路由元中meta添加一个title属性,然后用 document.title=to.meta.title修原创 2020-12-23 17:29:30 · 345 阅读 · 0 评论 -
vue路由跳转后页面el-table样式失效
今天在写一个系统主页面跳转到后台管理列表页面后再次跳转回主页面,主页面所有的el-table样式失效,刷新后样式回复正常。且多次操作等会发生这样的问题。后来是发现后台管理列表页面组件中<style>中把<styel scoped>...<style>添加之后就不会有这样的问题了scoped可以实现组件的私有化,不对全局样式造成污染当前端的style只属于当前组件,不受其他组件干预!...原创 2020-12-15 09:19:07 · 1227 阅读 · 1 评论 -
el-table经过@row-click点击事件后出现边框
最近在写列表时,用到了el-table标签,但是经过点击行内tr标签时,出现了难看的边框例:用控制台查看时发现标签内多了一个focusing所以在代码中添加::focus{ outline: none;}后来百度了一波发现链接::focus伪类用于选择具有焦点的元素:focus接受键盘事件或其他用户输入的元素。所有主流浏览器都支持:focus。其中:focus选择器在IE8中必须声明<!DOCTYPE>....原创 2020-12-11 17:14:23 · 506 阅读 · 0 评论 -
使用el-dialog遇到的坑——append-to-body
场景:一个list展示列表,点击每条列表信息的详情按钮,可以弹出el-dialog弹出框用来展示信息详情。我在给详情页面内容添加el-scrollbar滚动条时,无论怎么该都不出效果原创 2020-11-27 09:42:24 · 36143 阅读 · 0 评论 -
vue for循环取值时日期格式化问题
最近在写一个列表显示时,后台返回的数据时时间格式为 “yyyy-MM-dd hh:mm:ss”如图:代码为:<div v-for="(item,index) in showOpinionLists" :key="index" class="pagination-list"> <!--此处代码省略--> ...... <div class="pagination-date"> <div :style="item.status ===原创 2020-11-16 10:17:57 · 1547 阅读 · 0 评论 -
引用mui框架a标签跳转报错Unable to preventDefault inside passive event listener due to targetbeing treated ...
前一段时间用mui写html页面时,a标签跳转报错Unable to preventDefault inside passive event listener due to target being treated as passive.翻译:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。preventDefault()作用:取消默认事件,这个函数起作用的,比如默认的表单提交,a链接的点击跳转,就不好用了具体情况:从 ch原创 2020-11-06 15:27:12 · 287 阅读 · 0 评论 -
ElementUI 表格筛选时IE浏览器兼容问题
ElementUI 筛选时IE浏览器兼容问题原创 2020-10-20 09:54:02 · 882 阅读 · 0 评论 -
code与pre区别——浏览器中显示源程序代码
和两个标签都是为了,在浏览器中显示源程序代码。 标签的功能有:将文本变成等宽字体;还有一个功能就是暗示这段文本是源程序代码,浏览器可以做出自己的 样式处理,pre标签则没有这项功能。标签可以保留文本中的空格和换行符,保留文本中的空格和换行符是计算机源代码显示 所必须的样式。所以两者可以嵌套使用的,但是必须注意两者的嵌套顺序。我们可以看看,加标签,和不加标签在浏览器上显示的不同用于写单行的代码,如果要写一段段则需要code元素中的内容(一般认为是html格式的语言)不会作为html语言而被浏原创 2020-09-20 23:01:09 · 672 阅读 · 0 评论 -
elementUI表格数据加载显示前先出现“暂无数据”字样问题
项目中的表格请求数据时,进去页面,先出现 ‘‘暂无数据’’ 字样闪现一下之后在进行加载数据,用户体验十分不好原创 2020-09-20 22:42:17 · 2894 阅读 · 0 评论 -
使用vuex实现组件间数据共享及修改status的值
1、使用vuex,首先得安装它npm install vuex --save2、在store文件夹下的index.js引入vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { //存放组件间或全局中要用的值 isShowlog: false }})export default store3、在main.js中引入i原创 2020-09-03 07:07:34 · 721 阅读 · 0 评论 -
隐藏el-table自带的筛选按钮图标,点击表头可实现筛选功能
在对elementUI的el-table表格进行筛选操作,在过程中需要点击表头实现筛选功能,加载出筛选项列表,并将自带的筛选项进行隐藏。筛选项隐藏.el-table__column-filter-trigger i{ display: none; }表头实现筛选功能:在el-table上添加 @header-click="handle"handle(column, event){ event.target.childNodes[2].click();原创 2020-08-03 10:18:53 · 2895 阅读 · 0 评论 -
el-table表格列内容筛选时筛选项的获取及数据处理
最近在做日志内容的前端显示,需要对操作用户进行筛选显示原创 2020-07-28 17:00:09 · 2555 阅读 · 0 评论 -
el-table标签每列内容固定显示,超出部分省略
在写表格内容显示时,有的列的内容会很长,会超出显示,例如:这时就需要每一个表格内的内容省略显示 <el-table-column min-width="250" align="center" label="返回结果"> <template slot-scope="scope"> <span>{{scope.row.result | ellipsis}}</span> </template>原创 2020-07-27 11:35:23 · 3907 阅读 · 0 评论 -
浮动提示title更改字体大小
项目前提:已修改了title的默认样式,主要js代码function showTitle(el, title) { const popover = getPopover(); const popoverStyle = popover.style; if (title === undefined || title==='') { popoverStyle.display = 'none'; } else { const elRect = el.getBoundingClie原创 2020-04-23 21:20:34 · 3055 阅读 · 1 评论 -
图标提醒效果:提示更新小红点
图标提醒效果:提示更新小红点我在这里介绍的是日志更新提醒,当日志内容发生变化时,日志的版本号上会出现小红点提示<span class="red-point"></span>用span标签嵌套需要添加红点的内容,我这里就只写了span标签.red-point{ position: relative; }.red-point::before{ content: " "; border: 3px solid red;/*设置红色*/ bor原创 2020-05-27 14:41:19 · 1541 阅读 · 1 评论 -
使用sessionStorage存储数据时遇到的问题
在使用ElementUI中的el-table标签,要对表格中数据进行筛选,el-table自带的筛选表头原创 2020-05-28 09:17:55 · 3105 阅读 · 0 评论 -
使用bus实现父子兄弟跨级间传值
背景:在项目中,几个组件实现自由收缩,整个模块总高度不变,组件间收缩高度相互影响,例如:使用bus可以直接在bus.js中创建vue实例,在main.js中引入就可以使用了在这里我是仿效vuex插件那样制造bus插件来使用的:`const install =(Vue) => { const Bus = new Vue({ data(){}, created(){}, methods:{}, }) Vue.prototype.$bus = Bus}export原创 2020-06-16 09:26:13 · 111 阅读 · 0 评论 -
解决时间筛选时格式不统一的问题
最近在写常用的用户操作日志在前端显示的问题,要对用户的操作时间进行分时间段的查找和筛选,出现了时间比较时格式不统一的问题在前端写了两个日期选择器,定义了一个初始时间和结束时间<el-date-picker v-model="dataFilter.stratDate" type="date" :picker-options="dataFilter.stratDate" placeholder="选择日期" value-format="yyyy-MM-原创 2020-07-20 07:03:42 · 1590 阅读 · 1 评论 -
Vue路由实现页面跳转
在程序代码中重新添加一个log.vue文件,用来显示日志信息,这时就用到了页面跳转。.vue文件之间的跳转,需要在router里面配置path,通过路径跳转html文件如下<router-link :to="{path:'/log'}" class="log-btn">日志</router-link>在index.js中配置,其中’…/components/pages/log’为log文件路径const log = () => import('../componen原创 2020-07-14 10:41:00 · 612 阅读 · 0 评论 -
应用element-ui中Drawer 抽屉并去除Drawer 标题自带蓝色框
在做项目的时候页面上需要设置的东西太多,所以将所有的设置按钮归于一个,点击后出现一个抽匣,在上面做设置就是了Drawer 抽屉的设置<el-drawer title="我是标题" :with-header="drawerProp.withHeader" size="35%" :append-to-body="drawerProp.appendToBody" :visible.sync="drawerProp.drawe原创 2020-06-22 17:35:43 · 6947 阅读 · 2 评论 -
前端分页问题
前一段时间进行一个网页的重新切图工作,因为旧网页的内容部分是在后端进行分页的,前端只需要请求数据时传几个值就ok了,新的网页设计效果图暂用的是死数据(data中的json串)。分页代码<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"原创 2020-07-07 08:56:37 · 534 阅读 · 0 评论