爱码士的博客

场景有一组数据如下：[{ "name": "1", "price": 12.00 }, { "name": "2", "price": 22.00 }, { "name": "3", "price": 32.00 }, { "name": "4", "price": 42.00 }]一般计算数据则使用循环计算即可，现在记录一种使用函数式编程的方式。JavaScript reduce() 方法计算数组元素相加后的总和。reduce() 方法接收一个

vxe-table文档：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/seq此处没有说明翻页后怎么计算序号。翻页序号连续性添加属性:seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"js部分tablePage: { currentPage: 1, pageSize: 20, t

官网文档先看看官网的配置文档和API横坐标点击事件配置xAxis: [{ type: 'category', data: this.xAxisData, boundaryGap: false, axisLabel: { rotate: 40, clickable:true }, silent:false, triggerEvent:true}],clickable:truesilent:falsetriggerEvent:true事件配置

说明上一次用到了子组件调用父组件的方法，使用的是that.$emit('callback', params)父组件添加@callback="方法"即可。这次讨论，父组件把方法传给子组件，通过属性的方式。（基于vue2.x）父组件<child :func="funcName"></child>数据：data(){ return{ funcName:接口.方法名 }}子组件： props: { func: Function }这样就可

闲来无事查看了下node版本，本机安装了v12，再去官网看了下都14了，所以本机要更新下。更新nodenode -vsudo npm cache clean -f # 清缓存sudo npm install -g n # 安装管理工具sudo n stable # 安装最新版node -v不使用npm而安装yarn“yarn和npm都是包管理工具，但是yarn是崭新的，经过重新设计的npm客户端，于2016年10月发布，相比于npm，yarn在运行速度上有显著的提升，安装时间变少，功能

说明ztree是一款很好的树形控件，无需对数据进行严格的格式控制，比如需要建立层级关系，只要你数据存在parent_id即可官网：http://www.treejs.cn/v3/main.php#_zTreeInfo基础使用，例子都在官网看。这里讲述怎么集成。项目集成项目是layui，其本身有jquery模块，为了配合插件，需要重新引入。<link th:href="@{/lib/ztree/css/metroStyle/metroStyle.css}" rel="stylesheet"&

前言父组件是通过props属性给子组件通信，那事件呢？实践过程使用this.$emit()子组件<template>xxx</template><script>export default { ok() { this.$emit('callback', '参数1') }}</script>父组件 <child v-if="visible" @callback="handler" ></child

问题描述vue中子组件的created、mounted钩子中获取不到props中的值，父子组件中父组件传值给子组件，无法完成初始化。 props: { eqTypeId: { type: String, default() { return {} }, },createdcreated(){ this.searchEvent()}原因出现这种情况的原因, 因为父组件中的要就要传递的 props 属性 是通过 发生

说明网上很多方法，但都不是最新，最好的。这里直接使用官方配置完成。我的版本：2.3.5.RELEASE配置error页面首先新增一个404页面。命名为error.html配置文件的源码public class ErrorProperties { /** * Path of the error controller. */ @Value("${error.path:/error}") private String path = "/error"; /** * Include

下拉刷新数据设置数据 data: { total: 0, current: 0, list: [], hasMoreData: false }total 总数current 当前分页，默认0list 返回的数据hasMoreData 是否还有数据如果有搜索将所有的信息重置 this.setData({ total: 0, current: 0, list: [], }) this.loa

众所周知thymeleaf是springboot官方前端模板。对于简单的web应用，使用他还是很方便的，这里记录下一些使用技巧循环用法<tr th:each="child:${user}"> <th scope="row" th:text="${childStat.index+1}"></th> <td th:text="${child.username}"></td> <td th:text="${child

为了页面美观，通常会把图片缩小，凡是需要放大的时候就不好办了。现在使用这个插件即可实现效果。（本文针对单个图片完成，其他功能可查看文档）仓库地址：https://github.com/826327700/vue-photo-preview下载npm install vue-photo-preview --savemain.js使用import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vu

记录说明记录我常用的运维命令，具体可根据此信息进行详细查询。Docker相关1. 动态内存docker update -m 128m consul报错了Memory limit should be smaller than already set memoryswap limit, update the memoryswap at the same time发现问题，docker 默认没有启用memory-swap交换内存，改进方法：docker update --memory 128m

说明在写前端的时候，需要根据页面高度自动调整高度，于是写了下面的代码。 .content { margin: 80px 20px 0; height: calc(~"100vh-133px"); background-color: white; }运行后发现，无法编译。解决以上是less的写法，经过排查，需要在运算符号之间加空格即可。 .content...

本教程适合Java开发人员，尤其是那些既要开发后端又要开发前端的人员使用，对于小型项目一样适用。

我的项目是使用`vue init webpack`创建的

环境准备下载需要的软件和环境。nodejs环境，官网下载，直接安装即可。vscode编辑器、IDEA编辑器，官网下载安装即可。配置npmnpm 是nodejs的包管理工具。（1）配置npm的仓库镜像地址npm config set registry http://registry.npm.taobao.org/不过当你要发布包的时候，需要修改回来npm config set...