小夭的博客

NVM版本选择目前可供选择的版本有很多，但是目前最新的版本安装好之后，node版本支持的是iojs，所以如果需要安装原始版本的node，需要nvm比较低的版本，如我按照的就是0.16.0。

最近笔试遇到ACM模式，这里记录一下如何用vscode模拟acm模式，这里基于JavaScript。

vscode添加代码片段

最近运行以前的代码发现由于依赖包部分版本更新导致了报错主要是node版本对应的node-sass与sass-loader问题这里做一下记录

在使用v-chart过程中，v-chart悬浮提示tooltip是自动生成的，我们也可以手动修改成需要的样子未修改前修改后下面上代码html <ve-histogram :extend="verticalChartExtend" :data="chartData" :tooltip="chartDataTooltip" />js //

前言在最近的开发中遇到了一个需求是，批量上传文件后，禁止对上传的文件进行删除与再次上传的功能。（这里有另外的按钮全部清空上传的文件）解决方法这里其实只要在el-upload组件中添加一个disabled就行，但是我这里根据是否上传过文件去禁用删除按钮了代码html <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"

记录一个小命令，远程git创建新分支后，本地（vs code）无法获取到远端更新的分支git remote update origin --prune

闲来无事想修改一下vscode的颜色主题还有背景，这里做一个小的记录修改主题我这里是中文版，英文的对应选择就好文件>首选项>颜色主题选择对应的主题添加背景安装插件文件>首选项>设置搜索plugin background点击在settings.json中编辑对应的地方修改成自己需要的样式即可{ "editor.renderIndentGuides": false, "vetur.validation.template": f

在开发时遇到需要直接替换当前页面，实现第三方页面的跳转小小记录一下常规url替换window.location.replace('http://www.baidu.com')需要携带参数进行跳转可以直接进行拼接window.location.replace(`http://www.baidu.com?params1:${this.params2}&params1:${this.params2}`)...

在开发过程中遇到需要我们压缩文件进行上传，这里综合了多个帖子，做一个记录这里仅针对图片类型的文件上传。其实图片压缩总的来说分为以下几步1、将上传的文件通过filereader转为base64格式2、通过canvas对图片进行压缩3、将压缩后的数据重新转为文件格式下面先上效果这里前端用的el-upload组件，在before-upload中进行图片压缩before-upload方法 async beforeImgUpload(file) { console.log(fil

今天记录一个遇到的小问题在使用面包屑的时候对具体的el-breadcrumb-item添加点击事件失败，后来查询到除了el-breadcrumb-item，还有类似el-dropdown-item都无法对其添加点击事件解决方法使用@click.native添加之后监听根元素原生事件，达成目的...

背景在前面的文章中提到elementui中的table组件可以通过render-header来自定义表头，之前的效果是在表头添加了复选框，后面发现操作成功后应该支持清除勾选的操作，但是通过render函数渲染的元素没有办法进行双向绑定，我们只有通过自己手动通过v-bind和v-on事件实现双向绑定代码部分html <el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="rende

在网上找了很多实例之后发现对于v-charts颜色渐变的实例很少这里记录一下首先对v-charts实现颜色渐变效果，要引入echartsimport echarts from 'echarts'接下来进行相关的设置 <ve-histogram :extend="verticalChartExtend" :data="chartData" />// 柱状图相关参数 verti

由于没有接触过e-charts，直接看的v-charts，所以无法对比两者的优劣，但是v-charts使用还是很方便的效果下面说一下初学者安装引用以及使用的步骤1、npm安装npm i v-charts echarts -S安装成功后可以看见package.json出现对应的依赖2、在main.js中引入v-chartsimport VCharts from 'v-charts'Vue.use(VCharts)这里有个小问题如果安装成功后，运行报错此时可以将echart版本

在表格列可以通过selection添加复选框，但是对于table的表头，添加复选框需要自定义效果这里主要通过运用element-ui中render-header的属性，在需要自定义的表头添加对应方法html<el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="renderHeader"></el-table>renderHeader方法/** 表头增加复选框 *

开发中遇到对多选表格进行翻页时记住之前勾选的列表项，一开始想着对数据进行筛选，然后渲染，后来发现其实element-ui其实实现了这个功能先上代码进行分析html<el-table :data="listData" ref="multipleTable" border :height="tableHeightCalc" @selection-change="handleSelectionChange" :row-class-name="tab

在element-ui上传多张图片的基础上通过对其设置封面与删除的功能可以改变图片的排序点击设置为封面后图片顺序成功改变其中也可以对图片进行删除操作，如果删除的为封面，则封面标识会在下一张图片出现另外我这里设置了上传的最大数量，在代码中可以看到代码部分这个上传图片的功能我放在了表单当中，这里我只展示多张图片的相关代码html el-form :model="filterForm" ref="filterForm" :rules="filterRules"> <el-f

在项目开发中遇到需要对两个表单项进行一起校验，这个时候可以把两个表单项同时放在一个表单项下面效果如下这里的校验规则是最低金额与最高金额不可同时为空，且最低金额必须小于最高金额代码部分html <!-- 金额范围校验 --> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" style="width: 85%;">

在开发中用vuex存储数据，遇到过当页面刷新，数据立即初始化的问题，这里总结一下几个解决方法1、每一次获取state的值都是通过接口取值这种情况下，每次获取state的取值都是通过mutations中调用接口获取更新state的值，只要接口是通的，即使每次刷新页面也会调用接口更新数据2、手动将state存储到缓存由于刷新vuex的state数据会初始化，当我们更新state的值时，我们可一（1）在mutations中手动将其存储（2）state的值从本地存储中进行取值3、vuex-persis

记录开发中遇到的一个小样式问题。先上效果图这里主要是对样式进行更改1、在需要换行的label进行改写，以及绑定class <el-form-item :label="'活动名称\n（换行）'" class="fold_label" prop="name"> <el-input v-model="filterForm.name"></el-input> </el-form-item>lab

最近开发有遇到过一个问题，当我们把多个table页面作为嵌套到el-tabs下时，切换tab会有错乱问题（这里的现象是切换的一瞬间，所以列缩小到最小，页面出现大量空白）。这里记录一下解决方法。在table中绑定ref <el-table border :data="tableData" ref="table" > </el-table>在对应mounted或者created中添加nextTick() this.$

对于表格内的数据，需要对应数据进行图片放大的效果，做一个记录先看看效果点击图片缩略图后html用插槽插入图片 <el-table-column align="center" prop="img" label="图片"> <template slot-scope="scope"> <img style="cursor:pointer;vertical-align:middle" width="5

当我们需要监听多个属性时，如果分开单独监听每个属性，只要一个属性改变就执行一次对应的方法，这样效率太低了这里记录一个一次监听多个属性的方法将所有属性放在一个对象里 computed: { // 监听多个属性的例子 usrInfo () { const {name, age} = this return {name, age} } },监听这个对象 watch: { // 监听多个属性的例子 usrInfo: {

在开发过程中遇到需要用vuex修改v-model的值，如果只是平常使用则会报错computed property “activeName” was assigned to but it has no setter这时我们需要给双向绑定的值添加一个set computed: { ...mapState('admin/tabComponent', ['activeName']), // 这里activeName是双向绑定，要添加set activeName: {

这里记录一个小的样式问题el-dialog水平、垂直居中.el-dialog{ display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

在开发过程中遇到过好几次有关深浅拷贝的问题，这里简单记录一下自己的理解浅拷贝最为直观的现象是门当用“=”直接进行赋值时，多个地址指向了同一个堆，改变一方的值，双方方会跟着修改（将A赋值给B，修改B时，A也会随之变化）深拷贝深拷贝是指赋值的时候不止修改指针指向，而是重新创建一个内存区域，这样一来修改一方的值，另一方不会随之改变（将A赋值给B，但是修改B时，A不会变化）深拷贝方法运用for循环遍历赋值通过先JSON.stringify()和 再JSON.parse() （JSON.parse(J

这部分代码样式部分参照表头斜线首先上效果图这里主要是针对二级表头对其样式进行选择修改，这里需要注意一定要是二级表头才能做出这样的效果html代码 <el-table :data="slashList" border height="400"> <el-table-column label="信息" show-overflow-tooltip width="140" align="right"> <el-ta

在使用element-ui时，如果表格数据为空，往往默认是暂无数据样式，部分需求需要再表格无数据时展示特定样式。话不多说上效果代码部分主要是用插槽插入需要的页面样式 <template slot="empty"> <img width="200" height="200" src="@/assets/images/nullTable.png" alt=""> <div class="table_emptytxt"

这里记录一个样式问题，我们知道element-ui给我们提供了多选时的tag形式展示但是当tag标签过长时，会出现“溢出”的情况直接上改变之后的效果1920分辨率1366分辨率下面上代码样式// select的tags过长显示....el-select__tags-text { display: inline-block; max-width: 140px; @media (max-width: 1400px) { max-width: 42px; }

有的时候对于时间选择，我们需要精确到当前的具体时间。对于el-date-picker，我们将其进行一个时间的拼接。html <!-- 获取当前时间和前一个月的时间（精确到时分秒） --> <el-form-item label="选择日期" prop="date"> <el-date-picker v-model="ruleForm.date" :clearable="tr

<!-- 键盘只能输入数字 --> <el-form-item label="纯数字" prop="justNum"> <el-input v-model.number="ruleForm.justNum" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"/> </el-form-item&gt...

这里记录一个踩过的小坑我们做编辑页面的时候有时候需要先赋初值，但是如果直接用等于的方法赋值后，的确赋值成功了，但是无法再对其进行更改，也不会触发change事件 <el-form-item label="选择日期" prop="date"> <el-date-picker v-model="ruleForm.date" :clearable="true" type="dater

这一篇在上文的基础上继续添加另一种全选的方法总体方法类似这里直接上效果初始默认全选上代码html <el-form-item label="可全选下拉框2" prop="apply2"> <el-select multiple collapse-tags v-model="ruleForm.apply2" @change="changeSelectApp(ruleForm.apply2,appOptions)" placehold

基础效果其实在element ui里面已经实现了el-select的多选效果主要是multiple属性，另外collapse-tags可以将他们合并成一段文字但是这样的效果做不到可以全选全选效果下面是代码页面部分 <el-form-item label="可全选下拉框" prop="apply"> <el-select multiple collapse-tags v-model="ruleForm.apply" @change="change

写项目踩下的坑，发现当提交的表单只有一个表单元素时，按下回车，会自动刷新页面后来找到原因，当提交的表单只有一个表单元素时，按下回车其实是自动提交表单解决方法1、向表单中添加其他表单元素2、添加@submit.native.prevent阻止事件发生<el-form @submit.native.prevent></el-form>...

在element-ui中的el-table给我们提供了很多属性，我们可以根据这些属性，条件显示各种样式这一次主要讲用到的两个属性，分别是row-class-name还有cell-class-name1、row-class-name改变行样式（1）在table中绑定row-class-name:row-class-name="tableRowClassName"（2）methods添加方法 /** 修改表格行样式 */ tableRowClassName ({row, rowI

前端基础学习-利用vuex更新全局面包屑刚刚接触vuex，简单记录一下vuex的应用安装vuexnpm install vuex --save根结构注册store创建store文件夹结构如下这样是为了能引入多个js文件store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import admin from './modules/admin'Vue.use(Vuex)export default new Vu

本文主要是基于之前写过的一片博客-mock模拟分页list的基础上，用mock模拟对表格的操作首先回顾一下mock模拟分页操作（mock引入以及安装不再赘述）mock模拟分页list// 引入mockjsconst Mock = require('mockjs')// 获取 mock.Random 对象const Random = Mock.Random// 使用mockjs模拟数据// 用于接受生成数据的数组let tableList = []for (let i = 0; i &l

记录一个小方法 /** 筛选不为空的对象 */ toFilter () { let validForm = {} for (let i in this.filterForm) { if (this.filterForm[i]) { validForm[i] = this.filterForm[i] } } this.showForm = validForm }...

前端基础学习-MessageBox的DIY方法在element-ui上对于MessageBox其实给我们提供了很多种类，但是很多情况下我们需要对他们的样式进行改写，下面记录我遇到过的两个改写的情况（1）$confirm需要展示多行 const confirmText = ['每条数据只能检测三次', '确认检查吗？'] const newDatas = [] const h = this.$createElement for (const i in co