随笔分类 -  Vue

摘要:记录一个报错问题,之前别的同事写的代码,还看了半天有点无语!! 下拉选择部门,联动动态赋值责任人下拉列表警告,导致选择责任人的时候无法正确赋值undefined。 究其原因是封装的表单formItem项中传入了下拉选项的映射字段,如下: 而在选择部门的时候又已经把动态数据遍历处理成了标准的label 阅读全文
posted @ 2023-05-31 10:44 土豆儿哥 阅读(1952) 评论(0) 推荐(0) 编辑
摘要:核心代码如下: <!-- 表格 --> <template> <el-table :data="testDatas" @header-contextmenu="(column, event) => rightClick(null, column, event)" @row-contextmenu=" 阅读全文
posted @ 2023-05-19 10:00 土豆儿哥 阅读(894) 评论(0) 推荐(0) 编辑
摘要:使用vue变量来控制侧边栏宽度 不受窗口大小影响 <template> <div class="page"> <div class="top">顶部导航</div> <div id="box"> <div id="left"> 主界面 </div> <div id="resize"></div> < 阅读全文
posted @ 2023-01-05 16:45 土豆儿哥 阅读(387) 评论(0) 推荐(0) 编辑
摘要:方案一 按钮权限也可以用v-if判断 但是如果页面过多,每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断 这种方式就不展开举例了 方案二 通过自定义指令进行按钮权限的判断 首先配置路由 { path: '/permission', componen 阅读全文
posted @ 2022-07-22 09:53 土豆儿哥 阅读(3453) 评论(0) 推荐(0) 编辑
摘要:全局注册主要是通过 Vue.directive 方法进行注册 Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据,也可以是一个指令函数。 表单防止重复提交这种情况可以设置一个v-throttle自定义指令来实现,具体代码如下: // 1.设置v-thro 阅读全文
posted @ 2022-07-15 17:39 土豆儿哥 阅读(1431) 评论(0) 推荐(0) 编辑
摘要:render-header: 列标题 Label 区域渲染使用的 Function 效果如下: 阅读全文
posted @ 2019-11-04 09:52 土豆儿哥 阅读(1884) 评论(0) 推荐(0) 编辑
该文被密码保护。
posted @ 2019-10-22 09:26 土豆儿哥 编辑
摘要:使用axios的两种调用方式 1.安装axios 2.在vue入口文件main.js中引入(推荐全局引入),或是在当前页面中引入(局部) 方法一: 在页面中直接调用,代码如下: 方法二: 如果我们的页面经常需要请求接口获取数据,而且逻辑代码比较多的话,不妨将axios提取出来,封装到一个api的文件 阅读全文
posted @ 2018-12-04 10:44 土豆儿哥 阅读(3362) 评论(0) 推荐(0) 编辑
摘要:今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单。 其实还是对vuetify这个框架不熟,导致我不管如何监听修改DOM就是无法重新渲染筛选后的数据。最后还是追溯其根源,终 阅读全文
posted @ 2018-11-28 09:44 土豆儿哥 阅读(2066) 评论(0) 推荐(0) 编辑
摘要:引用官网的一句话,当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合webpack的代码分割功能即可实现一个简单的懒加载 还有一种推荐的方式 阅读全文
posted @ 2018-08-20 10:42 土豆儿哥 阅读(166) 评论(0) 推荐(0) 编辑
摘要:安装 使用 npm: 使用 bower: 使用 cdn: 用法 在main.js文件中,配置axios 在 main.js 中添加了这两行代码之后,就可以直接在组件的 created 钩子中使用 $axios 命令 拦截器 在请求或响应被 then 或 catch 处理前拦截它们。 阅读全文
posted @ 2018-06-21 09:58 土豆儿哥 阅读(161) 评论(0) 推荐(0) 编辑
摘要:组件轮播联动我使用的是 el-carousel 组件,具体代码如下: 下面就可以通过轮播的change事件传递参数到父组件,判断轮播的参数变化而进行相应的过渡 父组件接收子组件传递的轮播参数,进行相应联动 阅读全文
posted @ 2018-06-06 11:29 土豆儿哥 阅读(616) 评论(0) 推荐(0) 编辑
摘要:父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据。 1.父组件parent.vue中代码: 2.在子组件 child.vue 中的 props 选项中声明它期待获得的数据 方法二 : 使用$children可以在父组件中访问子组件。 阅读全文
posted @ 2018-05-21 17:12 土豆儿哥 阅读(387) 评论(0) 推荐(0) 编辑
摘要:vue cli创建项目在 webpack.prod.conf.js文件 阅读全文
posted @ 2018-05-21 17:08 土豆儿哥 编辑
摘要:正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: 子路由JS: 因为已经在当前子路由页面,当再次点击主路由导航时,无法触发mounted钩子。通过updated这个钩子函数可以让再次找到对应子路由,从而解决再次点击主路由页面空白的bu 阅读全文
posted @ 2018-05-17 10:07 土豆儿哥 阅读(444) 评论(0) 推荐(0) 编辑
摘要:有时候后端返回的接口中也许没有我们想要的字段,可以通过下面的方式拿到想要的字段 代码如下: 阅读全文
posted @ 2018-05-11 10:19 土豆儿哥 编辑
摘要:前言 本文是vue源码贡献值Chris Fritz在公共场合的一场分享,觉得分享里面有不少东西值得借鉴,虽然有些内容我在工作中也是这么做的,还是把大神的ppt在这里翻译一下,希望给朋友带来一些帮助。 一、善用watch的immediate属性 这一点我在项目中也是这么写的。例如有请求需要再也没初始化 阅读全文
posted @ 2018-05-10 15:29 土豆儿哥 编辑

点击右上角即可分享
微信分享提示