JSN___的博客

首先要引入子组件的路径。

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="核算中心:"> <

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

*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

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'

**那么现在就开始正文部分了众所周知 Vuex 是什么呢？是用来干嘛的呢？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。例如：你有几个数据，几个操作，在多个组件上都需要使用，如果每个组件都去调用都是写，就会很麻烦，代码又臭又长。当然 如果没有大量的操作和数据需要在多个组件内使用的话呢，其实也就可以不用这个 Vuex了。看个人吧！这里我就用自己对 Vuex 的理解来介绍这个东西怎么去使用，我人

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

##vue element分页组件的封装并使用第一步在components文件家里新建分页组件<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="page

vue el-tree和el-select下拉框的封装效果：<!-- /** * 树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用 * @author sxy https://bysjb.cn * @date 2020-12-02 */--><template> <div> <div v-show="isShowSelect" class="mask" @click="i

table表格内行内编辑input、日期组件等<template> <!-- table表格内行内编辑input、日期组件等 --> <div id="app"> <!-- @cell-dblclick="tableDbEdit" 当单元格被双击击时会触发tableDbEdit事件，将文字变成input输入框,也可以使用单击事件@cell-click=''--> <el-table ref="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

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

element实现树形选择器，支持多选、回显正常显示<!-- /** * 树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用 * @author sxy https://bysjb.cn * @date 2020-12-02 */--><template> <div> <div v-show="isShowSelect" class="mask" @click="isShow

