- 一、前言在前端项目开发过程中，el-table展示的结果列使用组件形式引入，其中某些字段通过:formatter方法转码，结果栏位的字段显示/隐藏控制也使用组件形式引入，前端在控制字段显示属性时，发现码值转换及字段信息展示均有问题。 二、问题分析通过阅读代码结构，发现el-table-column通过template循环生成，由于template的作用是模板占位符，可帮助我们包裹元素，但在... 一、前言在前端项目开发过程中，el-table展示的结果列使用组件形式引入，其中某些字段通过:formatter方法转码，结果栏位的字段显示/隐藏控制也使用组件形式引入，前端在控制字段显示属性时，发现码值转换及字段信息展示均有问题。 二、问题分析通过阅读代码结构，发现el-table-column通过template循环生成，由于template的作用是模板占位符，可帮助我们包裹元素，但在...
- 一、key 的作用作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。 二、key 使用 id 与 index 的区别不推荐使用index作为key，因为这种做法会导致某些节点被错误地原... 一、key 的作用作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。 二、key 使用 id 与 index 的区别不推荐使用index作为key，因为这种做法会导致某些节点被错误地原...
- 一、HTML5 中的 template 标签html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性，天生不可见。 <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template", 这是因为template标签天生不可见--><template> ... 一、HTML5 中的 template 标签html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性，天生不可见。 <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template", 这是因为template标签天生不可见--><template> ...
- 一、前言项目开发过程中，通过iframe引入其他页面，返回至前一页面时调用parent.location.reload(true)时Chrome、IE10(11)下均可以正常返回，但是在IE9下却无效。改成top.location.reload(true)就可以了。window.location.reload(true)刷新当前页面.parent.location.reload(true)... 一、前言项目开发过程中，通过iframe引入其他页面，返回至前一页面时调用parent.location.reload(true)时Chrome、IE10(11)下均可以正常返回，但是在IE9下却无效。改成top.location.reload(true)就可以了。window.location.reload(true)刷新当前页面.parent.location.reload(true)...
- 一、前言在前期博文《Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别》中，讲解了vue中Computed 和 Watch的使用和区别，其中，只是介绍了computed如何计算元素属性，并未介绍如何方法传参。本篇博文主要讲解下如何利用computed的计算属性进行传参。 二、场景引入在前端项目开发过程中，会遇到码值转换应用场景，且不同页面会存在复用码值转换情况，为提... 一、前言在前期博文《Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别》中，讲解了vue中Computed 和 Watch的使用和区别，其中，只是介绍了computed如何计算元素属性，并未介绍如何方法传参。本篇博文主要讲解下如何利用computed的计算属性进行传参。 二、场景引入在前端项目开发过程中，会遇到码值转换应用场景，且不同页面会存在复用码值转换情况，为提...
- 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ... 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ...
- 一、动态路由（页面刷新数据不丢失）methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })}路由配置{ path: '/particulars/:id', name: 'particu... 一、动态路由（页面刷新数据不丢失）methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })}路由配置{ path: '/particulars/:id', name: 'particu...
- 在前期博文《Vue进阶（三十）：vue中使用element-ui进行表单验证》、《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶（幺贰幺）：表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单，且表单项为后台动态生成时，若form表单属性不存在... 在前期博文《Vue进阶（三十）：vue中使用element-ui进行表单验证》、《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶（幺贰幺）：表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单，且表单项为后台动态生成时，若form表单属性不存在...
- 一、前言在Vue项目开发过程中，应用全家桶vue-router实现路由跳转，且页面前进、后退跳转过程中，分别对应不同的切换动画。vue-router 切换页面时怎么设置过渡动画？首先，需要考虑以下问题：如何判断切换路由时是前进还是后退？每次切换时向左向右切换动画如何实现？可通过以下解决方案实现：给各个页面定义层级，在切换路由时判断用户是进入哪一层页面。如果用户进入更高层级路由那么做前进动画... 一、前言在Vue项目开发过程中，应用全家桶vue-router实现路由跳转，且页面前进、后退跳转过程中，分别对应不同的切换动画。vue-router 切换页面时怎么设置过渡动画？首先，需要考虑以下问题：如何判断切换路由时是前进还是后退？每次切换时向左向右切换动画如何实现？可通过以下解决方案实现：给各个页面定义层级，在切换路由时判断用户是进入哪一层页面。如果用户进入更高层级路由那么做前进动画...
- 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ... 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ...
- 一、需求背景在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。 二、需求分析可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。 三、解决方案经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下：<el-row v-for="(btnArr, index) in oprBtn" :key="index"... 一、需求背景在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。 二、需求分析可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。 三、解决方案经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下：<el-row v-for="(btnArr, index) in oprBtn" :key="index"...
- 一、前言在开发Vue项目过程中，代码复用之自定义组件是常做事情。当子组件为form表单的时候，父组件需要获取子组件（表单）的验证结果。尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用... 一、前言在开发Vue项目过程中，代码复用之自定义组件是常做事情。当子组件为form表单的时候，父组件需要获取子组件（表单）的验证结果。尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用...
- 一、前言package-lock.json文件的作用是锁定安装时包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。根据官方文档，package-lock.json 是在 npm install时生成的一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 二、作用它有什么作用呢？因为npm是一个用于管理package... 一、前言package-lock.json文件的作用是锁定安装时包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。根据官方文档，package-lock.json 是在 npm install时生成的一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 二、作用它有什么作用呢？因为npm是一个用于管理package...
- 一、前言ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。下面具体讲解下该组件库的应用实践。 二、组件库安装npm install ant-desig... 一、前言ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。下面具体讲解下该组件库的应用实践。 二、组件库安装npm install ant-desig...
- 一、前言项目开发过程中，优化项目时考虑加入全屏功能。具体实践步骤如下： 二、安装依赖项目中使用的是sreenfull插件，执行命令安装：npm install --save screenfull 三、应用组件安装好后，引入项目，用一个按钮进行控制即可，通过Esc键退出全屏按钮方法如下：<script>import screenfull from 'screenfull'export def... 一、前言项目开发过程中，优化项目时考虑加入全屏功能。具体实践步骤如下： 二、安装依赖项目中使用的是sreenfull插件，执行命令安装：npm install --save screenfull 三、应用组件安装好后，引入项目，用一个按钮进行控制即可，通过Esc键退出全屏按钮方法如下：<script>import screenfull from 'screenfull'export def...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签