自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(322)
  • 资源 (14)
  • 收藏
  • 关注

原创 tableSearch 组件

table-search

2021-08-29 11:32:12 38

原创 使用 Set 数据结构 或 reduce 求并集、交集

const arr = this.tableData.reduce((prev, next) => { prev.push(next.globalInvId) return prev}, [])const brr = data.reduce((prev, next) => { if (arr.includes(next.globalInvId)) { prev.push(next) return prev } return prev}, [])if

2021-08-25 14:30:19 29

原创 antd-vue table 分页缓存已勾选数据

<a-table size="small" bordered rowKey={this.rowKey} row-selection={{ type: this.selectType, selectedRows: this.selectedRows, selectedRowKeys: this.selectedRowKeys, onChange: this.handleSelectChange.bind(this), }} scroll={ { y:

2021-08-25 11:13:50 73

原创 antd-vue table 动态添加必填项

import Schema from 'async-validator'async handleValidate () { const length = this.tableData.length for (let index = 0; index < length; index++) { for await (let form of (this.tableData[index].extraInfo || [])) { if (form.required) {

2021-08-25 11:13:21 110

原创 element-ui Checkbox 多选框如何指定绑定的值

Checkbox 多选框,在单独使用可以表示两种状态之间的切换。在el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean。// `checked` 为 true 或 false<el-checkbox v-model="checked">备选项</el-checkbox>我们可以看到的是,绑定变量 checked 为 true 或 false。如果我们想将 true 或 false,转换为 1 或 0,或者 Y

2021-08-20 16:40:51 161

转载 ant-design-vue select 组件 placeholder 被隐藏不显示问题

问题描述:select 组件绑定了 v-model 和 placeholder,当 v-modal 绑定的属性为空时,select 组件的 placeholder 属性不显示。// 初始化 level = '' <a-select v-model="level" placeholder="选择日志级别" allow-clear> <a-select-option value="info">一般</a-select-option> <a-sele..

2021-05-09 10:32:25 480

转载 Vue 项目中 JSX 语法如何使用 scopedSlots

面试官:Vue如何在 JSX 中使用 scopedSlots ? scopedSlots 和 slot-scope 的区别scopedSlots 和 slot-scope 的区别作用相同:都是作用域插槽 场景不同:slot-scope 是模板语法,scopedSlots 则是编程式语法 使用不同:在 template 中使用 slot-scope,在 render 函数中使用 scopedSlots在 template 中如何使用在 JSX 中如何使用...

2021-03-17 20:06:55 1144

转载 JS number 倒序输出 string

用 JavaScript 写一个函数,输入 int 型,返回整数逆序后的字符串。如:输入整型 1234,返回字符串“4321”。要求必须使用递归函数调用,不能用全局变量,输入函数必须只有一个参数传入,必须返回字符串。输入为一个参数 int 型,输出为字符串。(一)非递归函数:我们将 int 型转化为 string ,再把每个字符分开,接着做反转,最后将每个字符链接起来。const...

2021-02-21 13:58:34 133

原创 Vue 富文本编辑器(Vue-Quill-Editor)

Vue-Quill-Editor:基于Quill、适用于Vue2的富文本编辑器。1.首先安装依赖包npm install vue-quill-editor --save2.引入样式(这里是组件引入,非全局引入)import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill...

2021-02-19 23:13:44 65

转载 如何实现输入银行卡号每隔四位自动添加一个空格的功能?

由于银行卡号是相对比较长的,一般银行卡的都是呈现每隔四位数自动补齐一个空格,且再次输入光标不会错位。这里我们使用 element-ui 库中 的 el-input 组件中的 input 事件,对输入的数据进行处理,代码实现如下:<el-input ref="cardInput" v-model="input" placeholder="请输入内容" @input="formatCardNumber"/>我们可以看到 input 事件中的formatCardNumber 方法,就是对输.

2021-02-19 22:25:36 546

原创 Taro 小程序父组件如何向子组件传参

父组件向子组件传参,子组件在 this.props 中可以接收父组件传递过来的参数。首先定义父组件:classClientextendsComponent{render(){const{ list, type }=this.statereturn(<View><ViewclassName="list">{list.map((list,index)...

2021-02-18 23:11:34 304

转载 element-ui table 组件多列排序样式问题

在 element-ui 官网中,table 组件提供排序功能,但是无法支持多列数据进行排序,那么我们需要如何修改样式呢?<el-table:data="tableData":header-cell-class-name="handleTheadAddClass"@sort-change="handleSortChange"@selection-change="handleSelectionChange"><el-table-columnprop="...

2021-02-17 23:13:38 265

转载  vue 插槽之 v-slot 与 slot-scope 的有什么不同?

v-slot与slot-scope的有什么不同?父组件向子组件里面插入一些东西1.基本使用<SlotDemo:url="website.url">{{website.title}}</SlotDemo><a:href="url"><slot>默认内容</slot></a>exportdefault{props:['url']}2.作用域插槽<...

2021-02-17 22:26:27 104

转载 深入浅出 webpack 之配置 devServer

devServer可以用来提高开发效率,它提供一下配置可以改变devServer 的默认行为。除了在配置问题通过devServer 传入参数外,还可以通过命令行参数传入。注意:只用在通过 devServer 去启动 webpack 时,配置文件里devServer 才会生效,因为这些参数所对应的功能都是devServer 提供的,webpack 本身并不认识devServer 配置项。1.hotdevServer.hot 配置是否启用模块热替换功能。devServer 默认行为是在发现...

2021-02-16 17:56:37 165

转载 【前端词典】这些功能其实不需要 JS,CSS 就能搞定

今天我们大家介绍一些可能你乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单。1.每个单词的首字母大写其实我第一次看到这个功能的时候,就是使用 JS 去实现这个功能,想都没有想 CSS 可以完成这个功能。方法如下:funtion capitalizeFirst(str) { let result = '' result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpper

2021-02-16 16:50:01 34

转载 异步迭代器 for await of

for of方法能够遍历具有Symbol.iterator接口的同步迭代器数据,但是不能遍历异步迭代器。ES9新增的for await of可以用来遍历具有Symbol.asyncIterator方法的数据结构,也就是异步迭代器,且会等待前一个成员的状态改变后才会遍历到下一个成员,相当于async函数内部的await。现在我们有三个异步任务,想要实现依次输出结果,该如何实现呢?// for ...

2021-02-16 16:16:11 66

转载 路由和菜单 - Vue 动态权限路由实现菜单列表之进阶版

路由和菜单是组织起一个应用的关键骨架,为了方便管理,使用了中心化的方式,在 router.config.js统一配置和管理。基本结构在这一部分,脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由和菜单的基本框架,主要涉及以下几个模块/功能:路由管理 通过约定的语法根据在 router.config.js 中配置路由。 菜单生成 根据路由配置来生成菜单。菜单项名称,嵌套路径与路由高度耦合。 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。下面简

2021-02-16 15:09:54 271 2

原创 git 常用命令

一、创建版本库1.git clone <url> :克隆远程版本库2.git init:初始化本地版本库二、修改和提交1.git status:查看状态2.git diff:查看变更内容3.git add .:跟踪所有改动过的内容4.git add <file>:跟踪指定的文件5.git my <old> <new>:修改文件名6.gut rm <file>:删除文件7.git rm -cached <

2021-02-16 14:42:30 27

原创 使用 async-validator 自定义校验规则实现 table 组件的循环表单校验功能

const validators = []async validate () { try { await Promise.all([...validators.map(vm => vm.validate())]) return true } catch (err) { return false }}import Reg from '@/utils/utils-libs/validator.js...

2021-02-09 17:11:06 569

原创 ant-design-vue 表单验证和 validator 自定义表单验证

在ant-design-vue中,提供FormModel表单组件,且支持v-model数据绑定,同时可以校验和提交功能的表单。一、表单验证<a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}"> <a-form-model-item label="密...

2021-02-09 11:56:41 4016

原创 element-ui table 默认选中

getInit(){constunwatcher=this.$watch('baseForm',function(val){if(val.tableData.length){val.tableData.forEach(item=>{this.$nextTick(()=>{this.$refs.signTable.toggleRowSelection(...

2021-02-09 11:35:37 121

原创 ant-design-vue table 多选支持默认全选功能

<a-table size="small" bordered rowKey="id" row-selection={{ onChange: this.handleSelectChange.bind(this), getCheckboxProps: record => { return { props: { defaultChecked: this.selectedRowKeys.includes(record.id...

2021-02-09 11:34:38 964

原创 computed 传入参数

computed:计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容(computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算)。一般来说,需要依赖别的属性来动态获得值,有时候我们计算的值,与某个动态值关联,那我们又该如何向 computed 中传入参数呢?将计算属性返回值改为函数,再进行传值操作,同样我们使用方法也可以到达一样的效果。comput

2021-02-07 23:24:27 526

原创 element-ui table 循环表单校验

对于循环表单,我们可以使用 table 组件来添加其循环表单。那么 form 表单验证和 table 循环组件将怎么联合起来使用校验表单呢?v-for 是我们用来遍历或者增加多个表单,但是对于 table 组件只需传入 column 和 data 就可以渲染出表格。其实我们将传入的 column 项,添加为 Input、InputNumber、Radio、Checkbox、Select、Cascader、DatePicker、Upload 等表单组件即可。<el-form ref="f.

2021-02-07 23:11:54 332

转载 JS 数组逆序输出

JS 数组逆序输出,即反转数组1.for 倒序输出var arr = [1, 2, 3]for (var i = arr.length - 1; i >= 0; i--) { console.log(arr[i]) // 3 2 1}2.reversevar str = 'hi'console.log(str.split('').reverse().join('')) // ih3.for 元素前后调换var arr = [1, 2, 3]var temp

2021-01-19 22:59:31 385

原创 JS中的 every, some, forEach, map 和 for 循环的迭代终止

对遍历循环如何跳出循环,通常我们会想到 return false 或者 break,但有些时候又不起作用,这是怎么回事呢?1.every()用来判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回 true,因此当 every 内部返回 false 时,跳出整个循环。var arr = [1, 2, 3, 4, 5];var arr3 = arr.every(function(x) { console.log(x) // 1 2 3 return x < 3;});c

2021-01-12 23:12:51 360

转载 JS 数组方法

数组是 JS 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是很大影响。一、创建数组1.使用数组字面量表示法2.使用 Array 构造函数3.Array.of 方法创建数组4.Array.from 方法创建数组二、数组方法数组原型方法主要有以下这些:join():用指定的分隔符将数组每一项拼接为字符串 push():向数组的末尾添加新元素 pop():删除数组的最后一项 shift():删除数组..

2021-01-12 22:14:37 42

原创 ant-design-vue 点击操作确认弹框封装

点击一系列按钮,我们需要弹出二级弹框。当我们确认后,在进行调用接口。1.为了精简代码,可能我们会将弹框封装成一个工具函数。在$antdConfirm中,我们点击确认和取消按钮分别返回true/false。export const operationConfirm = function (attr, message) { const that = this return new Promise((resolve, reject) => { that.$antdConfir...

2020-12-09 22:48:11 2301

转载 CSS 图片去色处理

说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。// 黑白色img { transition: all .3s ease; filter: grayscale(100%); opacity: .6;}// 正常颜色 img:hover { filter: none; opacity: 1;

2020-12-09 22:45:47 211

转载 版本问题 Taro CLI 与本地安装运行时框架 @tarojs/taro-weapp 版本不一致, 请确保版本一致!

由于电电脑安装的 Taro 与项目的 Taro 版本不一致,在编译运行项目的时候,就出现了:版本问题 Taro CLI 与本地安装运行时框架 @tarojs/taro-weapp 版本不一致, 请确保版本一致!所以需要更新项目的 Taro 版本。# 首先更新 Taro CLI 工具,全部升级至最新版本# taro$ taro update self # npmnpm i -g @tarojs/cli# yarnyarn global add @tarojs/cli# 更新项目中.

2020-12-07 23:09:49 1496 2

原创 JS null与字符串拼接问题

场景描述:我们在拼接字符串的时候,有时候接口变量返回的是 null,如果我们直接拼接到一起的话,就会出现字符串中就会出现 null, 而不是用空字符串代替。那我们如何解决呢?判断拼接变量的类型if (name !== null || name !== undefined || name !== '') { // 拼接操作}上述是判断 name 不是一个空对象,或者未定义,或者不等于空字符串,那么我们进行拼接操作,当然我们可以简写代码如下:var result = name ||

2020-12-07 22:57:57 582

转载 Git冲突:commit your changes or stash them before you can merge. 解决办法

场景说明:当项目团队一起开发共用同一个分支提交代码时,用 git pull 来更新代码的时候,遇到了问题如下:error: Your local changes to the following files would be overwritten by merge: xxx/xxx/xxx.jsPlease, commit your changes or stash them before you can merge.Aborting出现这个问题的原因就是其他人也修改 xxx.js

2020-12-07 22:34:51 35

原创 ant-design-vue 数据字典 select 组件封装

对于前后端协商形成的key-value数据字典功能,可以通过平台维护该数据字典功能,也有可以通过前端自行添加枚举值统一配置。一、前端维护枚举值首先,我们在配置文件中,配置枚举值信息。// src/components/Dictionary/config/index.jsexport const riskGrade = [ { name: '好', value: 3 }, { name: '一般', value: 2 }, { name: '差', value: 1 },]..

2020-12-07 22:29:33 843

原创 Vue 项目优化图片

我们通常都会借助webpack打包工具,对小图进行转base64,或者使用字体图标等功能进行优化,以及制作雪碧图来减少访问请求次数等。在访问一个项目中,有时候我们通过接口访问图片资源时,图片加载也需要时间,我们如何快速的渲染图片呢?1.压缩文件将上传的图片,放到在线压缩网站上,对所有图片进行压缩,减少文件体积,加快渲染速度。如果用到阿里云OSS上传图片文件,我们可以使用阿里云提供的图片处理方式,例如:阿里云提供图片缩放的方法。按照比例缩放:x-oss-process=ima...

2020-11-18 21:53:46 158

原创 Vue 中如何配置项目支持 JSX 语法

Vue 是使用的的模板语法,Vue的模板实际上就是编译成了 render 函数,同样支持 JSX 语法。在 Vue 官网中,提供 createElement 方法来

2020-11-15 20:54:46 692

转载 Vue 使用 Export2Excel 导出 excel

1.安装依赖npm install -S file-savernpm install -S xlsxnpm install -D script-loader2.引入所需的JS文件把Blob.js和Export2Excel.js这两个文件放到src/utils/excel文件目录下,Blob 文件在GitHub上能找到。3.页面方法调用async handleExport () { const { data: { rows } } = await ReportFor...

2020-11-15 19:18:10 159

原创 在 render 函数中,Vue 实例属性:$attrs、$props、$listeners 和 $scopedSlots的使用

一、$attrs、$props、$listeners$attrs:当前组件的属性,通俗的讲也就是在组件标签定义的一系列属性,如input的value,placeholder等,但是不包括在当前组件里面定义的props属性$listeners:当前组件监听的事件,通俗的讲也就是在使用组件的时候在标签中定义的事件,如@input,以及一些自定义事件@tempFn等$props:当前组件从父组件那里接收的参数,通俗的讲和$attr差不多,但是只包括在当前组件中定义了的props属性。通俗的讲:$.

2020-11-15 18:58:24 821

原创 vue 后台管理系统如何生成动态菜单

说起菜单的如何生成的,这个会与路由和权限的定义有关。因为路由涉及页面的跳转以及当前菜单项高亮选中等,可能后面还会涉及面包屑、标签页等功能的制作。目前不考虑权限,我们根据约定路由的配置,来生成动态菜单。一、布局对于后台管理系统,通常由 sider 菜单栏、header、footer 和 content 的内容组成。<a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout> .

2020-11-08 22:09:15 555 2

原创 ant-design-vue select 可搜索下拉加载更多

1.搜索配置showSearch属性,支持单选模式可搜索。filterOption是否根据输入项进行筛选。当其为一个函数时,会接收inputValueoption两个参数,当option符合筛选条件时,应返回true,反之则返回false。filterOption(input, option) { return option.componentOptions.children[0].text.includes(input)},2.搜索与远程数据结合这里需要...

2020-11-05 22:09:32 2609 2

原创 ant-design-vue cascader 级联选择动态加载省市区接口数据

通过接口获取数据,用于配置 cascader 组件的options 可选数据源。async mounted () { const data = await this.getRegion() this.options = data.map(item => { item.isLeaf = false return item })}在接口返回的数据中,添加参数 isLeaf: false,动态加载数据时,才会触发 loadData 方法,.

2020-11-05 22:08:21 2212 5

echarts 设置地图外边框、地图背景渐变以及在地图上打点.js

主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图:https://blog.csdn.net/qq_36437172/article/details/106099547

2020-05-13

echarts 地图上如何打点

除了  scatter (散点图) 在地图上标记的方式之外,我们也可以使用 markPoint 图表标注的方式在地图上标记.

2020-05-13

基于element-ui 使用 upload 预览图片 (含删除功能)

基于element-ui 使用 upload 预览图片 (含删除功能)参考链接:https://blog.csdn.net/qq_36437172/article/details/100034867

2019-08-23

echarts legend 排列问题

legend 图例组件可以分组展示。详细说明:https://blog.csdn.net/qq_36437172/article/details/106125254

2020-05-14

vue 上传图片进行裁剪(VueCropper)

使用 VueCropper 第三方库,对上传的图片进行移动,缩放,裁剪等功能。

2019-04-18

echarts 柱状图渐变色背景

该案例设置 echarts 柱状图渐变色,同样也可以应用折线图、圆形图等。效果说明:https://blog.csdn.net/qq_36437172/article/details/106115048

2020-05-14

vue 封装的 echarts 组件

vue 封装的 echarts 组件,主要传递四个参数到组件中,title、legend、series、xAxis,分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用,数据被覆盖问题解决办法。

2019-03-05

微信小程序 swiper 组件实现层叠轮播图,同时在轮播图中自定义信息

微信小程序 swiper 组件实现层叠轮播图,同时自定义指示点样式和图片描述信息

2019-03-24

axios 常用配置以及请求方法封装

使用 axios 的基本配置(axios.create()、baseURL、拦截器)和 post、get、download、upload 等方法的封装。

2019-10-13

echarts 路径图

路径图:用于带有起点和重点信息的线数据的绘制,主要用于地图上的航班,路线的可视化。支持二维的直角坐标系和地理坐标系。详细介绍:https://blog.csdn.net/qq_36437172/article/details/106123884

2020-05-14

echarts 地图类型热力图

根据地理区域数据的可视化,除了在地图上添加散点之外,我们也可以制作地图类型的热力图,详细介绍:https://blog.csdn.net/qq_36437172/article/details/106121650

2020-05-14

echarts 图表加水平直线或者标准线.js

echarts 图表加水平直线或者标准线。添加标准线上的折线一种颜色,标准线下的折线又是一种颜色来区分标准线以上或者以下的数据。

2020-05-04

choose_goods.html

CSS 实现勾选商品规格:颜色、版本等参数样式,采用 input 标签 type=radio 实现单选功能。

2019-08-30

基于 echarts 第三方库制作地图信息

使用 echarts 第三库,开发地图组件信息,掌握 registerMap、geo 组件、visualMap 视觉映射组件等组件的配置信息

2019-10-05

空空如也

空空如也

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

TA关注的人 TA的粉丝

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