- 博客(88)
- 收藏
- 关注
RSS订阅原创 vue element el-select 下拉多选带有全选框
vue element el-select 下拉多选带有全选框<template> <div> <el-form ref="form" label-width="80px" :model="test"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="核算中心:"> <
2022-05-24 13:25:56
952
原创 element el-table组件修改表格表头和某个单元格背景色
element el-table组件修改表格表头和某个单元格背景色<template> <div> <el-table :data="tableData" style="width: 100%" :cell-style="cellStyle" :header-cell-style="headerCellStyle" > <el-table-column prop="city" lab
2022-05-24 13:22:32
879
原创 js 比较啷个日期的大小
*js 比较啷个日期的大小function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.getTime() > oDate2.getTime()){ console.log('第一个大'); } else { console.log('第二个大'); }}tab('2015-10-10','20
2022-05-20 10:31:39
119
原创 JS数组方法的整理总结
JS数组方法的整理总结join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增1.joinjoin，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)书写
2022-04-01 14:19:02
279
原创 vue element el-upload导入,导出(excel)功能
vue element el-upload导入导出功能util.js文件夹import Axios from 'axios'const server = process.env.VUE_APP_BASE_APIimport request from '@/utils/request'import { Message} from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'
2022-03-31 11:10:24
1317
原创 Vue中Vuex的详解与使用(简洁易懂的入门小实例)
**那么现在就开始正文部分了众所周知 Vuex 是什么呢？是用来干嘛的呢？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。例如：你有几个数据，几个操作，在多个组件上都需要使用，如果每个组件都去调用都是写，就会很麻烦，代码又臭又长。当然 如果没有大量的操作和数据需要在多个组件内使用的话呢，其实也就可以不用这个 Vuex了。看个人吧！这里我就用自己对 Vuex 的理解来介绍这个东西怎么去使用，我人
2022-02-24 10:39:12
724
原创 vue create 和vue init webpack的区别
vue create 和vue init webpack的区别vue create 是vue-cli3.x的初始化方式vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue cli2升级到vue cli31.先升级npm的版本npm install -g npm2.再卸载之前的vue cli 2.9.6npm uninstall -g @vue/cli3.下载最新的vue cli版本npm inst
2022-02-23 10:44:00
885
原创 vue element分页组件的封装并使用
##vue element分页组件的封装并使用第一步在components文件家里新建分页组件<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="page
2022-02-19 14:08:13
847
原创 vue el-tree和el-select下拉框的封装
vue el-tree和el-select下拉框的封装效果：<!-- /** * 树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用 * @author sxy https://bysjb.cn * @date 2020-12-02 */--><template> <div> <div v-show="isShowSelect" class="mask" @click="i
2022-01-11 14:16:59
1247
1
原创 vue el-table表格内行内编辑input、日期组件等
table表格内行内编辑input、日期组件等<template> <!-- table表格内行内编辑input、日期组件等 --> <div id="app"> <!-- @cell-dblclick="tableDbEdit" 当单元格被双击击时会触发tableDbEdit事件，将文字变成input输入框,也可以使用单击事件@cell-click=''--> <el-table ref="table"
2022-01-11 14:00:36
3399
原创 elementUI分页删除最后一页数据时跳转回上一页并且el-table序号递增
elementUI分页删除最后一页数据时跳转回上一页queryParams: { current: 1,//当前页数 size: 10,//每页条数 channel: undefined, },const totalPage = Math.ceil((this.total -1 ) / this.queryParams.size) // 总页数this.queryParams.current = this.queryParams.curr
2021-12-29 10:41:08
916
原创 vue el-date-picker 最多只能选中一个月 选中第一个日期后 第二个日期给出可选范围限制
el-date-picker 最多只能选中一个月 选中第一个日期后 第二个日期给出可选范围限制**el-date-picker 选中第一个日期后 第二个日期给出可选范围效果: 选中2020年5月13日之后 前面4月13日到5月13日可选 后面5月13日到6月13日可选** <el-date-picker v-model="value2" type="datetimerange" size="small
2021-12-21 10:17:22
2391
原创 git如何将本地分支同远程分支进行关联
git如何将本地分支同远程分支进行关联将本地分支同远程分支进行关联，可以分为以下2种情形：情形1：本地已经创建了分支dev（以dev为例，下同），而远程没有可以通过以下2种方法在远程创建分支dev，并与本地分支进行关联：方法1： git push -u origin dev方法2： git push --set-upstream origin dev情形2：远程已经创建了分支dev,而本地没有在本地创建分支并与远程分支进行关联，也有2种方法：方法1分为两步：step1:先将远程分支pull
2021-12-21 10:07:39
18299
1
原创 element实现树形选择器，支持多选、回显正常显示
element实现树形选择器，支持多选、回显正常显示<!-- /** * 树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用 * @author sxy https://bysjb.cn * @date 2020-12-02 */--><template> <div> <div v-show="isShowSelect" class="mask" @click="isShow
2021-12-21 10:02:19
2008
2
原创 vue通过a标签本地下载Excel模板
前端标题vue通过a标签本地下载Excel模板前期准备 我们需要准备你需要的Excel模板下载下来，然后找vue项目里放静态文件的地方，注意的是你的模板名称要和a标签的里的保持一致<a class="loadMould" :href="handleDownload('/document/导入模板.xlsx')" download="导入模板.xls">下载导入模板</a> /**下载导入模板 */ methods:{ handleDownload (url) {
2021-12-13 09:33:34
1955
1
原创 vue element el-date-picker日期选择器上来获取默认时间
##vue element日期选择器上来获取默认时间<el-form-item label="开单日期："> <el-date-picker v-model="seachForm.timeValue" :editable="false" value-format="yyyy-MM-dd" type="daterange" range-separato
2021-10-20 14:12:42
973
原创 如何在vue中监听scroll，从而实现滑动加载更多
如何在vue中监听scroll，从而实现滑动加载更多首先需要明确3个定义：文档高度：整个页面的高度可视窗口高度：你看到的浏览器可视屏幕高度滚动条滚动高度: 滚动条下滑过的高度当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底。首先在mounted中添加监听：window.addEventListener(‘scroll’, this.scrollFn); // 监听scroll然后创建3个函数分别获取文档高度、可视窗口高度、滚动条高度：//文档高度 getScro
2021-09-27 15:23:17
834
原创 针对JavaScript（ES6）中的箭头函数详解
针对JavaScript（ES6）中的箭头函数详解javaScript中的箭头函数箭头函数是ES6中新增的内容对于初学者来说可能会有很多疑惑，大括号和括号有什么区别呢?看了好多博客，讲的都是模棱两可，今天我来为大家献上干货，看完这个绝对能很好的掌握箭头函数。首先明确箭头函数有两种不同的括号，功能是不一样的，例如下面的代码 后面是小括号的箭头函数默认只有一行代码，默认有返回，后面是大括号的默认是代码段，默认没有返回值，需要手动添加returnconst f2=(a,b)=>(a+b)cons
2021-07-22 09:32:16
322
1
原创 详解element-ui设置下拉选择切换必填和非必填
<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="活动名称" prop="name" :required="isHaveTo">
2021-04-17 10:53:34
699
原创 vue 项目的 env 文件使用
vue 项目的 env 文件使用为了让开发者头疼的开发环境问题…文件(在项目根目录新建).env 无论开发环境还是生成环境都会加载.env.development 开发环境加载这个文件.env.production 生成环境加载这个文件注意env 文件需要声明运行的环境.env.developmentNODE_ENV = development.env.productionNODE_ENV = production定义变量需要以 VUE_APP_ 作为前缀.env.develo
2021-03-06 09:29:08
590
原创 js正则0-100或者多位数的验证
js正则0-100或者多位数的验证最多保留两位小数,值范围在0-100之间（包含0 100）不包含（01 001） const res =/^((?:0|[1-9][0-9]?|100)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;请输入整数,值范围在0-1000000000之间（包含0 1000000000）不包含（01 001） const reg =/^(?:0|[1-9][0-9]{0,9}?|1000000000)$/;最多保留两位小数,
2020-12-30 14:54:35
2138
原创 Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。1.笨拙式引用：准备工作先注册，再登录、找到图标管理、我的项目点紫色的这个创建自己的项目图中画红线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。 如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图
2020-12-30 10:02:17
507
原创 computed和watch的区别
computed和watch的区别computed计算结果并返回，只有当被计算的属性发生改变时才会触发（即：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新及孙）watch监听某一个值，当被监听的值发生变化时，执行相关操作。（与computed的区别是，watch更加适用于监听某一个值得变化，并做对应操作，比如请求后太接口等。而computed适用于计算已有的值并返回结果。）监听简单数据类型：data(){ return{ 'first':2 }
2020-12-28 11:46:24
134
1
原创 element el-form的表单自定义规则
element el-form的表单自定义规则<script lang="ts">// import { AccountDTO } from "@/apis/accountGroup";import Vue, { PropType } from "vue";export default Vue.extend({ name: "riskManagement", data() { const moneyRules = (rule: any, value: any, callb
2020-12-24 15:31:26
999
原创 export和export default的区别？
export和export default的区别？使用上的不同export default xxximport xxx from './'export xxximport {xxx} from './'
2020-12-14 10:27:14
106
原创 git的冲突解决--git rebase之abort、continue、skip
git的冲突解决–git rebase之abort、continue、skip（1）应用实例描述假设在github或者gitoschina上建立了一个项目，默认分支为master分支，远程master分支上c.sh文件内容：开发者A、B分别将项目拷贝到自己本地进行开发某一天，开发者B提交c.sh，并且提交成功，之后，开发者A在本地代码并没有和远程master分支的代码同步的情况下，对本地的c.sh进行了修改，修改后c.sh内容如下：修改后，开发者A准备将代码提交到远程master分支上。
2020-12-09 16:30:06
11075
原创 小程序上传图片
小程序上传图片wxml<!-- 容器 --><view class='ui_uploader_cell'> <!-- 根据已选择的图片临时路径数组展示图片--> <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="index"> <!-- 删除--> <icon class='ui_uploader_item_i
2020-12-04 16:11:50
106
原创 小程序上传视频
小程序上传视频wxml <view class="page-body-info"> <block wx:if="{{src === ''}}"> <view class="image-plus image-plus-nb" bindtap="chooseVideo"> <view class="image-plus-horizontal">添加视频</view> <vie
2020-12-04 16:04:31
212
原创 js将canvas保存成图片并下载
js将canvas保存成图片并下载<canvas id="canvas" width="400" height="400"></canvas><div> <button id="save">保存</button></div>var arr = [ {locations:[[0,0],[200,200],[0,400]],color:"red"}, {locations:[[0,0],[400,0],[2
2020-11-19 15:21:39
2674
原创 在JS数组特定索引处指定位置插入元素的技巧
在JS数组特定索引处指定位置插入元素的技巧需求: 将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间来研究它。// 原来的数组var array = ["one", "two", "four"];// splice(position, numberOfItemsToRemove, item)// 拼接函数(索引位置, 要删除元素的数量, 元素)array.splice(2, 0, "three"); // array; // 现在数组是这个样子 ["one", "two"
2020-11-18 16:48:17
4553
原创 CSS代码使纯英文数字自动换行
CSS代码使纯英文数字自动换行*当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break*word-wrap用来控制css换行两种取值：(1)normal(2)break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。）word-
2020-11-17 11:17:04
186
原创 小程序上下切换位置
小程序上下切换位置wxml<view wx:for="{{companyData}}" wx:key="index" class="overHiden"> <view class="floarLeft">{{item.name}}</view> <view class="floarRight" wx:if="{{index != 0}}" data-index="{{index}}" bindtap="topClick"> 上 &
2020-11-12 14:27:56
334
1
原创 小程序阻止弹框下的页面滑动
小程序阻止弹框下的页面滑动(要在真机下调试) /** * 弹出框蒙层截断touchmove事件 */ preventTouchMove: function () { },这样就可以了，，，，
2020-11-04 15:21:38
201
原创 小程序自定义弹框
小程序自定义弹框wxml<!--button--><view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</view> <!--mask--><view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view><
2020-11-04 14:27:15
149
原创 小程序密码输入框
小程序密码输入框wxml<view class="Toptitle">请设置支付密码并妥善保管</view><form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="item"> <input class='iptbox' value="{{Value.length>=index+1?Va
2020-11-04 14:13:21
307
1
原创 vue富文本编辑器
Vue-Quill-Editor主流富文本编辑器对比前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。1.wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。2.UEditor（百度）优势：插件多，基本曼度各种需求，由百度web前端研发部开发。缺点：插件提交较大，网页
2020-10-16 17:03:43
528
1
原创 keep-alive实现原理
keep-alive实现原理本文介绍的内容包括：keep-alive用法：动态组件&vue-routerkeep-alive源码解析keep-alive组件及其包裹组件的钩子keep-alive组件及其包裹组件的渲染二、keep-alive介绍与应用2.1 keep-alive是什么keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。一个场景用户在某个列表页面
2020-10-13 10:38:25
200
原创 JS 时间转化为几分钟前 几小时前 几天前
JS 时间转化为几分钟前 几小时前 几天前dateTimeStamp为传入的时间const timeago = (dateTimeStamp) => { var nowTime = dateTimeStamp; //转换为时间戳 var thisTime = nowTime; thisTime = thisTime.replace(/-/g, '/'); var time = new Date(thisTime); time = time.getTime(); var
2020-09-28 14:42:31
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人