vue2
这些是vue2的内容姿势
加倍_
这个作者很懒,什么都没留下…
展开
-
element表格循环校验,确保数据不重复
使用element表格组件,循环验证,确保数据唯一不重复问题原创 2022-07-11 11:01:35 · 2586 阅读 · 0 评论 -
elementui实现全选功能,后端分页
element-ui是很多公司写后台都会使用的一个组件库,里面有个表格的组件,表格又有很多小功能,其中之一就是表格的多选,下面就记录一下我的踩坑历史先看一下官方文档【type:selection】给其中的某一列设置成这个属性就出现多选的按钮了,但是对于数据量巨大的表格来说,通常都是后端来进行一个分页,这样对于前端来说有利有弊,对于页面显示的速度来说,有了一定的提示,但是对于这种全选的功能来说,就会有一定的弊端,因为前端只能拿到本页的数据实现这个全选功能的时候,我有跟后端进行一个沟通,当用户全选的.原创 2021-10-18 14:30:31 · 1354 阅读 · 1 评论 -
elementUI时间选择器禁用未来时间
又是一个组件库的问题,要想后台写的好,element-ui必须要熟悉啊,这不,今天就遇到问题了问题描述:项目需求是只允许用户查找过去的历史记录,就意味着不可以选择以后的时间,要求,从今天往后的时间颜色要置成灰色。 <el-date-picker :clearable="false" style="width: 290px" v-model="date" type="datera.原创 2021-06-30 15:53:12 · 2037 阅读 · 0 评论 -
elementui的表格排序的组件之问题---条件改变样式消失
这两天写了一个需求,就是当我改变时间的时候,排序功能消失,这我就想不是很简单吗,但是是我太单纯了。这个是一个后台,肯定会用到element的组件,然后果不其然用的就是element里面的表格排序组件elementUI-table首先熟悉一下里面的参数以及配置* 在需要排序的列里面加上sortable就会出现上下箭头 的按钮标志,值是true或者false* 如果需要后端排序,需将sortable设置为custom,同 时在Table 上监听sort-change事件,在事件回调中可 以.原创 2021-06-25 18:12:09 · 925 阅读 · 1 评论 -
element-ui之树形控件的使用
代码虐我千百遍,我对代码如初恋,前前前前端静静又来更新博客了,本以为element-ui会让我写代码的速度快如闪电,一不留心,掉坑里了,花费我好长的时间才从深坑里面爬出来首先,看一下效果图......原创 2021-04-27 21:04:22 · 5978 阅读 · 0 评论 -
element表格 频繁切换维度,导致表头渲染有误
今天突然接到后端转过来的bug,就是切换不同的维度,下面表格的内容就根据这个维度发生变化,但是当数据量大的时候,快速切换维度,就会导致这次请求之后,数据没返回过来就直接又进行下一次的请求,多次就会导致表头的错误首先这个表格的表头包括数据都是后端动态返回的,所以之前的前端用了一个循环从上图可以看到,表头的dau指标跟排重激活设备数指标反了,下面看代码源代码:只要把slot=“header”改成#header即可......原创 2022-04-20 16:14:25 · 979 阅读 · 0 评论 -
超级详细的mockjs使用方法(小白必看)
众所周知,在许多人眼中,前端是没有后端就活不下来的,因为前端最重要的一部分就是数据交互,没有数据,没有接口那前端怎样干活呢,这不,mockjs就产生了当我们拿到一个新的业务的时候,前端和后端只要商量好就可以同时进行开发了。下面就详细说一下mock是怎样使用的吧????????????I’m mockjs 的官方大大????????????First:首先我创建了一个vue项目,然后下载axios,mockjs和json5。下载json5的主要原因是解决json文件没有办法添加注释的问题,说白了,就原创 2021-06-20 21:36:23 · 8366 阅读 · 2 评论 -
vue使用computed来进行搜索功能
对于初入职场的我,前前后后踩的BUG可不算少,但是今天应该不算是踩坑记录,属于发现记录,哈哈这是一个后台管理系统,使用的是element-UI,然后呢,肯定会有搜索功能,以及表格的展示。平常呢,我肯定会写一个搜索框+表格,然后利用input或者change,通过v-model获取搜索框里面的值然后在searchTxtChange事件去处理逻辑,另外,还会用到watch监听事件,当输入框里面的值为空的时候,让数据全部恢复,但是这是比较麻烦的,又用到事件还用到监听,后来看公司的代码,发现了竟然可以使用.原创 2021-07-05 11:21:34 · 602 阅读 · 0 评论 -
vue前端手写模糊查询
需求的一生不多解释,直接上代码var newArr = this.generalyData.filter((item) => {if(item.name.toLowerCase().indexOf(this.searchTxt)>-1){ return item }else if(item.appkey == this.searchTxt){ return item } return newArr.原创 2021-06-25 18:16:48 · 351 阅读 · 0 评论 -
vue中使用echarts
1.首先下载echarts – npm i echarts -S** 2. 在需要echarts的页面中导入echarts** var echarts = require("echarts"); //引入echarts3.html样式 <div id="box" style="width: 800px; height: 400px"></div>4.初始化echartvar myChart = echarts.init(document.getElementById原创 2022-04-11 14:50:14 · 2540 阅读 · 0 评论 -
vue实现全屏,退出全屏的功能
前前前前端静静的第三篇记录最近在准备紧张的考试,有个功能还是第一次写呢,就是vue实现全屏,退出全屏的功能1.下载插件 npm i screenfull -S下载完这个插件后在package.json中可以看到 "dependencies": { "core-js": "^3.6.5", "element-ui": "^2.15.1", "screenfull": "^5.1.0", "vue": "^2.6.11", "vue-router": "^3.原创 2021-03-25 15:08:05 · 912 阅读 · 0 评论 -
vue禁止双击放大
前前前前端的静静第四篇记录用vue写项目的时候,特别是移动端,用鼠标双击会把项目放大,所以如何禁止双击放大呢?用vue脚手架创建项目的时候,有自动生成的文件夹,找到public文件夹,里面有个index.html,打开它,找到 <meta name="viewport" content="width=device-width,initial-scale=1.0">把这个meta标签替换成 <meta content="width=device-width, initi原创 2021-03-28 20:02:04 · 1083 阅读 · 0 评论 -
push改写--解决vue本身存在的push问题
前前前前端的静静第八篇博客vue是前端主流框架,但是存在一些问题,就是push问题解决方法const routerPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { if(typeof(location)=="string"){ var Separator = "&"; if(location.indexOf('?')==-1) { Separator='原创 2021-04-05 20:03:15 · 297 阅读 · 0 评论 -
vue项目中使用富文本编辑器以及解决相关的问题
最近在写一个后台管理系统,项目中用的是vue,有个功能是上传商品,有一小部分是一个富文本编辑器,这里推荐一个超级好用的插件富文本下载:npm install vue-quill-editor --save在main.js中引入://引入富文本编辑器import VueQuillEditor from ‘vue-quill-editor’//引入vue-quill-editor相关样式import ‘quill/dist/quill.core.css’import ‘quill/d.原创 2021-05-06 20:25:03 · 964 阅读 · 0 评论 -
vue隐秘用法 (一)---- 父组件获取子组件的方法
已经很久没有写博客了,这两天又学习了几招组件化是VUE最大的一个特点,但是有个东西竟然一点都不知道,那就太lipu了,下面就看一下吧父组件获取子组件的方法法一: 父组件中<template> <div class="father"> <div class="father_box" @click="getSon">This is Father</div> <son ref="son"></son> &.原创 2021-06-04 20:21:26 · 474 阅读 · 0 评论 -
vue隐秘用法 (二)----子组件获取父组件的方法
子组件获取父组件的方法代码<template> <div class="son"> <div class="son_box" @click="getFather">This is son</div> </div></template><script>export default { name: "", data() { return {}; }, methods: {.原创 2021-06-04 20:36:57 · 315 阅读 · 0 评论