element
项目中遇到的小问题,会记录在element专栏里。主要是vue+element
推开世界的门
掘金地址:https://juejin.cn/user/2963939081585479/posts
展开
-
一次敏感词检测开发记录
需求用户上传execl,前端解析excel ,解析之后,将excel的json数据,传给后端,后端通过关键字检测算法,返回你之前传的数据,并且附件敏感字。然后前端渲染数据只table。并且用户以到excel形式下载table表格数据。没看错,全程后端就是对敏感词检测,excel 解析 ,下载,都是前端来做。我们一步一步来分析步骤一 界面编写界面编写 就是element一梭子 <!-- 上传文件按钮界面 --> <div class="buttonBox">原创 2021-12-10 19:35:02 · 1390 阅读 · 0 评论 -
vue中keepalive的使用
App.vue写2个 router-view 出口<keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"> </router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router原创 2021-07-27 11:26:46 · 280 阅读 · 0 评论 -
vue中进行浏览器的赋值功能
getCopy() { let oInput = document.createElement('input'); // 创建一个input oInput.value = this.address;// 进行数据赋值this.address是要赋值的数据 document.body.appendChild(oInput); oInput.select(); // 选择对象; console.log(oInput.value) .原创 2021-07-27 10:45:12 · 474 阅读 · 0 评论 -
vue中关于src,class,style的三元表达式的使用
src,class中三元表达式的使用说明根据不同的路由,进行选中态的切换。并且进行图片的替换代码 <div :class="[ $route.path == '/home' ? 'header-main-li header-newclass' : 'header-main-li', ]" @click="getRoute('/home')" >原创 2021-07-27 10:39:07 · 3088 阅读 · 0 评论 -
vue 项目里的基本操作
一 样式class,styletab切换样式 <div class="buy-ways cursor marginRight" :class="{ activeSty: activeWay === 1 }" @click="getWay(1)"> <img src="../../assets/image/zhifubao-3.png" alt="" /> <span>支付宝</span> </div&原创 2021-02-25 19:50:31 · 254 阅读 · 1 评论 -
vue 多环境打包
package.json默认配置"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },改为"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build原创 2021-02-25 11:15:07 · 200 阅读 · 0 评论 -
vue 封装button组件
<template> <div> <div class="login-btn cursor" :class="myClass" :style="{ opacity: opacity }" @click="debounce"> <span :class="['s']">{{ text }}</span> </div> </div></template><script&原创 2021-02-24 14:33:03 · 269 阅读 · 0 评论 -
el-checkbox 三级联动实现,有图有数据
el-checkbox 三级联动实现,一层数据结构和两层数据结构的同步选中取消效果图点击获取数据,即可获取当前选中所有的id代码<template> <div style="display: flex"> <div> <el-checkbox v-model="AllChecked" @change="allHandle">全选</el-checkbox> <div v-for="(item, i原创 2021-01-14 19:11:20 · 1153 阅读 · 0 评论 -
vue element ui 弹框组件里的el-input如何自动聚焦
vue element ui中 弹框组件里的el-input如何自动聚打开弹窗时,跟上如下代码。 this.$nextTick(function(){ this.$refs['siteInput'].focus(); })this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。...原创 2020-12-28 16:04:19 · 2209 阅读 · 0 评论 -
vue element 搜索,分页 ,优化,其他一些技巧
涉及到单个查询,联合查询,分页等功能。出一个接口,后面坠不同参数,只需要监听url参数的变化,或者本身传递的参数。将url参数的变化,作为查询的条件。出发点:通过beforeRouteUpdate,对路由变化进行监控 beforeRouteUpdate(to, from, next) { // 如果路径一样,说明才是进行搜索,或者分页的数据 if (to.path === from.path) { // 对参数对象,进行拷贝 const newQu原创 2020-12-05 15:23:10 · 574 阅读 · 0 评论 -
vue基于element-ui二次封装分页组件和一些优化
先来看一下整体的需求分析有表格的地方,就有分页,怎么做到表格样式统一多个分页,代码重复,如何减少代码重复地址栏输入页码,如何去通知当前分页状态的改变刷新之后,如何保持当前页面分页数据(不回到最初)怎样更少的将数据监听,不会都挂载到data上(抽取成方法)beforeRouteUpdate ,computed, watch 的使用,提高代码的质量element-ui的分组组件提供的四个事件1.组件封装 把需要的属性提取出来<template> <div class原创 2020-11-19 20:02:44 · 534 阅读 · 0 评论 -
慕课小慕读书后台总结
登录输入框,如果没有数据自动聚焦mounted() { if (this.loginForm.username === "") { this.$refs.username.focus(); } else if (this.loginForm.password === "") { this.$refs.password.focus(); } },密码框的显示影藏切换 :icon-class="passwordType === 'passwor.原创 2020-11-17 16:09:45 · 671 阅读 · 0 评论 -
慕课从零开发电商总结
1: vuex的使用原创 2020-11-03 09:17:35 · 780 阅读 · 0 评论 -
项目中常用的element样式修改,功能实现 --持续更新
10.17记录el-timeline专区实现功能:大环节嵌套小环节。若小环节只有一条数据,则不竖线显示。小环节最后一条数据,也不显示竖线 <el-timeline> <el-timeline-item v-for="(activity, index) in outWrapList" :key="index" :timestamp="activity.Name" placement="top"> <!-- {{outWrapLis原创 2020-10-17 16:01:41 · 1297 阅读 · 2 评论 -
vue 实现排他效果的折叠 最简单的方法
实现排他效果的折叠提示:本文通过最简单的方式实现最常用的折叠效果文章目录实现排他效果的折叠前言一、实现流程总结前言提示:一、实现流程示例:数据条件 :第一次进入,都是处于折叠效果。所以当前点击索引在初始化的时候,就初始化成空串,如果想默认展开第一项,那你把当前点击索引初始化成0 即可2: 判断展开折叠条件基本的 v-if 即可2. 写到这,大家基本都能实现一个基本的展开折叠,如图你会发现,是可以折叠了,因为判断的依据是当前点击的索引=== 循环的索引。但是会存在一原创 2020-09-18 20:59:30 · 694 阅读 · 0 评论 -
vue关掉.eslintrc格式校验
在项目中,新建vue.config.js添加如下代码module.exports = { lintOnSave: false // 关掉代码校验};原创 2020-09-15 10:33:13 · 1308 阅读 · 0 评论 -
前端获取 时间戳
new Date().getTime() 获取到的是数字后端传值,这个地方要字符串直接 + ''new Date().getTime() + '原创 2020-09-12 14:42:05 · 5318 阅读 · 0 评论 -
element 数据分页,后端什么也不管的分页
系列文章目录提示:例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是原创 2020-09-12 14:31:52 · 421 阅读 · 0 评论 -
vue-axios中拦截器加了token 和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?
项目场景:vue-axios中加了拦截器token ,和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?问题描述:提示:我做的是两套系统,一套系统目前做了鉴权处理,一套不带鉴权处理。现在要在带鉴权处理的系统,用不带鉴权处理系统的一个接口例如:APP 中接收数据代码:import axios from 'axios'axios.interceptors.request.use( config => { // 这里的config包含每次请求的内容 c原创 2020-09-12 10:49:19 · 2735 阅读 · 0 评论 -
element 的 el-table中 超出就隐藏并且显示省略号,不要弹框提示
项目场景: 就是一个超出隐藏,只不过是在element的表格中而已解决方案:首先超出隐藏,无非就是几行代码而已overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行但是他的前提是,你得设定宽度下面开始说正题这个地方为什么换行,应为他设置的是默认值white-space: normal; // 换行我们给他设置成 nowrap 不就不换行了可以在全局css原创 2020-09-11 16:47:35 · 8153 阅读 · 3 评论 -
基于http网络层的前端性能优化
vue前端传数组对象给后端需求原创 2020-09-09 08:18:23 · 334 阅读 · 1 评论 -
js解析url三种方法
js解析url,就是将如下urlconst url = 'https://www.baidu.com/m?f=8&ie=utf-8&rsv_bp=1&tn=monline_3_dg&wd=session'解析为法一: 利用splice分割+循环依次取出先看代码function queryURLparams(url) { let obj = {}...原创 2020-01-30 17:47:08 · 17618 阅读 · 6 评论