随笔分类 - vue
摘要：vue2.6 sass全局变量配置 安装sass-loader npm install sass-loader@8.0.2 --save-dev vue.config.js中配置 module.exports = { css: { loaderOptions: { sass: { prependDa
阅读全文
摘要：需求描述 要求输入框输入0-100之间的数据，需要保留2位小数。 输入框是通过v-for渲染的，需要动态添加一个change事件。 问题分析 使用文本输入框，监听输入框的change事件，然后使用toFixed方法保留小数位。 问题解决 普通输入框 <el-input v-model="form1.
阅读全文
摘要：需求描述 一个提示功能，可能有多条数据需要显示，但是展示的地方最多显示3条，要求当返回的数据超过3条，就通过上下滚动显示。鼠标移入停止滚动，鼠标移出继续滚动。 问题分析 展示区高度固定，信息列表高度是根据数据条数计算的，可以通过定位，然后修改信息列表的 top 值来实现滚动效果，滚动的最大高度 po
阅读全文
摘要：问题描述 在使用elementUI开发，想要对dialog进行二次封装，可以实现一个类似v-model双向绑定的功能。 问题分析 v-model其实就是一个语法糖，它实际上做了两个动作： 绑定数据 value 触发输入的input事件去修改value <input type="text" :valu
阅读全文
摘要：需求描述 vue-element-admin开发过程中需要对el-table行进行排序（即每一行可以上下移动），然后将排序后的数据传给后台更新数据。该表格无分页。 问题分析 方法一：可以采用在每条数据中加两个上下移动的按钮，每次移动一行。该方法实现简单，不过要连续移动的时候需要多次调用接口，交互效果
阅读全文
摘要：问题描述 使用vue-element-admin开发过程中需要将el-table中的数据导出为excel 问题解决 安装库 npm i file-saver xlsx -S 引入库 import FileSaver from 'file-saver' // full import import *
阅读全文
摘要：项目需求 如何在vue项目中使用mockjs模拟并使用一个分页数据 问题解决 安装mock npm install mockjs 创建mock.js // mock文件夹与src同级，在mock文件夹下创建mock.js文件 const Mock = require('mockjs') const
阅读全文
摘要：问题描述 开发过程中发现有其中一台Mac测试机上的某一个页面渲染有问题，刷新页面后页面正常显示然后页面闪动一下，部分dom就消失了。 问题分析 测试页面发现原始页面有滚动条，到初始化页面后滚动条看不到了，头部的dom也看不到了。通过缩放视口或者鼠标移动到滚动条处可以让隐藏的dom正常显示，猜想可能由
阅读全文
摘要：需求描述： 头部固定吸顶，右侧菜单，左侧长页面，要求左侧滚动右侧菜单对应高亮，点击右侧菜单，左侧页面滚动到对应位置。（这个对应位置就是模块头部刚好在固定头部下面） 需求分析： 头部和右侧可使用fixed定位，左侧长页面不限制高度。有两件事需要处理：监听滚动事件，实现滚动效果。 解决问题 // 监听事
阅读全文
摘要：问题描述 在一个表格中需要计算金额合计，合计的金额如果过长需要溢出隐藏并且显示title <!-- index 是tableData循环的下标--> <el-table ref="tableRef" :data="tableData" show-summary :summary-method="va
阅读全文
摘要：问题描述 element-admin中使用tab切换到不同的路由，发现每次切换tab路由都会执行两次生命周期 <tabs :tabs="tabs" v-model="activeName" @on-switch="handleSwitch" > <components :is="activeName
阅读全文
摘要：问题描述 项目开发过程中需要生成一段脚本，并执行试算，所以使用了eval，eslist警告可以通过 // eslint-disable-next-line 解决。 但是Vulnerabilities警告无法避免。 问题解决 定义一个公共方法 eval2 使用方法和eval一样。 export con
阅读全文
摘要：问题描述 需求是在table中使用日期组件，table是已经封装好的，通过render渲染el-date-picker组件 问题解决 页面渲染 // 注意 :column="item" 其中item是tableData的一项 <template slot-scope="scope"> <ex-slo
阅读全文
摘要：问题描述 vue-admin项目中使用了/deep/后启动项目报错： ERROR Failed to compile with 1 errors 20:27:22 error in ./src/nzk/components/themeEditor/layout/components/tree-sel
阅读全文
摘要：问题描述 需求：table列表中文字溢出隐藏，并且隐藏的文字要使用title提示。 问题分析 需要一个title提示的指令或者方法 在table列表的数据中使用这个指令或方法 问题解决 写了一个全局指令, 如果文字溢出了就提示title，如果文字没有溢出就不显示title。 // 溢出隐藏显示tit
阅读全文
摘要：问题描述 elementui-admin项目中使用/deep/在chrome89+中出现样式混乱的问题 公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效。chrome89+ /deep/选择器失效，导致样式错乱，覆盖的样式失效。 问题分析 Chrome 63将删
阅读全文
摘要：问题描述 封装一个金额输入框 问题分析 首先需要一个金额格式化的方法，可以在input输入框上覆盖一个遮罩显示格式后的金额。 组件 <template> <div class="m-input"> <el-input-number ref="input" :min="curMin" :max="cu
阅读全文
摘要：问题描述 需求要一个列表，列表中所有元素不能换行，每一个元素包括一个table。 分析问题 可以使用一个ul然后让li浮动，这样的结果是当li过长会换行，为了不让li换行可以动态计算所有长度之和作为ul的长度 问题解决 <div class="father"> <ul class="clearfix
阅读全文
摘要：iview+vue 项目中使用树结构 问题描述： 在项目中使用iview中的tree-select组件的树结构的时候发现在ie环境下不能返显，问了解决这个问题，就在github上找了一个vue-treeselect 使用步骤 安装 npm install @riophae/vue-treeselec
阅读全文
摘要：CALL_AND_RETRY_LAST Allocation failed -javascript heap out of memory
阅读全文