自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(50)
  • 资源 (1)
  • 收藏
  • 关注

原创 2021最全面、最详细web前端面试题及答案总结

2021最全面、最详细web前端面试题及答案总结总结不易,希望可以帮助到即将面试或还在学习中的web前端小伙伴,祝面试顺利,拿高薪!本章是HTML考点的⾮重难点,因此我们采⽤简略回答的⽅式进⾏撰写,所以不会有太多详细的解释。我们约定,每个问题后我们标记『✨ 』的为⾼频⾯试题doctype的作⽤是什么?✨DOCTYPE是html5标准⽹⻚声明,且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档,不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

2021-02-01 09:34:00 12454 7

原创 2021年最新Web前端面试题精选大全及答案

HTML、CSS相关1.网络中使用最多的图片格式有哪些JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小 在ps以jpeg格式存储时,提供11级压缩级别2.请简述css盒子模型一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容)。默认情况下,盒子的width和height属性只是设置content(内容)的宽和高,盒子真正的宽应该是:内容宽度+左右填充+左右边距+左右边框盒子真正

2021-01-07 11:53:44 124089 58

原创 VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行

步骤:表格中直接插槽法:<el-table-column :show-overflow-tooltip="true" prop="number" label="发货数量"> <template slot-scope="scope"> <el-input v-model.number="scope.row.number" @focus="onfoucs(scope)" @blur="blurUsern

2021-11-25 14:23:13 387

原创 VUE element-ui之table表格勾选复选框动态合计某列的值

