随笔分类 - VUE
前端vue学习记录
摘要：在为博客添加侧边栏QQ、微信好友二维码和公众号推广二维码后，浏览自己博客文章，发现当博客文章存在插入代码时，代码层会遮挡好友二维码和公众号二维码信息，因而需要通过修改css控制div的显示层级，更好的展示好友和推广二维码信息。遮挡显示情况如下图所示： css 通过设置 div 等标签的 style
阅读全文
摘要：好久没写 vue 相关的文章内容，此次文章标题问题起因是使用 npm 时，提示版本较低，建议升级，就盲从了一把，后面就是泪了，此处略过，不再细表，回归正题。 发生 install 异常时，提示信息如下所示： npm ERR! code 1 npm ERR! path U:\cnblogs\fanfe
阅读全文
摘要：npm install 详细报错信息如下： “G:\coding\dops_front\node_modules\node-sass\build\binding.sln”(默认目标) (1) -> “G:\coding\dops_front\node_modules\node-sass\build\
阅读全文
摘要：在表格显示列表中，通常添加 :show-overflow-tooltip="true" 以显示不能完全展示的单元格文案提示。单通常显示为全屏宽度，不易查看，可通过设置全局的样式，进行控制。 在 App.vue 中添加如下样式设置，即可实现。 PS：在页面的<style scope> 中设置如上样式，
阅读全文
摘要：软件质量平台中需要输出各种各样的图表数据，以 v-charts 中的饼图为例，记录图表使用实现过程。 v-charts ：https://github.com/ElemeFE/v-charts docs ：https://v-charts.js.org/#/ 本文使用完全引用的方式，以 v-char
阅读全文
摘要：前端页面开发过程中，经常遇到服务端返回的数据中，存在一些需要转义的表单项。比如，员工信息中的学历，假设研究生学历的代码是101（或10001），则数据库中对应字段存放的是 101（或10001），而非 “研究生”。示例，学历的配置项如下所示： 通过上述的代码，在表单展示的时候，即可实现学历显示的转义
阅读全文
摘要：在前端页面表单列表修改时，经常需要在页面切换的时候，传递需要修改的表单内容，除了通过路由进行表单参数的传递，也可通过声明式导航 router-link 进行页面跳转和参数传递。 首先，配置页面跳转路由。路由配置与通过 router.push 进行页面跳转的方式一样，没有任何区别。 其次，在相应需要进
阅读全文
摘要：网页开发过程中，尤其是在表单开发过程中，不可避免的会有各种各样的基础数据需要展示，供用户使用。例如，大家在办理信用卡时，经常需要填写各种表单数据，其中：性别（男、女）、学历（高中及以下、大专、本科、研究生及以上）、状态（启用、停用）等等，均属此类。日常软件开发过程中，通常习惯称之为配置项。在系统中配
阅读全文
摘要：在前端页面表单列表修改时，经常需要在页面切换的时候，传递需要修改的表单内容，通常可通过路由进行表单参数的传递。 首先，配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由，如下所示： 其次，在相应页面的 index.vue 中的 methods 创建相应的方法，通过 $ro
阅读全文
摘要：在前端页面表单列表修改时，经常需要在页面切换的时候，传递需要修改的表单内容，通常可通过路由进行表单参数的传递。 首先，配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由，如下所示： 其次，在相应页面的 index.vue 中的 methods 创建相应的方法，通过 $ro
阅读全文
摘要：在前端页面表单列表修改时，经常需要在页面切换的时候，传递需要修改的表单内容，通常可通过路由进行表单参数的传递。 首先，配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由，如下所示： 其次，在相应页面的 index.vue 中的 methods 创建相应的方法，通过 $ro
阅读全文
摘要：在前后端分离的开发过程中，经常使用 axios 进行后端接口的访问。 个人习惯常用的请求参数设置方法如下所示： 敬请参阅！
阅读全文
摘要：在实际业务需求中，有些内容当初次创建后，即不可再次进行修改变更，因而需要显示的文本内容不允许变更。此时，可通过页面限制防止用户修改。 方法：添加 readonly="true" 或者 :disabled="true" 均可实现。代码示例如下所示： <el-form-item label="基准库信息
阅读全文
摘要：在使用 el-table 展示数据时，单元格中的数据有可能存在空格和换行符，若不进行设置，浏览器默认会取消空格和换行符，如下所示： 解决方法： 将单元格的样式 “white-space” 属性设置为“pre-wrap” 即可解决。在VUE页面中添加如下样式设置 1 <template> 2 ...
阅读全文
摘要：在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。 分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。 第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示： <template> <el-table> ... </e
阅读全文
摘要：在进行前端网页开发时，通常列表数据我们使用table展示。那么如何在 el-table-column 单元格中使用超链接呢？ 如下即是解决方式的一种： 仅需要将如下代码： <el-table-column prop="url" label="访问链接" width="400" show-overfl
阅读全文
