u012746918的博客

本人开发的系统中有个添加数据与编辑数据的功能。为了减少代码量，两者使用了同一个dialog，通过不同按钮点击使用对应的方案进行显示。对了方便，本人在添加数据的按钮的click事件中直接写入了resetFields。之后正常运行过一段时间，但是就在最近（添加了很多代码）开始报错：TypeError: Cannot read property 'resetFields' of unde...

element table 组件内容换行方案背景临时接手了一个element UI的前端项目，吐槽一下后台接口，这个idCardNo字段。 项目直接使用了el-table组件： <el-table :data="warnings" :row-class-name="highlightRow" v-loading="isLoading"&gt...

1、关于el-pagination 在列表中的某一页编辑单项记录，完成编辑后返回原来页，我的处理方案是在跳转到编辑页面时将当前页码传递到编辑页面，保存完毕后再传回上一页；     例如：        handleEdit() {&nb...

导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告...

1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入...

data:{ a:1, b:{ value:1，　　　type:1,}},watch:{a(val, oldVal){//普通的watch监听console.log("a: "+val, oldVal);},b:{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){console.log("b.va...

 　　 先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？　　  　　有3种方法可以实现 　　　　①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭）　　　  　　　　②：在div和span外面包裹一个div，给这个...

最近刚学Vue，使用的elementui组件库，用到了table表格组件<el-table></el-table>标签遇到个问题就是其中有个<el-table-column></el-table-column>要展示的数据来自接口返回的两个字段原用法是：&...

子组件：<template>    <div class="app">       <input @click="sendMsg" type="button" value="给父组件传递值">  &nb...

代码beforeRouteLeave: function(to, from , next){ next(false) this.$confirm('您将离开本页面，是否进行数据保存？', '提示', { distinguishCancelAndClose: true, confirmButtonText: '确定',...

Vue下载本地pdf文件html:<button @click="downloadPDf">downloadPDf</button>js: downloadPDf() { axios.post('http://localhost:8080/static/test....

给data中的对象动态新增的属性，不能够有响应式的效果，也就是说不能触发视图更新如果想要有响应式效果:1. 就需要提前，在对象中先把属性声明好 在hcc中一开始就添加好age属性，哪怕不给值2. 如果确实需要动态的给对象添加age属性，那么我们可以用到vue中提供的$set方法，这个方法，可以动态的给数...

created:html加载完成之前，执行。执行顺序：父组件-子组件mounted:html加载完成后执行。执行顺序：子组件-父组件methods：事件方法执行watch：watch是去监听一个值的变化，然后执行相对应的函数。computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值...

1.问题：vue表头添加问号，多选框，*号等等，及CSS式样。2.解决办法： <el-table-column align="left" label="字段名" :render-header="showMark" prop="fieldName" ...

　　　　这是第二次修改，在通过调用后台接口返回来的时候，发现了代码中的问题；现在将博客中错误的地方改过来，添加备注              文章需求：动态实现table表格中行/列的自动合并　　　　使用框架及UI类库：Vue+Element-ui　　　　代码地址：https://github.com/dream...

简单介绍下项目：后端管理系统，页面样式用的是 element，数据绑定用的是 vue.js。功能需求：需要添加缴药记录，这些记录要显示在一个 table 中，但是 table 末尾一行不做数据展示，只负责触发数据新增的动作。先看最终实现的效果：红框处就是自定义的表尾，选择药品处的下拉框，每当选中一个药品的时候，当前 table 就多出一行选中过的药品信息。实现过程：由于用到 ele...

1. 在 el-table组件中添加属性<el-table:cell-style="changeCellStyle"> .........</el-table> 2. 方法中: 进行相应修改changeCellStyle (row, column, rowIndex, columnIndex) { if(row.column.l...

<template> <el-table :data="tableData" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor"> <el-table-column ...

接下来，就需要对main.js App.vue 等进行操作了。　　但是这就出现了一个问题：什么是main.js，他主要干什么用的？App.vue又是干什么用的？main.js 里面的import from又在干嘛？newVue（{}）是干嘛的？里面又需要什么参数，它到底能干什么。在网上搜了一篇博文，解答一些初级的困惑。　　一、什么是main.js?里面一般都是些什么内容？　　&n...

demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div>引入...

一、说明Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，API。浏览器中创建XMLHttpRequests从node.js中创建http请求支持Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF二、安装npm安装：npm i axios；使用cdn：<...

ps: 想了解更多vue相关知识请点击VUE学习目录汇总Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。16年10月Vue发布了2.x版本，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。。。废话不多说了，把我踩过的坑，在这里跟大家说说，希望对初学者有所帮助。ps：高手请绕道...

Vue框架简介Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。是基于MVVM（Model-View-ViewModel）设计思想。提供MVVM数据双向绑定的库，专注于UI层面vue设计思想View就是DOM层，ViewModel就是通过new Vue()的实例对象，Model是原生js。开发者修改了DOM，ViewModel对...

vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。那接下来就跟我看一下如何在一个Vue实例中使用组件吧！这里有一个Vue组件的示例： Vue.component('Vheader',{ data:function(){ return {...

一、父组件中动态绑定数据到子组件父组件向子组件传递数据，首先要在父组件中使用v-bind命令将要传递的数据绑定到子组件上。比如我们要从父组件中给子组件传递两条数据，示例代码如下：<template> <div id="app"> <!-- 使用v-bind命令将父组件中的数据绑定到子组件上 --> <Child v-bind:va...

每个 Vue 实例都实现了事件接口：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派($emit)男人做事，而男人则一直监听($on)着女士的指派($emit)里eventName所触发的事件消息，一旦 $emit 事件一触发，$on 则监听到 $emit 所派...

Vue的slot-scope的场景的个人理解这篇文章不是单纯把文档的话和api拿来翻译和演示，而是谈谈我对于slot-scope的使用场景的个人理解，如果理解错误，欢迎讨论！Vue的插槽slot，分为3种匿名插槽具名插槽作用域插槽前两种很好理解，无论就是子组件里定义一个slot占位符，父组件调用时，在slot对应的位置填充模板就好了。作用域插槽的慨念，文档却只有一句简单的描述...

如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合， console.log(this.$refs.inp...

Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理基本上大同小异。子组件向父组件出传递数据，使用自定义事件的方式。父组件向子组件传递数据，使用props属性的方式。推荐文章：Vue笔记——父组件向子组件传递数据一、在子组件中自定义事件我们可以从子组件中想父组件中传递多个数据，在子组件中要做的工作只是，使用this.$emit()命令来自定义一个事件。该命令可以传递多...

对象语法 给v-bind:class 设置一个对象，可以动态地切换class，如下<div id=“app”><div :class="{‘active’:isActive}"></div></div><script>var app = new Vue({el:’#app’,data:{isActiv...

最近一周需要使用vue开发一个谷歌扩展插件，但是又不能在vue-cli脚手架中开发，所以只能单独引入vue.js整个包进行脚本植入开发。引入vue.js就代表着不能用import、require之类的引入单文件组件文件，只能在文件中开发，或者多个js文件分先后顺序植入开发，然后就出现了一个尴尬的问题就是，忘记...

 看了网上很多资料，对vue的computed讲解自己看的都不是很清晰，今天忙里抽闲，和同事们又闲聊起来，对computed这个属性才有了一个稍微比较清晰的认识，下面的文章有一部分是转自： https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com，感觉这篇文章上面的例子通俗易懂，所...

用vue 官方脚手架vue-cli构建项目容易碰到一些小错误vue init webpack project-name......cd project-namenpm install npm run dev 12345 因为vue-cli默认是8080端口,刚好自己目前项目也是在用8080,所以只好去改vue的默认端口啦找到config目录下的index.js,de...

vue 命令1.有环境下安装步骤：vue init webpack projectname（看项目需要代码严谨程度提示y/n 只有第一个选y 其他选no）cd到指定的项目文件夹里npm installnpm run dev2.无环境安装步骤#安装nodenpm install node -g (node -v、npm -v 查询版本）#淘宝镜像安装npm install ...

Vue子组件与父组件之间的通信1.环境搭建下载 vue-cli：npm install -g vue-cli 初始化项目：vue init webpack vue-demo 进入vue-demo文件夹：cd vue-demo 下载安装依赖：npm install 运行该项目：npm run dev2.父组件向子组件传值src/components/文件夹下建一个组件，Home...

Vue 中的动画需求：屏幕上有Hello World 文字，还有一个切换按钮，点击切换按钮，文字渐渐消失，再次点击按钮，文字渐渐出现。transition标签，当一个元素被该标签包裹后，vue会分析CSS样式，自动构建动画流程。 <style> .fade-enter, .fade-leave-to{ opac...

Vue实例的生命周期钩子lifecycle.png图片源于官网，侵，删Vue生命周期钩子详解见官网重写方式：<div id="app"> </div> <script> new Vue({ el:"#app", beforeCre...

1. 安装Vue源码形式https://vuejs.org/js/vue.js复制Vue代码在工程中新建vue.js文件，粘贴，使用时通过标签引用即可。HelloVue新建index.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

　　ref 有三种用法：　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点　　注意：　　1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周...

步骤：node_modules文件夹删除，没有找到node_modules”文件夹，直接在项目目录下： npm install;npm run build;npm run dev 成功后等几秒自动打开了localhost:8080另外： 很久之前安装的node是需要升级的， 项目package.json中有最低版本的要求，所以要注意！...