实现步骤:自定义数组对象合计方法:countTotal(arr, keyName) { let $total = 0 $total = arr.reduce(function(total, currentValue, currentIndex, arr) { return currentValue[keyName] ? (total + currentValue[keyName]) : total }, 0) return $total

2021-11-14 15:25:55 472

原创 VUE element-ui之table表格勾选功能(只能勾选某列值相同的行)

产品要求:表格可多选,且只能勾选客户名称相同的行。实现步骤:表格内配置:<el-table border :data="Data" @selection-change="selectionChangeHandlerOrder"> <el-table-column :selectable="checkboxT" type="selection" width="55"

2021-11-09 16:03:24 800

原创 VUE element-ui之使用外部图标---iconfont篇

步骤:1、进入iconfont官网传送门并使用任意方式登录。2、按如下步骤进行:3.图标库建好后直接搜索自己需要的图标按如下步骤:4、将文件解压后,在项目assets下新建文件,将解压文件放入5、在main.js中引入:import './assets/icon/iconfont.css'6、在标签中使用类名引入图标:<el-button style="margin-left: 4px" class="filter-item iconfont icon-zhuan

2021-10-28 10:47:55 33

原创 VUE 之 Jspreadsheet CE电子表格数据处理

需求:将表格内容作为list集合,向后端传递注意:需求默认展示表格为30行空表格,后端接口会拦截空值,所以需将未输入的行去掉默认的Jspreadsheet :实现步骤:获取Jspreadsheet 数据并处理成后端所需参数格式:var tabdata = this.spreadsheet.options.data //打印表格原始数据如下图1-1 var Data = [] var newArr = [] tabdata.map((v, i) =&g

2021-10-14 18:27:26 125

原创 VUE 之 Jspreadsheet CE电子表格的使用步骤

步骤:下载 npm install jexcel组件引入import jexcel from 'jexcel'import 'jexcel/dist/jexcel.css'定义容器<div> <div class="deploy"> <span>配置列:</span> <el-checkbox v-model="checked" @change="checkedChange">宽上下</el-check

2021-10-12 16:30:12 281 2

原创 源生JS 之对象key值为数字时的取值及修改key值方法

取值:如果对象key值为数字使用.key(.0)无法取到对应值;只需稍加修改obj.[‘0’]即可取到对应值。修改:与取值同理:打印效果对比处理前后:可以看到将原始key值为0、1、2修改为目标key值...

2021-09-28 09:27:26 48

原创 VUE element-ui之导入excel模板至后端接口

步骤:按钮外包裹上传组件 <el-upload ref="upload" class="filter-item" action="#" :before-upload="beforeUpload" type="primary" :http-request="uploadOk"

2021-09-18 15:37:37 194 2

原创 Web前端之如何描述自己做过的项目

在面试时,经过寒暄后,一般面试官会让介绍项目经验 。常见的问法是,说下你最近的(或最拿得出手的)一个项目。根据我们的面试经验,发现有不少候选人对此没准备,说起来磕磕巴巴,甚至有人说出项目经验从时间段或技术等方面和简历上的不匹配,这样就会造成如下的后果。第一印象就不好了,至少会感觉该候选人表述能力不强。一般来说,面试官会根据候选人介绍的项目背景来提问题,假设面试时会问 10 个问题,那么至少有5 个问题会根据候选人所介绍的项目背景来问,候选人如果没说好,那么就没法很好地引导后继问题了,就相当于把

2021-09-14 15:35:02 850

原创 VUE layui之table数据表格使用详细说明

步骤:一:layui官网下载包二:将解压的文件放入static文件夹(如果没有就在根目录下新建一个)三:public文件下index.html中引入css及js文件 <!-- 引入 layui.css --> <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> <!-- 引入 layui.js --> <script src="/

2021-09-06 15:08:14 144

原创 2021Web前端人事面试题总结精选

人事面试题:1、请你自我介绍一下你自己?回答提示:一般人回答这个问题过于平常,只说姓名、年龄、爱好、工作经验,这些在简历上都有。其实,企业最 希望知道的是求职者能否胜任工作,包括:最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最 成功的事,主要的成就等,这些都可以和学习无关,也可以和学习有关,但要突出积极的个性和做事的能力,说得 合情合理企业才会相信。企业很重视一个人的礼貌,求职者要尊重考官,在回答每个问题之后都说一句“谢谢”,企业喜欢有礼貌的求职者。自我介绍案例:自我介绍:面

2021-09-06 09:16:41 456

原创 React之函数式组件与类组件的区别

最近被安排了一个以Umi(听过)为框架的项目(最后一次代码更新在一年前),起初内心是拒绝的,奈何领导拍着我的肩膀说:“小伙子,组织相信你,给你三天时间学习!!!”;听了领导的一席“真言”,我顿时内牛满面(╥╯^╰╥),没办法只能硬着头皮上了…当拉下源码打开vscode那一刻,我的内心是崩溃的;文件全是以jsx结尾,文件内容全是自定义标签(首字母大写那种)…费了老大劲启动了项目,就是一个erp内部使用项目,页面基本都是表格,交互也都是增删改查之类的,完了之后就去看了Umi官方文档,结果发现要看懂React

2021-08-26 17:42:22 103

原创 VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改

问题:局部全屏后el-popover弹出框失效解决方法:<el-popover placement="bottom" :append-to-body="false"//禁止内容追加至body即可 width="200" trigger="hover" > <div> 雷达图指标解释说明:<br> 业务量:代表司机近一年内运输收入的

2021-08-17 19:42:19 413

原创 VUE之Echarts图表y轴刻度提示文字过长显示为省略号

实现方法:在y轴配置中定义:yAxis: { type: 'value', // max: '1200', axisLine: { show: false, lineStyle: { color: 'white' } }, axisTick: { show: false// 去除刻度

2021-08-12 09:08:17 95

原创 Javascript之为数字添加货币(千位分隔符)格式同时保留小数点后两位

实现方法:var sum = 6260var num = parseFloat(sum) if (!isNaN(num)) { num = Math.round(num * 100) / 100 var newSum = num.toLocaleString() var resi = newSum .indexOf('.') if (resi < 0) {

2021-08-12 08:46:15 44

原创 VUE enement-ui之table表格隐藏滚动条

只需修改样式即可: /deep/.el-table__body-wrapper::-webkit-scrollbar{ width: 0; }注意:element-ui表格很多样式修改都需要加深度穿透才能生效。效果图:

2021-08-06 16:03:22 173

原创 VUE element-ui之el-table表格内嵌进度条功能实现

步骤:el-table中使用插槽方法:<el-table-column prop="num" label="里程数" sortable="" width="250" > <template slot-scope="scope"> <el-progress type="line" :percentage="(scope.row.num)/

2021-08-03 14:59:09 575

原创 VUE element-ui之table表格自增序号(前端实现)

需求:表格第一列为自增序号(不受分页影响)实现方法:<el-table-column label="序号" width="70" align="left"> <template slot-scope="scope"> {{ (scope.$index+1)+(currentPage-1)*pageSize }} </template> </el-table-column>注

2021-07-29 11:35:43 356

原创 VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决

问题原因:elemrnt-ui会默认将弹出框插入至 body 元素;当设置了某个元素全屏时,会遮挡住原来的select下拉数据。解决方法: <el-select v-model="value" placeholder="区域选择" :popper-append-to-body="false" //加入此行代码,完美解决 >...

2021-07-27 15:17:34 370

原创 VUE之Echarts地图引入及配置项详解

步骤:建立dom用于渲染地图组件<div ref="map_ref" style="width:100%;height:100%" class="map_charts" />引入所需js文件import echarts from 'echarts'require('echarts/map/js/china')//这里import引入也可以初始化echarts图表const chinachart = echarts.init(this.$refs.map_ref)//用于将图表渲

2021-07-19 08:58:11 94

原创 VUE element-ui之table表格全局排序、调用后端接口排序功能

步骤:标签中定义排序方法:<el-table ref="reset" v-loading="loading" :data="tableData" height="520" border @sort-change="sortChange" >要排序的字段定义排序关键字sortable : <el-table-column prop="sumNum" label=

2021-07-14 09:36:32 191

原创 VUE element-ui之table表格分页完整功能

步骤:表格底部导入分页组件: <el-pagination :current-page.sync="currentPage" :page-size="pageSize" background layout="prev, pager, next, total, jumper" :total="totalData" @current-change="handleCurrentChan

2021-07-14 09:19:27 42

原创 VUE之Echarts图表x轴y轴提示文字过长处理为省略号

只需对显示文字格式修改即可yAxis: { type: 'category', axisLine: { show: false // 轴线 }, axisTick: { show: false// 去除刻度 }, axisLabel: { formatter: function(params) {

2021-07-12 09:42:42 77

原创 VUE element-ui之table表格表头下拉筛选功能

步骤:在需要筛选的列中插槽法:<el-table-column prop="mount" label="交易量区间" align="left"> <!-- eslint-disable-next-line --> <template slot="header" slot-scope="scope"> <el-dropdown trigger="click" size="medium " @comma

2021-07-09 14:17:32 327

原创 VUE之Echarts可视化图表双Y轴配置详解

具体实现步骤:配置双y轴yAxis: [ { type: 'value', axisLabel: { formatter: '{value}' }, axisTick: { show: false// 刻度 } }, { type: 'value'

2021-06-30 10:48:55 63

原创 面试经常出的JavaScript变量提升问题分析

Q1:var a = 10;(function a(){ console.log(a) a = 20; console.log(window.a) var a = 30 console.log(a)})()等同于var a = 10;(function a(){ //内部作用域 var a;//var a = 30 中的声明被提升 console.log(a)//undefined a = 20;//内部作用域的a赋值20

2021-06-25 09:30:31 64

原创 VUE element-ui之table表格内容样式(颜色)修改

要求将表格中的负数显示为红色实现步骤:定义样式方法<el-table id="tabs" v-loading="loading" :data="tableData" height="580" border style="width: 100%" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" :c

2021-06-17 11:22:30 334 1

原创 VUE-cli中使用jquery

步骤:全局安装:npm install jquery --save组件内使用方法:直接引用即可import $ from 'jquery'全局用法:main.js中引入// jqueryimport $ from 'jquery'Vue.prototype.$ = $;更改vue.config.jsconst webpack = require('webpack') configureWebpack: { plugins: [ new webpack

2021-05-24 15:36:30 75

原创 VUE element-ui之Dialog对话框关闭事件

步骤:在标签中定义事件 <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="annularPopup" width="60%" center @close="closeDialog" >js调用方法即可closeDialog() { this.$refs.tableList.cl

2021-05-21 10:03:33 417

原创 VUE element-ui之table表格内容添加千位分割符/货币格式

步骤:定义转换方法<el-table-column prop="regDayToNow" label="距离注册时间(天)" width="140" align="left" sortable="" :formatter="matter" />js方法matter(row, column, cellValue) { cellValue += '' if (!cellValue.includes('.')) cellValue += '.' retur

2021-05-20 09:08:44 308

原创 Vue之Vant移动端组件库使用方法

步骤:全局安装npm i vant -S在mian.js中引入import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);根据实际情况引入组件<template> <div> <van-cell title="选择多个日期" :value="text" @click="show = true" /> <van-calendar v-model="show"

2021-05-18 09:49:27 56

原创 VUE之Elenent-ui之table表格导出、调用后端接口导出(后端返回流文件导出)

调用后端接口导出excel、后端返回流文件导出excel步骤:export function download(params) { return request({ url: '/api/xxxx/download', method: 'get', params, responseType: 'blob' //1.首先设置responseType对象格式为 blob })}```//请求接口这里注意```js部分 // 导出 doExport(

2021-05-13 10:16:14 172

原创 VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

导出excel自定义表头及导出字段步骤:1.安装依赖npm install --save xlsx file-savernpm install -D script-loader2.下载Blob.js、export2Excel.js百度网盘链接:https://pan.baidu.com/s/1iC1kWX5jd7U5J9g_L4BQ2Q提取码: 3kv4src下创建excel文件夹将Blob.js、export2Excel.js放入3.添加导出按钮<el-button round

2021-04-27 15:21:25 542

原创 VUE element-ui 之多级下拉菜单(筛选框)

多级筛选框:<span>时间筛选</span> <el-cascader v-model="value" style="width:160px" size="small" :options="option" @change="handleChange" />自定义筛选框内的值value: ['按年统计'], option: [ { value

2021-04-21 15:09:51 600

原创 VUE Echarts之tooltip提示器-formatter格式转换

tooltip提示器内设置自己想要的数据展示格式,包括添加单位、名称、占比、小圆点之类…tooltip: { trigger: 'item', formatter: (params) => { const templete = (params.name + '<br>' + params.marker + `${this.sort}:` + params.value + `&

2021-04-14 16:32:56 158

原创 VUE element-ui 之table表格导出Excel功能

步骤一:定义表格id<div class="dealed-details" style="height: 50px;"> <span>未交易销售人员数据详情</span> <el-button round class="exportExcel1" @click="getExcData(excelName.dow.id,excelName.dow.name)">导出Excel</el-button> &

2021-04-08 09:40:19 81

原创 VUE element-ui 之button按钮之间切换时单个按钮持续聚焦状态实现(点击按钮聚焦,仅当点击其他按钮时,之前的按钮会失焦,当前按钮聚焦)

多个按钮切换时(页面切换)假设不做处理会出现点击按钮时聚焦,离开按钮点击任何地方(鼠标单击)按钮会失焦我这里要求实现点击按钮聚焦,仅当点击其他按钮时,之前的按钮会失焦,当前按钮聚焦(也就是提醒用户当前处于哪个维度的页面)这里自己研究的方法,理论上不能算是聚焦失焦(双重判断改变按钮颜色) <div class="changebtn"> <div> <el-button round :class="state1 === false?'color

2021-04-07 11:28:44 519 9

原创 VUE element-ui 之slot-scope=“scope“常见报错解决方法

slot-scope="scope"标签报错为eslint检测机制,如图:只需要加上显示正常,此处注释为取消下一行eslint检测机制

2021-04-01 08:41:06 1974 1

2021前端面试题精编.pdf

资源内容为时下前端面试题总结,适用于初入职场的面试小白。

2021-09-06

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除