随笔分类 - VUE
摘要：
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了，相信使用它的我们都心知肚明。
今天，本篇文章就针对element-ui的一个组件——select选择器进行一些改进，以达到我们实际的项目开发中想要实现的一个效果，或者说完善该组件的一些功能。当然了，还是在select选择器的基础上改进，不会对它的源代码做任何修改。
阅读全文
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了，相信使用它的我们都心知肚明。
今天，本篇文章就针对element-ui的一个组件——select选择器进行一些改进，以达到我们实际的项目开发中想要实现的一个效果，或者说完善该组件的一些功能。当然了，还是在select选择器的基础上改进，不会对它的源代码做任何修改。
阅读全文
摘要：
一开始看到这个功能需求，我也很懵逼，因为从来没有做过啊，哈哈。。。但转念一想既然产品能提出这个需求，想必会有人实现过，就去网上查了查资料，果不其然，还真有人做过，但离我想要的效果还是差着十万八千里，所以按照网上大神的思路，结合我司的实际需求，自己就把它给捣鼓出来了。
其实刚做好的效果还是能实现产品的需求的，我就让同事帮忙测试一下看看有没有什么bug，因为我司对bug的要求以及对用户体验的要求还是很严格的，所以在同事的实际测试以及提醒下，后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进，算是不给测试提bug的机会吧。
阅读全文
一开始看到这个功能需求，我也很懵逼，因为从来没有做过啊，哈哈。。。但转念一想既然产品能提出这个需求，想必会有人实现过，就去网上查了查资料，果不其然，还真有人做过，但离我想要的效果还是差着十万八千里，所以按照网上大神的思路，结合我司的实际需求，自己就把它给捣鼓出来了。
其实刚做好的效果还是能实现产品的需求的，我就让同事帮忙测试一下看看有没有什么bug，因为我司对bug的要求以及对用户体验的要求还是很严格的，所以在同事的实际测试以及提醒下，后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进，算是不给测试提bug的机会吧。
阅读全文
摘要：
我们前端开发人员在使用表格的过程中，大概率碰到的都是表格头部在表格的最上边，然后呈一行展示，紧接着就是表格的每一行的每一个单元格来展示具体内容的场景，很少会遇到表格的头部呈纵向一行展示，也就是说表格的头部在左边，具体的内容在右边（也可以说是左右结构）这种使用场景，而且有时候的场景可能会是纵向表头有两
阅读全文
我们前端开发人员在使用表格的过程中，大概率碰到的都是表格头部在表格的最上边，然后呈一行展示，紧接着就是表格的每一行的每一个单元格来展示具体内容的场景，很少会遇到表格的头部呈纵向一行展示，也就是说表格的头部在左边，具体的内容在右边（也可以说是左右结构）这种使用场景，而且有时候的场景可能会是纵向表头有两
阅读全文
摘要：
前一段时间，有博友在我那篇「封装Vue Element的table表格组件」的博文下边留言说有没有那种“表格行内编辑”的封装组件，我当时说我没有封装过这样的组件，因为一直以来在实际开发中也没有遇到过这样的需求，但我当时给他提供了一个思路。 时间过去了这么久，公司的各种需求也不停地往外冒，什么地图图表
阅读全文
前一段时间，有博友在我那篇「封装Vue Element的table表格组件」的博文下边留言说有没有那种“表格行内编辑”的封装组件，我当时说我没有封装过这样的组件，因为一直以来在实际开发中也没有遇到过这样的需求，但我当时给他提供了一个思路。 时间过去了这么久，公司的各种需求也不停地往外冒，什么地图图表
阅读全文
摘要：
并不是所有封装组件的方式都是一成不变的，你可以采用函数式组件这种能提高性能的方式，也可以使用带有状态和生命周期的普通组件的封装方式。但像dialog这种包含很多点击事件如确定或提交事件、取消或重置事件、右上角那个小叉叉的关闭事件等，又有可能包含嵌套其他组件如表格组件、表单组件、树形组件、穿梭框组件等的公共组件，其成分略微复杂，功能不太单一，你若要采用函数式组件的方式来封装也不是不可以，只是可能xue微要麻烦一些，我自己建议是不采用这种封装方式，就采用普通的封装方式就好。
阅读全文
并不是所有封装组件的方式都是一成不变的，你可以采用函数式组件这种能提高性能的方式，也可以使用带有状态和生命周期的普通组件的封装方式。但像dialog这种包含很多点击事件如确定或提交事件、取消或重置事件、右上角那个小叉叉的关闭事件等，又有可能包含嵌套其他组件如表格组件、表单组件、树形组件、穿梭框组件等的公共组件，其成分略微复杂，功能不太单一，你若要采用函数式组件的方式来封装也不是不可以，只是可能xue微要麻烦一些，我自己建议是不采用这种封装方式，就采用普通的封装方式就好。
阅读全文
摘要：
一直都很忙，写分享基本都是在中午午休时赶出来的，然后趁着在工作中颈椎疼的难以忍受时稍微休息一下的过程中排版发出来的。不过我也发现一个现象，就是我分享的有关封装的react方面的组件的关注度没有封装的vue方面的组件的关注度来得高，有可能是百度对我分享的vue方面的组件做了收录，所以大家也能在百度上搜索到，而我分享的react方面的组件却基本没有被百度收录的原因，或许也有可能是用vue的人多过用react的人，但我无意去对比两者，大家开心就好。
阅读全文
一直都很忙，写分享基本都是在中午午休时赶出来的，然后趁着在工作中颈椎疼的难以忍受时稍微休息一下的过程中排版发出来的。不过我也发现一个现象，就是我分享的有关封装的react方面的组件的关注度没有封装的vue方面的组件的关注度来得高，有可能是百度对我分享的vue方面的组件做了收录，所以大家也能在百度上搜索到，而我分享的react方面的组件却基本没有被百度收录的原因，或许也有可能是用vue的人多过用react的人，但我无意去对比两者，大家开心就好。
阅读全文
摘要：
前两天封装了一个基于vue和Element的table表格组件，阅读的人还是很多的，看来大家都是很认同组件化、高复用这种开发模式的，毕竟开发效率高，代码优雅，逼格高嘛。虽然这两天我的心情很糟糕，就像“懂王”怼记者：“你是一个糟糕的记者；CNN，Fake news”一样的心情，但我还是忍着难受的心情来工作和分享，毕竟工作是饭碗，分享也能化解我糟糕透顶的心情。
阅读全文
前两天封装了一个基于vue和Element的table表格组件，阅读的人还是很多的，看来大家都是很认同组件化、高复用这种开发模式的，毕竟开发效率高，代码优雅，逼格高嘛。虽然这两天我的心情很糟糕，就像“懂王”怼记者：“你是一个糟糕的记者；CNN，Fake news”一样的心情，但我还是忍着难受的心情来工作和分享，毕竟工作是饭碗，分享也能化解我糟糕透顶的心情。
阅读全文
摘要：
> 写在2025年08月23日： > 其实想了很久，不知道有些事情该如何开口，那就暂且想到哪儿说到哪儿吧，咱们也哪儿说哪儿了。 一直以来，我都是很推崇封装组件的，不仅仅是因为确实能大大提高开发效率，而且也能提升性能（包含构建编译打包效率），也因为使用了封装的组件后，页面会非常美观简洁，找东西的时候也
阅读全文
> 写在2025年08月23日： > 其实想了很久，不知道有些事情该如何开口，那就暂且想到哪儿说到哪儿吧，咱们也哪儿说哪儿了。 一直以来，我都是很推崇封装组件的，不仅仅是因为确实能大大提高开发效率，而且也能提升性能（包含构建编译打包效率），也因为使用了封装的组件后，页面会非常美观简洁，找东西的时候也
阅读全文
摘要：
Element自身是有一个Transfer穿梭框组件的，这个组件是穿梭框结合checkbox复选框来实现的，功能比较单一，自己想实现这个功能也是很简单的，只是在项目开发中，项目排期紧，没有闲功夫来实现罢了，但这个组件只适合用来实现较为简单的左后数据添加删除的效果，复杂的一点的树结构穿梭框就复杂很多了，当然也有造好的轮子等你使用，这里推荐一个比较好用的穿梭树组件el-tree-transfer。
阅读全文
Element自身是有一个Transfer穿梭框组件的，这个组件是穿梭框结合checkbox复选框来实现的，功能比较单一，自己想实现这个功能也是很简单的，只是在项目开发中，项目排期紧，没有闲功夫来实现罢了，但这个组件只适合用来实现较为简单的左后数据添加删除的效果，复杂的一点的树结构穿梭框就复杂很多了，当然也有造好的轮子等你使用，这里推荐一个比较好用的穿梭树组件el-tree-transfer。
阅读全文
摘要：
我们在开发过程中所遇到的所有的奇奇怪怪的交互美其名曰用(奇)户(葩)体(需)验(求)，而产品所谓的良好的交互效果，在我等开发人员眼里不值一提、不屑一顾、讨厌至极！来，把标题中所提到的这个效果给实现一下吧。原理其实很简单，先得有一个选择年月的输入框吧，这里我用的是Element的DatePicker日期选择器组件，具体使用方法不多说，自己去看Element的API吧。
阅读全文
我们在开发过程中所遇到的所有的奇奇怪怪的交互美其名曰用(奇)户(葩)体(需)验(求)，而产品所谓的良好的交互效果，在我等开发人员眼里不值一提、不屑一顾、讨厌至极！来，把标题中所提到的这个效果给实现一下吧。原理其实很简单，先得有一个选择年月的输入框吧，这里我用的是Element的DatePicker日期选择器组件，具体使用方法不多说，自己去看Element的API吧。
阅读全文
摘要：
Element对话框组件Dialog在我们的实际项目开发中可以说是一个使用频率较高的组件，它能为我们展示提示的功能，如：业务模块提交前展示我们曾经输入或选择过的业务信息，或者展示列表信息中某项业务的具体列表数据；也能为我们展示一些表单操作的需求，如：个人信息的添加或编辑等。Dialog组件使用起来也很方便，稍微封装一下就是一个公共的对话框组件，显示或隐藏也可以通过它的visible属性来设置即可。
阅读全文
Element对话框组件Dialog在我们的实际项目开发中可以说是一个使用频率较高的组件，它能为我们展示提示的功能，如：业务模块提交前展示我们曾经输入或选择过的业务信息，或者展示列表信息中某项业务的具体列表数据；也能为我们展示一些表单操作的需求，如：个人信息的添加或编辑等。Dialog组件使用起来也很方便，稍微封装一下就是一个公共的对话框组件，显示或隐藏也可以通过它的visible属性来设置即可。
阅读全文
摘要：项目开发中，各种需求都会遇到，有些需求很合理，也好实现，有些需求不能说不合理，就是太麻烦，就比如类似标题所描述这种的需求，你不能说它是不合理的需求，因为很多论坛或微博、朋友圈、QQ空间之类的这种效果还是很常见的，能让我们一眼就看到这些信息是什么时候发的，而且这些时间基本都是实时自动更新的，给人的感觉很友好。
阅读全文
项目开发中，各种需求都会遇到，有些需求很合理，也好实现，有些需求不能说不合理，就是太麻烦，就比如类似标题所描述这种的需求，你不能说它是不合理的需求，因为很多论坛或微博、朋友圈、QQ空间之类的这种效果还是很常见的，能让我们一眼就看到这些信息是什么时候发的，而且这些时间基本都是实时自动更新的，给人的感觉很友好。
阅读全文
摘要：昨天，写了一篇关于圆环进度条的博客，已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts来实现了。
阅读全文
昨天，写了一篇关于圆环进度条的博客，已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts来实现了。
阅读全文
摘要：数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦（繁不胜繁）！
前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果，今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道，天天跟接口打交道，项目做了不少，菜逼还是菜逼，都是泪啊！
阅读全文
数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦（繁不胜繁）！
前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果，今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道，天天跟接口打交道，项目做了不少，菜逼还是菜逼，都是泪啊！
阅读全文
摘要：公司的管理系统中有“文字间歇无缝向上滚动”的需求，现在这种需求基本在项目开发中已经消失了，没什么新颖的，但架不住公司高层喜欢这种玩意儿，所以，作为开发人员，即使你有一百个不乐意，谁让是人家给你发工资呢！！！其实，这种用在vue项目中的需求跟原生js的实现方法基本一致，且实现的方法有多种，今天就单拎出来一种实现方法吧
阅读全文
公司的管理系统中有“文字间歇无缝向上滚动”的需求，现在这种需求基本在项目开发中已经消失了，没什么新颖的，但架不住公司高层喜欢这种玩意儿，所以，作为开发人员，即使你有一百个不乐意，谁让是人家给你发工资呢！！！其实，这种用在vue项目中的需求跟原生js的实现方法基本一致，且实现的方法有多种，今天就单拎出来一种实现方法吧
阅读全文
摘要：
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用vue的时候，使用的是vue-cli来搭建vue项目，快速又好用；我刚开始用react的时候，使用的是create-react-app来搭建react项目，方便又省事。使用这些已有的脚手架来搭建项目，无可厚非，对于新手来说，也确实能快速构建，不做置评。
阅读全文
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用vue的时候，使用的是vue-cli来搭建vue项目，快速又好用；我刚开始用react的时候，使用的是create-react-app来搭建react项目，方便又省事。使用这些已有的脚手架来搭建项目，无可厚非，对于新手来说，也确实能快速构建，不做置评。
阅读全文
摘要：
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能，使用起来也蛮不错的。但是今天，一个前端同行在群里问我“如果当前页面是根据传进来的参数的不同而显示不同的组件，而且当前页面中可能会import进来几十个子组件，而我又不想挨个去import这些组件，同时这些组件又是按需加载的，该咋实现？” 说实话，一开始我也懵了。
阅读全文
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能，使用起来也蛮不错的。但是今天，一个前端同行在群里问我“如果当前页面是根据传进来的参数的不同而显示不同的组件，而且当前页面中可能会import进来几十个子组件，而我又不想挨个去import这些组件，同时这些组件又是按需加载的，该咋实现？” 说实话，一开始我也懵了。
阅读全文
摘要：
要求：
1、选中父节点，子节点及孙子节点（甭管有多少层级，兹要是子辈节点）可以不选中，取消选中父节点，子节点及孙子节点也还是没有任何变化；
2、选中子节点或孙子节点，必须选中父节点及祖父节点（甭管有多少层级，兹要是祖辈节点），取消选中子节点或孙子节点，父节点及祖父节点可以不取消选中；
3、基于需求2，此时子节点及孙子节点和父节点、祖父节点都已选中，那么若取消选中父节点，则子节点及孙子节点必须取消选中，但父节点的父节点可以不取消选中，若取消选中祖父节点，则其下边的所有节点都要取消选中。
阅读全文
要求：
1、选中父节点，子节点及孙子节点（甭管有多少层级，兹要是子辈节点）可以不选中，取消选中父节点，子节点及孙子节点也还是没有任何变化；
2、选中子节点或孙子节点，必须选中父节点及祖父节点（甭管有多少层级，兹要是祖辈节点），取消选中子节点或孙子节点，父节点及祖父节点可以不取消选中；
3、基于需求2，此时子节点及孙子节点和父节点、祖父节点都已选中，那么若取消选中父节点，则子节点及孙子节点必须取消选中，但父节点的父节点可以不取消选中，若取消选中祖父节点，则其下边的所有节点都要取消选中。
阅读全文
摘要：
公司在后台管理系统开发中用到了`vue+element-ui`组合的框架，但随着需求的越来越复杂，前端的工作难度也呈几何倍数递增，工作量随之增大。这不，在项目中增加一个将列表数据导出为excel的需求就紧跟着来了。
不光将数据导出，还得支持单笔导出或多笔批量导出。
为了生活，我们已经殚精竭虑；为了工作，我们已经竭尽全力！
有需求，哭着也得实现啊。
阅读全文
公司在后台管理系统开发中用到了`vue+element-ui`组合的框架，但随着需求的越来越复杂，前端的工作难度也呈几何倍数递增，工作量随之增大。这不，在项目中增加一个将列表数据导出为excel的需求就紧跟着来了。
不光将数据导出，还得支持单笔导出或多笔批量导出。
为了生活，我们已经殚精竭虑；为了工作，我们已经竭尽全力！
有需求，哭着也得实现啊。
阅读全文
摘要：
最近在开发公司的一个后端管理系统，用的是比较流行的vue框架。在开发过程中，总是出现各种各样的报错问题，有警告的，有接口不通的，有自己马虎造成的低级错误的等等，这些错误在一些老司机面前分分钟解决，但今天遇到的问题，让老铁犯了难，头大。代码从头到尾看了一遍，没问题啊，把报错的代码定位的具体的地方，还是没有问题啊。把自己的问题放在百度上查，居然也有小伙伴遇到同样的问题，不过有同学解决了，有同学没有解决。
阅读全文
最近在开发公司的一个后端管理系统，用的是比较流行的vue框架。在开发过程中，总是出现各种各样的报错问题，有警告的，有接口不通的，有自己马虎造成的低级错误的等等，这些错误在一些老司机面前分分钟解决，但今天遇到的问题，让老铁犯了难，头大。代码从头到尾看了一遍，没问题啊，把报错的代码定位的具体的地方，还是没有问题啊。把自己的问题放在百度上查，居然也有小伙伴遇到同样的问题，不过有同学解决了，有同学没有解决。
阅读全文
浙公网安备 33010602011771号