随笔分类 -  vue

el-tree树形结构实现自定义关联
摘要：由于el-tree树形结构中父子关联属性不满足需求，需要自定义一个关联性的功能 el-tree中 check-strictly 属性能让父子节点关联，达到下面几种效果： 选中父节点，其所有子节点选中 只要选中一个以上子节点，所有父节点都选中 取消所有子节点，父节点也取消 我们需求的效果是： 选中父节 阅读全文
posted @ 2021-03-05 13:21 shetoutou 阅读(989) 评论(0) 推荐(0)
element UI 表格中暂无数据自定义
摘要：在表格中加入这段即可 <template slot="empty"> <img :src="require('@/assets/empty.png')" alt="" style="height:80px;margin-bottom:-60px"> <p>暂无数据</p> </template> 阅读全文
posted @ 2021-02-19 19:06 shetoutou 阅读(583) 评论(0) 推荐(0)
vue登录流程
摘要：vue后台项目的一套基本的登录流程： 前端调后端的登录接口，每次登录成功后，后端会返回一个token字段，前端将这个token保存，之后发送请求的时候，请求头带上这个token，后端收到请求后，会匹配token，匹配成功，则发送接口，匹配失败，则不会允许请求接口，vue项目中，可以在axios中封装 阅读全文
posted @ 2021-01-19 17:35 shetoutou 阅读(1418) 评论(0) 推荐(0)
vue 中表单置空简单操作
摘要：在vue单文件组件里有时需要重置data中的数据，比如表单填写一半，用户想重新填写。或者新增成功后，再次信息，打开弹框，希望之前填写的内容清空，发现一个简单写法:this.form = this.$options.data().form;(form为你要清空的表单) <script> export 阅读全文
posted @ 2021-01-15 10:50 shetoutou 阅读(2229) 评论(0) 推荐(0)
自定义指令-v-drag拖拽
摘要：如果想注册局部指令，组件中也接受一个 directives 的选项: directives: { drag: { // 指令的定义 bind: function (el, binding, vnode) { // el 代表绑定的dom对象，可以修改 // binding 是一个对象，不可修改 // 阅读全文
posted @ 2020-11-25 10:04 shetoutou 阅读(1879) 评论(0) 推荐(0)
@click.native的使用
摘要：给Vue组件绑定事件,需要在事件后面加上.native，比如：,相当于$emit("click".fn)。 有一天突然发现使用el button的时候是这样的： 是因为element ui已经在el button组件源码中给我们this.$emit('click', evt)事件了 阅读全文
posted @ 2020-03-18 18:39 shetoutou 阅读(2158) 评论(0) 推荐(0)
Element-ui 下拉列表 选项过多时如何解决卡顿问题
摘要：当使用Select选择器时，如果下拉列表有几千个几万个，因此通过滚动条一个个的去找不是很现实， 这时可以对select设置filterable属性，可以在下拉控件里进行搜索。例如: 体验的过程中还是会感觉明显的卡顿现象，问题和上面一样，还是因为下拉列表太多了，这时我们可以通过Select控件的fil 阅读全文
posted @ 2020-03-17 23:03 shetoutou 阅读(4311) 评论(0) 推荐(0)
vue组件通信（父子之间，兄弟之间）
摘要：一、父组件向子组件传值 1、在父组件中引入需要通信的子组件 2、在父组件的components中注册该子组件 3、在父组件的template中使用子组件 4、将需要传递给子组件的值通过v bind 5、在对应的子组件中，通过props属性接收传递过来的值 6、在子组件中使用该值 二、子组件向父组件传 阅读全文
posted @ 2020-03-16 15:39 shetoutou 阅读(261) 评论(0) 推荐(0)
this.$nextTick()的使用
摘要：背景 在一个vue结合elementui的项目实现点击再一次增加会员的按钮时，清空上一次输入框里的数据，采用 ，但是却报错，无法获取dom。那么此时快速的解决办法就是使用this.$nextTick()方法。 使用场景 this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中 阅读全文
posted @ 2020-03-15 20:16 shetoutou 阅读(430) 评论(0) 推荐(0)
vue中filter用法
摘要：以开发需求为案例，需求是将后端返回的字段付款方式用文字显示： 1、由于filter中定义的过滤函数不能使用this，需要全局定义一个数组 2、在vue实例中写filters：{}代码 3、最后在组件中渲染 阅读全文
posted @ 2020-03-13 23:53 shetoutou 阅读(4597) 评论(0) 推荐(0)
vue项目实现系统权限拦截
摘要：后台管理系统权限校验需求： 当访问系统非登录页面时，需要检验用户是否登录，如果没有登录，则跳转到登录页面。 首先，新建一个权限文件permission.js，直接在main.js中引入 接下来开始编写permission.js 1:将router.js引入 2：使用vue router中的前置导航钩 阅读全文
posted @ 2020-03-13 15:53 shetoutou 阅读(1598) 评论(0) 推荐(0)
vue项目中封装axios
摘要：首先，安装axios 然后，单独写个文件配置axios 然后配置请求时的方法 最后，页面中使用的时候直接 引入方法 就可以在对应页面获取到后台数据了。 阅读全文
posted @ 2020-03-12 18:11 shetoutou 阅读(150) 评论(0) 推荐(0)
Vue packages version mismatch解决方案
摘要：在工作台创建一个vue/cli3的项目，vue create 项目名称，报错信息如下： 于是百度了两种常见的解决方案： 方法一： npm uninstall vue template compiler //卸载掉已经安装的版本 npm i vue template compiler@当前版本号 sa 阅读全文
posted @ 2020-03-10 00:14 shetoutou 阅读(1166) 评论(0) 推荐(0)
第三方组件默认样式如何修改
摘要：当在vue文件下写样式时，为了避免与其他组件样式污染，在style标签上加一个scoped属性，但这时，如果想要修改第三方插件的样式，则会没有效果。 推荐采用以下方案：vue样式穿透 sass/less使用样式穿透的方式 stylus的样式穿透 使用 或者将scoped属性去掉，但存在弊端：失去了样 阅读全文
posted @ 2019-08-12 16:45 shetoutou 阅读(1064) 评论(0) 推荐(0)