前端标题vue通过a标签本地下载Excel模板前期准备 我们需要准备你需要的Excel模板下载下来，然后找vue项目里放静态文件的地方，注意的是你的模板名称要和a标签的里的保持一致<a class="loadMould" :href="handleDownload('/document/导入模板.xlsx')" download="导入模板.xls">下载导入模板</a> /**下载导入模板 */ methods:{ handleDownload (url) {

##vue element日期选择器上来获取默认时间<el-form-item label="开单日期："> <el-date-picker v-model="seachForm.timeValue" :editable="false" value-format="yyyy-MM-dd" type="daterange" range-separato

如何在vue中监听scroll，从而实现滑动加载更多首先需要明确3个定义：文档高度：整个页面的高度可视窗口高度：你看到的浏览器可视屏幕高度滚动条滚动高度: 滚动条下滑过的高度当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底。首先在mounted中添加监听：window.addEventListener(‘scroll’, this.scrollFn); // 监听scroll然后创建3个函数分别获取文档高度、可视窗口高度、滚动条高度：//文档高度　　getScro

<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="活动名称" prop="name" :required="isHaveTo">

vue 项目的 env 文件使用为了让开发者头疼的开发环境问题…文件(在项目根目录新建).env 无论开发环境还是生成环境都会加载.env.development 开发环境加载这个文件.env.production 生成环境加载这个文件注意env 文件需要声明运行的环境.env.developmentNODE_ENV = development.env.productionNODE_ENV = production定义变量需要以 VUE_APP_ 作为前缀.env.develo

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)$/;最多保留两位小数,

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。1.笨拙式引用：准备工作先注册，再登录、找到图标管理、我的项目点紫色的这个创建自己的项目图中画红线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。 如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图

computed和watch的区别computed计算结果并返回，只有当被计算的属性发生改变时才会触发（即：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新及孙）watch监听某一个值，当被监听的值发生变化时，执行相关操作。（与computed的区别是，watch更加适用于监听某一个值得变化，并做对应操作，比如请求后太接口等。而computed适用于计算已有的值并返回结果。）监听简单数据类型：data(){ return{ 'first':2 }

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

export和export default的区别？使用上的不同export default xxximport xxx from './'export xxximport {xxx} from './'

在JS数组特定索引处指定位置插入元素的技巧需求: 将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间来研究它。// 原来的数组var array = ["one", "two", "four"];// splice(position, numberOfItemsToRemove, item)// 拼接函数(索引位置, 要删除元素的数量, 元素)array.splice(2, 0, "three"); // array; // 现在数组是这个样子 ["one", "two"

小程序上下切换位置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"> 上 &

Vue-Quill-Editor主流富文本编辑器对比前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。1.wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。2.UEditor（百度）优势：插件多，基本曼度各种需求，由百度web前端研发部开发。缺点：插件提交较大，网页

keep-alive实现原理本文介绍的内容包括：keep-alive用法：动态组件&vue-routerkeep-alive源码解析keep-alive组件及其包裹组件的钩子keep-alive组件及其包裹组件的渲染二、keep-alive介绍与应用2.1 keep-alive是什么keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。一个场景用户在某个列表页面

JS 时间转化为几分钟前 几小时前 几天前dateTimeStamp为传入的时间const timeago = (dateTimeStamp) => { var nowTime = dateTimeStamp; //转换为时间戳 var thisTime = nowTime; thisTime = thisTime.replace(/-/g, '/'); var time = new Date(thisTime); time = time.getTime(); var

vue设置页面标题title每个页面设置相同标题index.html直接修改title标签里面的标题(ps: 这个html文件中也可以引入一些js文件)每个页面设置不同标题router - index.jsconst router = new Router({ mode: 'history', routes: [ { path: '/index', name: 'index', compon

使用vue-cookies操作cookie1.前言在vue中如果想要操作cookie，除了使用之前我们自己封装好的操作cookie的方法之外，我们还可以使用vue-cookies插件，这是一个简单的Vue.js插件，专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在，对vuejs友好。本篇博文就来介绍如何使用vue-cookies插件。2.安装vue-cookiesnpm install vue-cookies --save3.引入vue-cook

vue组件页面高度根据屏幕大小自适应网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)我们将document.body.clientWidth赋值给data中自定义的变量： data:{ screenHeight: document.body

vue监听Esc事件**需求：监听Esc事件退出全屏，使用 document.addEventListener **在mounted中定义如下代码：mounted() { //监听键盘按键事件 let self = this; this.$nextTick(function () { document.addEventListener('keyup', function (e) { //此处填写你的业务逻辑即可 if (e.keyCode == 27) { self.cl

如何在 Vue 项目中使用 echarts数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts 图表库，为什么选择 echarts，第一：简单上手容易，第二：它几乎可以满足我们所有的开发需要，第三：echarts 应该是国内做的最好的可视化库之一了。第一种方法，直接引入echarts安装echarts项目依赖npm install echarts --save//或者npm install echarts -S

vue中使用高德地图自定义开发用一个在地图上挖宝的小例子，来总结下自己使用高德地图的心得。起步-加载高德地图// 进入cd utils// 创建AMap.js文件vim AMap.jsAMap.jsexport default function MapLoader() { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap); } else

vue项目中导出表格后台提供数据，前台进行转换为指定的excel文件；使用插件：export2table;基于elementui组件库第一步，下载相关依赖npm install -S file-saver xlsxnpm install -D script-loader第二步，创建放置插件的文件夹创建vendor文件夹；创建Blob.js和Export2Excel.js文件；（相关文件内容在文后附）注意：在E2E.js的文件开头的引入，引入Blob.js时要写正确的路径地址。我

简单的vue上传图片<template> <img :src="f.src" v-if="f" /> <img src="../../assets/zz.jpg" @click="add" v-else/> <input class="value" style="display:none" type="file" ref="file" accept="image/*" multiple="multiple" @change="getFile

1.什么是深拷贝和浅拷贝以及他们的区别1.浅拷贝：就是拷贝A对象里的数据，但是不拷贝A对象里面的子对象。2.深拷贝：会克隆出一个对象，数据相同，但是引用地址不同，（就是拷贝A对象里面的数据，而且拷贝A里面的子对象）...

VUE 数据双向绑定原理前言使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到难一步一步来实现这个SelfVue。由于本文只是为了学习和分享，所以只是简单实现下原理，并...

vue js拖拽HTML<div class="kongtiaojifang" ref="kongtiao" @mousedown.stop="mouseDownHandleelse($event)" @mouseup.stop="mouseUpHandleelse($event)"> </div>data的声明data () { return { ...

vue 拖拽功能html<div id="app" @mousedown="move"> {{positionX}} {{positionY}} </div>data数据声明在这里插入代码片 data () { return { positionX: 0, positionY: 0, } },js部...