王佑辉的博客

3.<el-form>中要写成:model，不能使用v-model。4.自定义的validate要各个路径均能返回callback()。1.<el-form>是否写了ref=“form”。2.是否有其它标签写了ref=“form”。

nvm切换node版本

【代码】【vue】vue生成二维码。

mounted() { document.addEventListener("click", this.clickFunction)},destroyed() { document.removeEventListener("click", this.clickFunction)},methods: { clickFunction(e){}}

1.效果图2.自定义loading代码<template><div> <div id="loadingDiv" v-loading="loading"></div> <el-button @click="test()">测试</el-button></div></template>import { Loading } from 'element-ui';<script>expor

.common-tree::-webkit-scrollbar { width: 4px; height: 10px;}.common-tree::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.04); border-radius: 10px;}

效果图使用代码<template> <div id="app"> <tree-select :list="list" :multiple="true" :clearable="true" :checkStrictly="true" width="120px"></tree-select> </div></template><script>import TreeSelect from '@/comp

// 组件通信，一个触发与监听的过程class EventEmitter { constructor () { // 存储事件 this.events = this.events || new Map() } // 监听事件 $on (type, fn) { if (!this.events.get(type)) { this.events.set(type, fn) } } // 触发事件.

1.效果图2.问题说明1.应用场景：通过动态选择界面上的样式属性，例如字体大小、字体、是否加粗以及颜色，从而改变界面上的展示效果2.有的表单内的样式可能无法覆盖或者没法改变3.达到变量改变后，css样式中也发生改变的效果3.代码示例<template> <div id="app"> <div class="div" :style="{'--fontColor': setting.fontColor, '--fontFamily': setting.

代码示例<template> <el-upload action="test" :headers="headers"></el-upload></template><script>var token = localStorage.getItem('token') // 要保证取到export default { data () { return { headers: {token:

示例//子组件this.$emit('方法名', 参数1, 参数2, 参数3);//父组件方法名(参数1, 参数2, 参数3){}

