- 博客(165)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 el-table 文字超过规定表格单元格大小显示省略号，鼠标悬浮到相关单元格上出现相关的文字提示
具体代码<el-table v-loading="loading" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" tooltip-effect="dark" ref="multipleTable" stripe @row-click="rowClick" :data="tableList" height="calc(100vh - 310px)">
2021-08-03 14:12:19
1000
原创 修改滚动条样式
具体代码/*滚动条的宽度 */::-webkit-scrollbar { width: 6px; height: 6px;}/*定义滚动条轨道*/::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}/* 滚动条的滑块 */::-we
2021-07-19 10:45:37
100
原创 JS返回数组对象中满足相关对象条件的下标
一、方法 Array.findIndex()findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。findIndex()方法为数组中的每个元素都调用一个函数执行。当数组中的元素在测试条件时返回true时，findIndex()返回符合条件的元素的索引位置，之后的值就不会再调用执行函数。如果没有符合条件的元素就返回-1。注意：findIndex()对于空数组，函数是不会执行的。findIndex()并没有改变数组的原始值。二、Array.findIndex()
2021-07-19 10:15:03
7970
原创 Vue中封装使用防抖函数
一、封装防抖函数debounce(fn, time) { let timer = null; return function(...args) { let _this = this; if(timer) { clearTimeout(timer); } timerv = setTimeout(() => { fn.apply(_this, args); }, time) }}二、在函数中进行调用this.debounce(() => { cons
2021-07-19 09:42:29
2393
原创 前端工程中常见的HTTP状态码
200 表示请求后端接口成功400 表示前端所传递给后端的参数错误404 未找到相关的接口信息，即请求的资源（网页）不存在500 内部服务器错误，后端逻辑或代码错误特殊的：如果在请求接口时出现pending，表示后端正在排查错误，即后端在相关的接口处打了断点。这是我目前在开发中所常见到状态码信息，如果还有另外一些比较常见的HTTP状态码，欢迎交流。...
2021-07-01 10:56:40
171
原创 点击按钮出现相关的div，div出现后点击除div外的其它地方隐藏相关的div
具体效果演示实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>点击相关按钮出现相关的div，div出现后点击除div外的其它地方隐藏
2021-06-17 22:41:16
435
原创 当浏览器缩小时，el-dialog中的表单元素不能随之进行自适应
问题描述当el-dialog中嵌入form表单元素时，进行缩小浏览器时，相关的表单元素往外跑，不能很好的进行相关的自适应。问题解决方案定义相关的表单元素的宽度单位为百分比，这样能够使其很好的进行自适应布局。...
2021-06-17 15:13:45
1030
原创 el-table自适应方式
el-table的简介el-table是elementui中的一个相关的表格样式，在这个相关的表格样式中可以为每一列定义相关的宽度。当将el-table中每一列表格宽度写死出现的问题当将el-table中的每一列宽度写死时，当缩小浏览器的大小时，表格布局容易错乱。解决方式自适应定义el-table的宽度，表格中相关每一列的宽度不写死，只写其中几列或者均不写死，这样相关的宽度都是自适应的。当缩小浏览器的大小时，表格的大小不容易发生错乱。...
2021-06-17 15:10:44
1545
原创 页面内嵌入iframe出现滚动条
一、问题出现原因iframe可以在原有的页面中嵌入一个新的页面，在所嵌入的新的页面中会出现相关的滚动条。二、问题解决方案直接控制iframe框架，使其不能出现滚动条。具体相关的代码如下所示：<iframe :src="srcUrl" frameborder="0" scrolling="no"></iframe>以上相关的关键代码为：frameborder="0" scrolling="no"...
2021-06-17 15:06:08
5796
4
原创 出现弹窗引起窗口抖动
一、问题出现原因当出现弹窗时，body元素中会新增padding-right: 6px;而当弹窗隐藏时，body元素中不会新增padding-right: 6px;这一css属性样式。二、问题解决方式在body元素中新增padding-right: 0 !important;这一属性。即：body { padding-right: 0 !important;}...
2021-06-17 15:00:59
681
原创 el-tooltip导致窗口抖动
问题描述随着el-tooltip的显示与隐藏，窗口出现相关的抖动。问题产生的原因el-tooltip占有一定的高度，当el-tooltip显示时，会导致相关滚动条的显示。当el-tooltip隐藏时，会导致相关的滚动条隐藏。然后随着el-tooltip的交替显示与隐藏，滚动条也会交替的显示与隐藏，导致窗口出现抖动。问题解决方案在body中添加overflow: hidden;的css属性，使得其相关的滚动条不再出现。即：body { overflow: hidden;}...
2021-06-15 16:33:23
2862
5
原创 css布局常见问题
一、宽度设置问题在设置相关元素的宽度时，为了考虑到相关的适配问题，故不能将宽度写死，往往将宽度的单位设置为%或者vw。注意：%单位的定义是针对父元素而言的。vw单位是针对视口宽度而言的。二、高度设置问题在整体布局的高度设置中不用过多的考虑布局问题，因此需要将高度写死，此时常使用px单位。（在浏览器中常出现滚动条来进行相关的调节）。同时相关的px写常使用与竖直方向，比如相关的margin-top、margin-bottom、top与bottom方向的设置。在整体布局中不将高度写死出现的问题：
2021-06-15 14:57:00
501
原创 el-tooltip数据更新后提示框不能进行显示
问题代码如下<el-tooltip :content="data.name" :disabled="showSelected" placement="bottom" effect="light" > <div class="name" @mouseover="mouseOver(data)" v-if="data.name !== data.originname"> <span>{{data.name}}</span> &l
2021-06-15 10:33:19
1339
原创 div嵌套将嵌套内的div改成inline-block属性问题
问题示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #main { border: 1px solid black; } #main > div {
2021-06-14 19:29:00
644
原创 github访问速度较慢
修改hosts文件在window10系统下，找到hosts文件，该文件所在的目录为：C:\Windows\System32\drivers\etc\hosts向hosts文件中新增如下语句：140.82.114.3 github.com199.232.69.194 github.global.ssl.fastly.net前面为相关网站所涉及的IP地址，其相关网站所对应的IP地址查询方式可以访问：https://www.ipaddress.com/...
2021-05-18 10:42:27
66
原创 python 实现录音加百度语音识别
一、在python中使用pyaudio进行录音环境准备1、首先在相关的项目下使用如下命令安装pyaudio。pip install pyaudio2、使用pip install pyaudio安装失败的解决方式（1）在https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyaudio下下载相关的版本。因为我是win10，64bit的系统，同时python的相关版本为3.8，故选择下载如下的相关whl文件。注意：cp38表示python 的版本为3.8，下
2021-05-17 12:17:22
1354
2
原创 flask框架中无法正常显示背景图
问题描述在flask中使用img引入图片时，图片不进行相关的显示。解决方案在Flask的项目文件下新建static文件夹，然后将图片放在static文件夹下。其相关的src属性具体赋值如下所示 img.src = "{{ url_for('static', filename = 'chessBoard.png') }}"注意：chessBoard.png为背景图片名...
2021-05-14 17:06:21
2284
原创 Flask程序运行过程
Flask程序运行过程：1、当客户端想要获取资源时，一般会通过浏览器发起HTTP请求。2、 此时，Web服务器会把来自客户端的所有请求都交给Flask程序实例。3、 程序实例使用Werkzeug来做路由分发（URL请求和视图函数之间的对应关系）。4、根据每个URL请求，找到具体的视图函数并进行调用。在Flask程序中，路由的实现一般是通过程序实例的装饰器实现。5、Flask调用视图函数后，可以返回两种内容：字符串内容：将视图函数的返回值作为响应的内容，返回给客户端（浏览器）。HTML模板内容
2021-05-11 23:34:30
770
1
原创 requirements文件
一、引用原因在flask框架中，其各自含有相关的虚拟环境，当重新建立一个虚拟环境时，其相关的扩展应用或者包也会消失，需要重新进行下载。如下所示其相关的虚拟环境所含有的包如下：此时可以新建一个requirements.txt文件记录所有的依赖包的名称和相关版本信息，到时新建虚拟环境时如果想要重新引入到其他虚拟环境下的包，则可以使用requirements.txt文件进行引用。注意：其相关的文件名称可以任意，但是一般情况下常用requirements.txt名称。二、创建requirements.t
2021-05-11 23:10:10
456
原创 JS 二维数组转变成一维数组
实现代码如下所示var twoArray = [["a", "b", "c"], ["d", "e", "f"]];// 使用apply()使其所指的对象为一维数组，然后通过twoArray来传递相关的参数var oneArray = [].concat.apply([], twoArray);// reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值// 语法：array.reduce(function(total, currentValue, cur
2021-05-09 21:49:09
1165
原创 使用动态组件实现多标签
一、实现效果二、相关代码详情<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态组件</title> <style> div { width: 250px; } .tab-button {
2021-05-09 17:48:30
130
原创 硬刷新和刷新的区别
一、相关快捷键刷新的快捷键为F5。硬刷新的快捷键为ctrl+F5。二、区别刷新：单纯的刷新本地的缓冲记录数据，不会产生流量。不需要访问远程服务器。硬刷新：从对应的网站上重新下载数据，会长信流量。需要访问远程服务器。...
2021-05-01 19:13:28
1404
原创 Vue自定义指令实现随机背景色
1、实现的具体效果演示2、具体功能实现的相关代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>随机背景颜色</title> <style> div { margin: auto; width: 567px
2021-05-01 16:22:57
990
原创 Vue实现下拉菜单
1、所实现的具体功能效果2、具体功能实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> body { width: 600px; }
2021-05-01 15:56:50
3091
原创 如何使用浏览器端的开发者工具调试代码
1、相关示例代码如下所示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2021-05-01 10:42:17
634
原创 Vue中key的重要作用
一、使用key管理可复用的元素1、相关示例如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-if-key</title> </head> <body> <div id="app"> <template v-if="
2021-04-29 17:18:04
455
1
原创 JS二叉树前序、中序、后序、层序遍历算法
一、二叉树的定义二叉树是另一种树型结构，它的特点是每一个节点至多只有两棵子树（即二叉树中不存在度大于2的结点），并且，二叉树的子树有左右之分，其次序不能任意颠倒。二、先序遍历、中序遍历、后序遍历操作定义1、先序遍历操作定义若二叉树为空，则空操作；否则访问根节点先序遍历左子树先序遍历右子树2、中序遍历操作定义若二叉树为空，则空操作；否则中序遍历左子树访问根节点中序遍历右子树3、后序遍历操作定义若二叉树为空，则空操作；否则后序遍历左子树后序遍历右子树访问根节点三、
2021-04-29 16:53:49
586
原创 Vue对象更新检测
一、Vue中有关对象检测介绍由于JavaScript的限制，Vue不能检测对象属性的添加和删除。二、解决方案1、使用Vue全局的set()和delete()方法来添加和删除对象的属性Vue.set(vm.person, 'name', 'Mary')Vue.delete(vm.person, 'name')2、使用Vue实例的$set()和$delete()方法来添加和删除对象的属性vm.$set(vm.person, 'name', 'Mary')vm.$delete(vm.person
2021-04-25 19:01:04
197
原创 Vue中的数组更新检测
一、数组更新检测简介Vue的核心是数据与视图的双向绑定，为了监测数组中元素的变化，以便能及时反映到视图中，Vue对数组的中的变异方法进行了相关的包裹，其能够改变原始数组，即相关的变异方法能够很好的实现数据和视图的双向绑定。数组中还存在非变异方法，其不能改变原始数组。Vue在检测到数组变化时，并不会直接重新渲染整个列表，而是最大化地复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆的使用旧数组，不用担心性能的问题。二、变异方法push()pop()shift()unsh
2021-04-25 18:38:32
463
原创 v-show和v-if的区别与联系
一、v-show和v-if的共同点1、v-show和v-if都能控制元素的显示和隐藏2、当两者均需要控制多个元素的显示与隐藏时，都可以使用HTML5新增的<template>元素来包裹需要切换显示与隐藏的多个元素。注意：在最终的的渲染结果中是不会包含<template>元素的，实际上<template>元素是被当作一个不可见的包裹元素，主要用于分组条件的判断和列表渲染。二、v-show和v-if的区别1、控制元素显示与隐藏的方式使用v-show指令，元素本身
2021-04-25 17:15:12
389
原创 v-bind指令
一、v-bind指令简介v-bind指令用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。二、v-bind的使用方式1、绑定一个属性<img v-bind:src="imgSrc">2、使用v-bind的缩写绑定属性<img :src="imgSrc">3、使用相关的动态属性名<img v-bind:[attribute]="imgSrc">4、内联字符串拼接<img v-bind:src="'imag
2021-04-25 16:48:47
3829
原创 Flask修改静态资源无效
1、原因在第一次运行了相关的应用后，浏览器会将其相关的静态资源进行缓存，当再次启用该应用后，其相关的静态资源会优先从浏览器中进行载入。2、解决方法为了使浏览器端能够从服务端拿到更新后的资源，可以清除浏览器端的缓存信息。...
2021-04-25 15:34:55
469
原创 Pycharm启动Flask的几种方式
一、在相关的终端中进行启动1、进入到相关虚拟环境中，然后进入到相关虚拟环境中的Script激活虚拟环境2、进入到相关的启动文件中，然后输入如下语句进行启动二、使用python进行启动1、按住旁边的小绿角进行启动2、进入到相关具体的项目文件下，然后在相关的终端输入如下语句...
2021-04-25 09:11:24
1701
原创 使用lodash来完成深拷贝和浅拷贝
1、lodash的简介lodash是一个一致性、模块化、高性能的JavaScript实用工具库。lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得更简单。2、lodash的相关使用参见lodash的相关中文文档：https://www.lodashjs.com/3、lodash相关深拷贝参见：https://www.lodashjs.com/docs/lodash.cloneDeep4、cdn引入lodash.js的相关网站参
2021-04-18 10:12:47
1013
原创 Git的基本使用
一、Git简介Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。Git的功能特性从服务器上克隆完整的Git仓库（包括代码和版本信息）到单机上。在自己的机器上根据不同的开发目的，创建分支，修改代码。在单机上在自己创建的分支上提交代码。在单机上合并分支。把服务器上最新的代码fetch下来，然后跟自己的主分支合并。生成补丁，把补丁发送给主开发者。开发者之间可以通过pull命令解决冲突，解决完冲突之后再向主开发者提交补丁。二、Git的安装可以在相关的官
2021-04-12 23:28:17
116
原创 Express的介绍与安装
一、Express的作用原生的http在某些方面表现不足以应对我们的开发需求，所以可以使用Express框架来加快我们的开发效率，使我们所写的代码更高度的统一。Express的官网：http://expressjs.com/二、Express的安装可以在相关的项目目录下使用以下命令进行安装：npm install express --save...
2021-04-12 16:45:06
132
原创 JavaScript中数组去重方法
var res_arr = function(arr) { return arr.filter(function(ele, index) { return arr.indexof(ele) == index; })代码解释：arr表示所传递过来的数组。数组中的filter()方法用于创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。而ele表示当前元素的值，index表示当前元素的索引值。数组中的indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
2021-04-04 15:53:40
77
原创 在Sublime Text中安装Node.js插件
1、在package control中查找nodejs，然后安装相关的步骤安装即可。package control相关的地址：https://packagecontrol.io/2、打开Sublime Text上的终端，然后输入以上相对应系统的安装命令
2021-04-04 14:48:27
509
Compass的基本使用
1、打开命令窗口，然后使用cd命令进入到需要进行项目创建的目录2、通过compass创建目录相关格式为：compass create <项目名>3、创建好后其所生成的目录如下所示：其中sass目录下所放的为scss文件，而stylesheets目录下所放的为编译后的css文件。4、使用cd命令进入到项目目录，然后初始化compass5、compass编译类似于sass，需要现在项目下的sass文件中创建scss文件，然后再命令中输入compass compile，最终就会在项
2021-04-04 11:17:54
1094
原创 SASS的扩展库Compass
一、Compass简洁Compass是一个基于SASS的类库，它帮助了我们预定义好了很多常用的Mixin和Function。Compass的组成模块：CSS3：将CSS3的带有属性前缀的兼容代码组合成Mixin。Reset：用于清除浏览器自带样式，保证不同浏览器下显示的一致性。Utilities：对一些常用的CSS样式进行简化。Helpers：提供一些常用的函数。Layout：提供栅格系统和一些简单的布局样式。二、CSS3模块Compass的CSS3模块实际就是将开发中经常用到的CSS
2021-04-04 09:25:10
291
1
apache-tomcat-9.0.33.exe
2018-07-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人