随笔分类 - Vue
摘要：在右下角或者左下角的图标，有时候会遮挡住 数据，体验不是特别好。需要可拖拽、挪动。 结构 <div id="item_box" @click="$router.push('/newAddPersonal')" @touchstart="getDown" @touchmove="getMove" @t
阅读全文
摘要：实现思路： 1、 页面使用内置组件 keep-alive 实现缓存2、获取列表的滚动距离 3、返回列表页面恢复高度 在路由文件中添加meta信息，将keepalive设置为true { path: '/pubCustomerPage', name: 'pubCustomerPage', meta:
阅读全文
摘要：ref 和 reactive 都是用来定义响应式数据的。 ref允许我们创建一个任意类型的响应式的ref对象，在使用时需要带上.value 在模板中使用ref对象时，假如ref位于顶层，就不需要使用value，它会自动解包 但如果ref对象是作为一个属性声明于对象之中，在模板中进行运算时仍然要使用.
阅读全文
摘要：documentElement在安卓手机下不支持，所以需要使用document.body.scrollTop handleScroll() { let el = document.documentElement, body = document.body; let scroTop = el.scro
阅读全文
摘要：vue报错信息 原因是因为通过...扩展运算符进行赋值操作，当数据为undefined时候就会报这个错误。
阅读全文
摘要：vue + ant vue下拉框遍历时候出现报错，检查key是唯一的（没有重复），后台返回的数据也没问题 最后排查是因为，两个组件中有两个for循环操作同一个数组，导致key重复。 解决方式，可以给key加个标识，比如:key="index + '-only'" 【检测到重复的密钥】出现该错误的几种
阅读全文
摘要：three-Dxf是一个浏览器dxf文件查看器应用，使用dxf-parser解析成json格式，然后用three.js进行渲染 DXF文件是制图软件AutoCAD生成的一种数据文件 github地址：https://github.com/gdsestimating/three-dxf <templa
阅读全文
摘要：vue脚手架启动时候报错 原因是安装的less版本太高导致的。 解决方法，卸载重新安装指定低版本就可以了 npm uninstall less less-loader npm install less@3.12.2 less-loader@7.0.2 --save-dev
阅读全文
摘要：需求：后台返回所有数据，前端实现分页效果。 由于数据量太大，加载很慢，页面也会造成卡顿现象，做成滚动条形式的不太合适 <div class="same-table"> <el-table :data="dataShow" border ref="recordTable" :header-cell-s
阅读全文
摘要：项目中使用背景图片报找不到模块，无法解析错误 改成这种格式就可以了 1.相对路径: "./assets/logo_blue.png" 2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为 相对路径 3.带~的路径 "~@/assets/theme/logo_blu
阅读全文
摘要：借助插件来解决vuex页面刷新后数据丢失的问题。 安装插件 npm install vuex-persistedstate --save 配置使用（默认存储到localStorage） import createPersistedState from "vuex-persistedstate" co
阅读全文
摘要：使用ant design vue的单元格编辑时候，报以下错误 （项目用的的是vue-cli3.0） 网上搜索发现这跟vue的构建版本有关 在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板 vue 在初始化项目配置的时候，有两个运行环境
阅读全文
摘要：element上传文件需要限制上传个数，结合limit和:on-exceed去处理。 <el-upload ref="upload" :action="uploadUrl()" multiple :limit="5" :on-preview="handlePreview" :on-remove="h
阅读全文
摘要：默认表格前面的复选框是可以选择多个，但有的需求是只能选择一个， 可以通过clearSelection和toggleRowSelection去实现，把当前选中的这条selected设置成true。 <div class="same-table"> <el-table :data="tableData"
阅读全文
摘要：点击机构树，子机构没有数据时候 去掉下拉箭头。 方法一： data() { return { treeData: [], defaultProps: { children: 'children', label: 'label', isLeaf: (data, node) => { if(node.l
阅读全文
摘要：点击机构树查询人员信息和行政区域数据，但他们是两个接口。 template结构 <div class="organize-view"> <el-tree :data="treeData" :props="defaultProps" ref="tree" :show-checkbox="false"
阅读全文
摘要：记录下element日期控件修改时候显示1970年的问题，新增时候正常。 因为DatePicker 日期选择器不支持字符串，只支持时间格式 //修改 openEditDia(data) { let yearDate = new Date(); yearDate.setYear(data.year);
阅读全文
摘要：如图，在弹框中使用element表格，给右侧列设置固定后，发现边框线没有了 单独给右侧is-hidden加左边框 ::v-deep .el-table__row{ td:not(.is-hidden):last-child{ border-left:1px solid #2c4a70; } }
阅读全文
摘要：moment.js 是一个 JavaScript 日期处理类库。 安装 npm install moment --save 或 yarn add moment main.js中全局使用 import Moment from 'moment'; //定义全局时间过滤器 Vue.filter('comv
阅读全文