示例代码data () { return { timer: '' }},methods: { handleRefresh(){ //执行方法逻辑 },},//页面渲染结束加一个定时器，每2秒刷新一次mounted() { this.timer = setInterval(this.handleRefresh, 2000)},//页面关闭前清除定时器beforeDestroy() { clearInterval(this.timer)

1.示例图2.示例代码<template> <div> <el-popover placement="bottom" v-for="(item,index) in list" :key="index" width="250" trigger="manual" :ref="`popover-${item.id}`"> <div class="title"> <i class="el-icon-warning"&

handleClick() { return new Promise((resolve,reject) => { getRequest().then(res => { //操作1 resolve(); }).catch(error =>{ console.log(error) reject() }) })},test(){ Promise.all([this.handleClick()]).then(res=

1.效果示例2.依赖包下载//这里用的是"vue-clipboard2": "^0.3.1"yarn add vue-clipboard23.使用依赖import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard);4.页面示例<template> <div style="margin:0px auto;width:300px"> <el-input v-model="link"&gt

1.表格属性width: “100%”,//表格宽度calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应）height: “auto”,//表格高度maxHeight: “auto”,//表格最大高度border: true,//是否显示表格边框expand: false,//是否展开折叠行index: false,//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）indexLabel: “#”,//序号的标题st

1.问题说明1.在数组循环页面中，改变数组中某个底层的属性，对应的el-input所绑定的v-model的值改变后，el-input内容不更新2.问题解决1.可以在赋值的结尾加上this.$forceUpdate()强制更新

1.问题1.el-time-pick控件is-range用法，当v-model用的是数组时，选择时间会有问题，如图：2.代码如下

1.效果示例图2.依赖包下载//这里使用0.5.6版本npm install --save vue-cropper@^0.5.6或者yarn add vue-cropper@^0.5.63.引用//main.js中添加import VueCropper from 'vue-cropper'Vue.use(VueCropper)//或者在页面中使用import { VueCropper } from 'vue-cropper'export default { componen

1.使用array.some()//some()当内部return true时跳出整个循环：var array = [1,2,3,4,5];var num = 3;array.some(function(data){　　if(data == num) { return true;　　}　　console.log(data);});2.使用array.every()//every()当内部return false时跳出整个循环var array = [1,2,3,4,5];

1.前端<template> <el-button size="medium" @click="handleDownload()"> 下载 </el-button> </template><script>import { downloadZip} from './api'export default{ name: 'test', data() { return { } },

<!--:append-to-body="false"--><el-dropdown v-if="editEnable" > <el-button icon="el-icon-plus"></el-button> <el-dropdown-menu slot="dropdown" :append-to-body="false"> <el-dropdown-item>新增子分类</el-dropdown-

1.效果图2.前端代码<template> <div class="app-container pull-height"> <el-form inline ref="searchForm" v-model="searchForm"> <el-form-item label="菜单名称："> <el-input size="small" v-model="searchForm.name" clearable&g

1.示例图片2.代码结构3.main.js主要代码为import router from ‘./router’，并且在new Vue中加入routerimport Vue from 'vue'import App from './App'import router from './router'import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import axios from

1.问题说明1.准备在filter表头过滤时做后台查询过滤，但无法获取是哪一列2.avue-crud的filter-change事件中未封装column信息，这样在filter-change方法回调的时候，参数里只有默认的column信息，如果过滤的表头过多，无法判断是哪个列的过滤改变3.查看column.vue源码发现没有对el-table-colum加入column-key属性2.代码示例1.修改avue-crud源码中的column.vue,在el-table-column中加入属性:

1.前端代码<template> <div> <el-upload style="height: 100%" ref="upload" action="action" :limit="limitNum" :auto-upload="true" :drag="true" :accept="accept" :show-file-list="false" :lis

1.问题说明1.默认el-select的popper-append-to-body属性是true,打开的el-select的气泡会追加到body中，导致局部样式无法修改2.修改popper-append-to-body为true，气泡会追加到el-select控件上去，这样在el-select上加class属性便可以修改局部样式...

1.代码示例<template> <el-date-picker suffix-icon="el-icon-date" range-separator="-" type="daterange" placeholder="选择日期" v-model="dateBucket" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker> </temp

1.问题示例图1.点击单元格事件时，同时触发了行点击事件2.代码示例1.在单元格点击事件上加.stop，防止事件传递<template> <avue-crud ref="crud" :option="option" @row-click="rowClick" :data="data" > <template slot-scope="scope" slot="age"> <div> <el-link

1.配置修改vue.config.js，open改为falsemodule.exports = { devServer: { port: 8080, open: false }}

1.父页面<template> <div> <el-button type="primary" icon="el-icon-upload2" size="small" @click="openDialog" >导入</el-button> <uploadDialog ref="uploadDialog" :dialogVisible="dialo

【vue】avue-crud行编辑1.vue页面代码<template> <avue-crud ref="crud" :option="option" :data="data" @row-update="rowUpdate"> <template slot-scope="{row,index}" slot="menu"> <el-button type="primary" icon="el-icon-edit" size="small"

【vue】vue页面使用scss样式1.引入sass-loader模块【vue】vue页面使用scss样式//这里使用7.0.1版本npm install sass-loader@7.0.12.引入node-sass模块【vue】vue页面使用scss样式//这里使用4.12.0版本npm install node-sass@4.12.03.vue页面使用【vue】vue页面使用scss样式<style lang='scss'>//样式代码</style>

【vue】下载字符串拼接的文件链接并重命名文件字符串拼接链接代码示例：this.url = "http://127.0.0.1:8080/test/upload/20210128/2b35f9d7a64c3a6455a6e596c5c70fd7.xlsx";this.filename = "导出文件";this.html = '<button type="button" class="el-button el-button--primary el-button--small"><i

【vue】el-dialog点击外部不关闭对话框代码示例<el-dialog title="" append-to-body :close-on-click-modal = "false" :visible.sync="box" width="345px"> <span>你好</span> <span slot="foote

【vue】option配置表单校验输入框禁止只有空格option配置表单校验输入框禁止只有空格option配置表单校验输入框禁止只有空格代码示例： option: { column: [ { label: "登录账号", prop: "account", maxlength: 255, rules: [ { required: true,

【Vue】confirm确认框用法confirm确认框示例代码：this.$confirm("是否确认该操作","提示",{ iconClass: "el-icon-question",//自定义图标样式 confirmButtonText: "确认",//确认按钮文字更换 cancelButtonText: "取消",//取消按钮文字更换 showClose: true,//是否显示右上角关闭按钮