前言在我们的平时的工作中，在前后端交互的时候，为了提高页面的观赏性和用户的体验，我们会在页面上添加loading来阻止用户操作来等待接口的返回，这个时候我们会考虑到全局loading还是局部loading。需要用到的第三方插件$npmielement-ui-S$npmilodash-S$npmiaxios-S首先我们需要引入element-ui的Loading组件，这个组件有两种调用方式：1、通过指v-loading2、通过服务Loading.service();我们一般是在请求和响应拦截器中添加loading效果，完整代码如下：首先基于element-ui进行loading二次封装组件imp
浅谈Vue.jsVue.jsVue.js诞生Vue.js三大核心MVVMMVVVM模型vue实现的MVVM模型组件化组件组件与数据虚拟DOM事件事件监听原生JS与Vue.js实例实现效果代码对比事件过程Vue.js优点其他注意点Element-UIGUI工具Vue.jsVue.js是一套用于构建用户界面的渐进式框架。渐进式是指，它既可以作为一个库使用，又可以作为一个框架使用，两个之间自如选择。库是不具有侵略性，在原有项目可以引入作为第三方依赖使用；框架是具有侵入性的，整个项目是用vue构建的。Vue.js诞生前端技术栈的发展主要经历了三大阶段：第一阶段，基础静态页面阶段。用的是HTML、CSS
vue+elementui表格添加多个搜索条件筛选（前端查询）当数据量小的时候，可以在前端完成搜索查询的功能，核心代码如下：点击查询按钮调用下面的方法handleSearch(){//表单数据格式//searchForm:{field1:'11',field2:'22'}letform=this.searchForm;//表格数据源lettableList=this.tableData;//筛选后的数据constfilterList=tableList.filter((item)=>{returnObject.values(form).every((key,index)=>{returnite
一、项目安装npminitvite@latesttest二、安装router1.安装npminstallvue-router@4-S2.创建目录3.在router下新增index.jsimport{createRouter,createWebHistory}from"vue-router";importHomefrom"../views/Home.vue";constroutes=[ { path:"/", name:"Home", component:Home, }, { path:"/about", name:"About", component:()=>import(/*w
1.首先使用elementUi中的Layout24分栏进行布局，将整个form表单放入24分栏里如图所示：2.再将需要同行显示的表单放入el-row中的el-col中去3.然后再根据你的需求控制一下表单大小就ok啦 全部代码：效果图如下：
-->-->-->-->-->-->exportdefault{name:'StepsComponent',props:{currentStep:{type:Number,default:0},stepsArr:{type:Array,default:()=>[]}},data(){return{stepsData:[{title:'第1步',date:'完成时间：xxxx-xx-xxxx:xx:xx'},{title:'第2步',date:'完成时间：xxxx-xx-xxxx:xx:xx'},{title:'第3步',date:'完成时间：xxxx-xx-xxxx:xx:xx'},{tit
组件中index.jsimportElementUIfrom'element-ui'import{loadingConfig}from'./loadingConfig'//全局的一个基本参数配置varloading=nullconstloadingShow=()=>{loading=ElementUI.Loading.service(loadingConfig)}constloadingHide=()=>{loading.close()}constloadingObj={loadingShow,loadingHide}exportdefaultloadingObjloadingConfig.j
elementUI项目打包发布后图标不显示踩坑记录最近升级了Vue版本和elementUI库的版本，使用npmrundev方式启动，图标在本地运行是显示正常的但使用npmrunbuild编译打包后发布到服务器上，会发现图片显示不出来（Chrome浏览器下显示方块打开控制台，发现有两个字体文件请求出错（报404）也就是说实际应该通过/static/fonts/路径来获取字体图标，而实际却是请求/static/css/static/fonts/，自然报404错误。解决办法打开build/utils.js文件，在如下位置添加publicPath:‘…/…/’修改完毕后重新build发布，可以发现图标
element-ui中的cascader级联选择器，官网文档中并没有提供方法直接获取当前选择的Object，这里特别需要注意element-ui的版本问题，不同的版本需要用到不同的方法。2.7.0版本之前可以用this.$refs[‘cascader’].currentLabels获取选中节点。el-cascaderref="groupList":options="checkGroup"v-model="addForm.plot_group"@change="handleChange":filterable="true"style="width:100%"/>//获取节点label内容hand
1、安装npmielement-ui-S2、引入（两种）：两种引入方式1）完整引入//main.jsimportVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';//样式文件需要单独引入。importAppfrom'./App.vue';Vue.use(ElementUI);//注册到全局newVue({el:'#app',render:h=>h(App)});2）按需引入借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积
