小破孩的博客

【代码】Vxe-table与Element UI结合进行表格编辑操作。

Vant框架 List滑动加载使用

页面效果图：实现具体功能：按下PDA设备的扫描键，扫描成功后将扫描到的编码值自动填充到输入框内，点击确定按钮将编码通过接口传递到后端代码如下：<template> <div> <input class="input" ref="searchInput" v-model="codeValue" placeholder="请输入条形码"/> <div class="btn"> <button @click

1、使用以下命令安装实现扫描二维码的插件npm install --save vue-qecode-reader或者 cnpm install --save vue-qrcode-reader插件官网：Simple | Vue Qrcode Reader代码如下：<template> <!-- <p class="error">{{ error }}</p> --> <!--错误信息--> &lt

场景在开发过程中，通常会遇到这样的问题：在开发环境、测试环境和生产环境中我们会用到不一样的服务接口在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口多端一体的项目模式这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。第一步 安装依赖 cross-env使用 cross-env 解决跨平台问题。在终端运行：npm

效果图：数据结构：getData: [ { banzu: '二班',banci: '夜班', time: '2021-11-23',mokuaiTime:'80', children:[ {orderNum: 'JSTMO2104130005', num: '5',shebeiCode: 'E211218M',mokuaiCode: .

效果图：使用npm命令安装插件，如下：npm install --save vue-lunar-full-calendar在需要的页面引入插件，如下：import { LunarFullCalendar } from 'vue-lunar-full-calendar';import tippy from "tippy.js"; //引入 tippy.jsimport 'tippy.js/dist/tippy.css';//引入 tippy.jsimport 'tippy.

在Fullcalendar日历上鼠标悬浮在日程上出现气泡提示效果直接在package.js中加上tippyjs的信息，然后 npm install。 tippyjs 就已经安装上了也可以通过以下命令安装：npm i tippy.js在需要的vue文件中进行引用如下：import tippy from "tippy.js"; //引入 tippy.jsimport 'tippy.js/dist/tippy.css';//引入 tippy.jsimport 'tippy.js/

父组件中：<v-footer ref='footer'></v-footer> // 子组件父组件方法中调用子组件函数方法：emitChild2(){ this.$refs.footer.childAction('你好吗!'); //打印： 你好吗 this.$refs.footer.childAction(); //打印：hello world},子组件中被调用的函数方法：methods:{ childAction

1、Vue+bpmn.js实现工作流程图初体验：详情参考：https://dulily.gitee.io/posts/4b998e91-684c-11eb-bd66-4fb1c1101a24/（文章来自 Yrainly's Blog！）2、使用vue+bpmn-js实现activiti的流程设计器由于后端使用的是activiti工作流，所以前端需要进行一些相应的配置详情参考：https://www.vue-js.com/topic/5f6c4af84590fe0031e591ef（文

根据官网总结：<el-select v-model="form.formVal" clearable filterable remote @change="changeVal($event)" :remote-method="getFormList" placeholder="请选择表单"> <el-option v-for="item in formList" :key="item.id" :label="item.formName" ..

背景：最近做一个项目打包后需要部署在非根目录的文件夹内进行访问，对于这一问题一开始很是头疼，最后查找和询问同事之后得到如下方法：1、先解决如何配置非根目录访问的方式，如下：假设打包后的dist文件内容需要部署到非根目录http.xxx.com/test子路径下，解决步骤如下：修改vue.config.js中的publicPathmodule.exports = { publicPath: "/test/", //打包后部署在一个子路径上http:xxx/test/ produ

1、安装axios 和 mock.js，方法如下：npm install axios --save-dev // 安装axios用于接口请求npm install mockjs --save-dev // 安装mock.js用于数据模拟2、在vue项目的src文件夹下简历一个mock的文件夹，在里边存放模拟数据的js文件3、然后需要在mock文件夹中 新建一个 mock.js（具体的创建数据的方法可以去看官网）mock官网地址：http://mockjs.com/在mock.

效果图：官方文档地址：https://fullcalendar.io/docs/vue1、安装与FullCalendar相关的依赖项npm install --save @fullcalendar/vue @fullcalendar/daygrid2、在模板中添加标签<full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar&g

HTML部分：<div v-show="topShow" @click="goTop">返回顶部</div>JS部分：data(){ return{ topShow: false, // 返回顶部文字是否显示 }},事件监听：监听滚动的高度mounted () { window.addEventListener('scroll', this.handleScroll);},事件方法：methods:{ // 监控页面滚

1、先在methods中定义一个方法如下：preText (pretext) { return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')},2、提交的时候将绑定的值content传递给preText这个方法进行处理，再赋值给remarks提交给后台保存到数据库this.remarks = this.preText(this.co

昨天在做项目时，有一个功能是使用Element UI的Selec多选下拉框，在使用时，发现每次选择的数据已经发生变化，但是页面上的显示却没有变化，由于是第一次碰到这个问题，一开始无从下手，后来百度寻找了方法，其实也很简单，就是调用一个方法而已。问题：上图就是已经选择了两个值，控制台也输出了两个角色的ID，但是select框内显示却没有变化，依然是显示一个。。。在网上寻找方法，说是：render函数没有自动更新，所以在选择的时候需要强制更新解决办法：<el-select v-m

问题描述在用ElementUI做动态表单时，数据的修改都是打开dialog（子组件）中进行操作的，但是在修改数据时，正常来说可以直接调用 this.$refs[str].resetFields() 直接清空，但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是编辑,那么重置之后以第一次更新的数据作为标准，即表单的数据为编辑时的数据;解决方式点击编辑的时候使用nextTick 处理一下form的数据_.cloneDeep(value)：数据深拷贝.

近期在vue项目中，使用了a标签锚点定位对应内容的时候发现路由也发生了变化，此时如果去刷新页面则会出现找不到页面的情况。如果直接使用下面的方法进行锚链接，会导致路由变成xxx，这样显然不是我们需要的<a href="#xxx"></a><div id="xxx"></div>我们可以采用下面方法进行解决：<a @click.prevent="anchor('comment')">点击我跳转至comment</a>

<el-upload class="avatar-uploader" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :action="actionUrl" :headers="{ 'Authorization': token }" :auto-upload=".

由于项目中的视频较大所以使用了video.js，安装方法如下：npm install video.js使用方法在main.js中配置如下：import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video页面使用如下：<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-cen.

在项目中新建 vue.config.js 文件(vue cli 3 配置文件)，设置publicPath然后设置publicPathmodule.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', lintOnSave: false, productionSourceMap: false, css: { sourceMap: true }.

使用插件 vue-wechat-title 来实现（我是刚升级的vue3.x，在安装插件的时候遇到了各种问题，后来发现可能是因为的我node版本太低了，然后就去升级了一下，就好了）Node版本要求：Vue CLI 需要Node.js8.9 或更高版本 (推荐 8.11.0+)。1、安装插件npm vue-wechat-title --save2、在main.js中引用...

$emit传递一个参数时子组件：this.$emit('closeChange',false);父组件：<div @closeChange="closeCom($event)"></div>closeCom(msg) { this.msg = msg;}$emit传递多个参数时子组件：this.$emit('close...

判断方法如下：// 添加判断方法 isMobile() { this.flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrows...

现在项目中安装 http-proxy-middleware 安装方法如下：npm install --save-dev http-proxy-middleware然后在config/index.js中配置http-proxy-middleware本地代理dev: { // Paths assetsSubDirectory: 'static', assetsPu...

POST请求变成OPTIONS及报错信息（跨域）主要解决方案：使用qs.stringify1、安装qsnpm installqs --save2、axios配置和使用在接口请求页面引入安装好的qs，如下图：引入完成之后使用qs改变传递的参数data，如下：这样就可以了，post请求的时候就不会再出现OPTIONS了...

1、在src 目录下创建request 文件夹，然后在里面新建http.js和api.js文件，http.js 用于封装 axios，api.js用来统一管理我们的接口。安装 npm i axios --save在http.js 引入axios import axios from 'axios'设置环境和请求环境 ...

先在methods下写一个filter过滤的方法unique(arr) { // 根据唯一标识orderId来对数组进行过滤 console.log(arr); const res = new Map(); //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组 过滤条件是，如果res中没有某个键，就...

先看看效果图：没有滚动的时候：鼠标向下滚动高度超过200时显示导航分类：鼠标放在商品分类上显示更多分类（鼠标移出隐藏）：接下来看详细代码步骤：首先定义导航分类及更多分类：解析：在data里边定义navTab和fenLei默认状态为false（隐藏状态）@mouseenter="onMouseOver"和@mouseleave="onMouseout"...

多参数传递的两种方法：第一种：params方法。此方法传递不会在URL路径中显示拼接参数接收方法：this.$route.params.one，one是参数名第二种：query方法。此方法传递会在URL路径中显示拼接参数接收方法：this.$route.query.one，one是参数名    ...

点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题，就是如果不是input或者button 按钮的话，则复制不成功，使用步骤如下：1、引入clipboard.js，方法如下： 第一种直接npm安装：npm install clipboard --save 第二种：&lt;script src="js/.........

iOS8.3的报错：SyntaxError: Unexpected token '('. Expected a ':' following the property name 'created'.不支持以下这种写法，this.XXXX()这种也报错，解决办法：在括号（）前边加上function...

请求参数,中加上对象：{"emulateJSON":true}即可解决if (this.content != '') { let _pinglurl = 'http://192.168.0.181:85/Api/Video/sendMessage'; this.$http.post(_pinglurl,{video_id:this.videoId,message:this.cont...

方法一路径：http://localhost:8080/#/index/1&lt;router-link :to="'/index/'+id"&gt;跳转&lt;/router-link&gt;(id是参数)路由：{ path: 'team/index/:id', name: 'index, component: teamIndex,},参数使用：this.$route.params...

方法1：使用paragram.js插件第一步：在页面引入paragram.js插件，（插件分享链接：https://pan.baidu.com/s/1jJd4zS6X5KYPusFdDUQ7zg 密码：ru64）第二步：在methods里面写接收参数的方法，如下：解析：1、var contents 和 var times 。是指：接收参数的变量，就是将接收的参数赋值给这两个变量。2、content...

1、创建一个基于 webpack 模板的新项目$ vue init webpack myvue12、在当前目录下，安装依赖$ cd myvue$ npm install123、安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev nod

问题：vue.js (vue.js)vue 列表渲染 中限制条数描述:怎么限制只渲染2条数据呢？&lt;ul&gt; &lt;li v-for="i in list" v-text="i"&gt;&lt;/li&gt;&lt;/ul&gt;list: ['a','b','c','d']解决方案1:&lt;ul&gt;&lt;li v-for="i in li

1、使用v-model在select标签上进行数据双向绑定，2、在data里边添加val：‘ ’，3、最后就是监听事件的写法，写在methods之外。附加：（以下图片借鉴他人，非原创）

1、在data数组里边添加id（说明：我的是虚拟数据）2、在点击事件上传入id参数，如下：3、在methods里边添加点击跳转的方法，不要忘记在function后边的括号内传入id，然后判断如果id==1，就跳转那个页面，id==2跳转那个页面。至此跳转完成。 附加：点击返回上一页方法：window.history.go(-1);就是返回上一页。（不要忘记在...