- 博客(45)
- 收藏
- 关注
RSS订阅原创 uniapp image标签图片不会居中显示
用image标签时，图片是自动靠左，如果图片不足够大的话，右边就会有空白。系统默认的是uni-image {display: inline-block;}可见是行内块这个时候在自己的页面下，配置css可以转换为 display:block 然后margin： 0 auto；这样就能实现居中了...
2021-09-05 22:42:37
6265
3
原创 page fail...is not found
在uniapp练习时，一个新闻列表跳转的设置，但在配置失败提示后，控制台显示“page fail … is not found”。原来，需要在项目根目录下的pages.json，里面的"pages"里做相应配置，我的理解是“pages”相当于路由...
2021-09-02 21:12:48
1172
原创 slice 和 splice 的区别
做了个练手项目，遇到这么个情况// 数组名暂定Arr[{ //对象1 name:1, arr: [ { prop1: 111 } { prop2: 222 } ]}, { //对象2 name:2, arr: [ { prop1: 111 } { prop2: 222 } ]},{ //对象3 name:3, arr: [ { prop1: 111 } { prop2: 222 } ]}...]上面这是数据格式，arr里的值是变动的，需要一个功能，就是
2020-10-17 16:29:34
237
原创 ＜table＞标签的样式问题
在项目开发中，关于<table>标签的样式设置、布局一直让我很头痛，最好用的是cellpadding、cellspacing两个属性，但api里又说HTML5 不支持<table> cellpadding 属性。请使用 CSS 代替。今天无意间找到了一个说法，完全解决了这个问题cellspacing 和 cellpadding 是html标签的直接属性，不是css的样式属性。css的样式属性是table{border-spacing: 2px; /* 对应cells
2020-10-10 11:17:27
363
1
原创 el-table样式设置
官网的说明里没有讲清楚以上图中框出的两个属性进行说明，只需要返回style字符串就可以<el-table :header-cell-style="headerCellStyle" :cell-style="cellStyle"></el-table>然后再script里headerCellStyle({ row, rowIndex }) { return 'background-color: #F2F6FF;text-align: center;' },cell
2020-10-07 15:16:09
703
原创 遇到的css样式污染问题
在一个views目录中，创建了两个vue文件，用了同样的css样式命名规则，例如：class=“root”、class="header"这样。发现在第二个vue 文件里的样式，就没有生效。解决办法也很简单，就是添加上 scoped 属性...
2020-10-06 22:01:37
447
原创 el-select组件传递对象值
使用el-select组件时，如果不加特别配置，选项里的对象都是蓝色，为选中状态。这时，需要在<el-select>里添加 value=key="id"项 ，然后在option里面的key = id，这样就可以正常传递对象值了如下图：<el-select v-model="selected_item" value-key="id" style="width: 150px;" clearable filterable :loading="loading" > <el-o
2020-10-03 12:21:58
2313
原创 echarts图表宽度只有100px
原因是用了el-tab组件导致的，解决方法：var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度myChart.style.width=window.innerWidth+'px';chartObj=echarts.init(myChart); //初始化图表chartObj.setOption(option); //给图表配置设置...
2020-10-01 15:31:55
971
转载 vue-router 传参的三种基本方式
【原文】vue-router 传参的三种基本方式项目中很多情况下都需要进行路由之间的传值，想过很多种方式sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异下面我来说下vue自带的路由传参的三种基本方式先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去第一种方法 页面刷新数据不会丢失methods：{ insurance(id) { //直接调用$route
2020-09-29 14:47:15
1902
原创 vue-element-admin里element-ui分页组件中英文显示切换
在默认设置里，采用的是英文。将src/main.js里的 import locale from 'element-ui/lib/locale/lang/en改成import locale from 'element-ui/lib/locale/lang/zh-CN'就可以了
2020-09-29 13:36:31
7682
转载 el-table前端分页和后端分页的实现
【原文链接】 elementUI实现分页前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据前端分页tableData.slice((currentPage-1)*PageSize,curren
2020-09-28 21:38:28
6139
1
原创 el-checkboxgroup和v-model的经验总结
在写项目时，获取了数据后想要代码比较简洁，但在各种循环时出现了很多问题。由于获取的数据格式，跟最后需要提交的数据格式不一致，所以一开始打算分为两个数据，一个是负责显示的数据A，另一个是负责绑定的数据B。A负责页面的渲染，B负责最终的提交。这个过程里面，常出现的两个问题，一个是length undefined如下图这个提示的原因一般是数据格式不是数组，所以获取不到length属性另一个是跟上面长得很像 property 'xxx' of undefined，这个是因为对象里没有'xxx'这个属性所
2020-09-25 21:12:25
3836
1
原创 一个分号的小问题，不解但已解决
echarts绘制图表的.js文件，新建了一个饼图，但是没有能绘制出来。反复检查后找到错误所在。我是通过.vue文件把数据以参数形式传给了图表绘制文件.js里，在.js里的参数legend需要一个图例数据（数组形式）。所以，我const legend_data = [] (function() { comuhome_data.forEach(item => legend_data.push(item.name)) })()但这样是有错误提示的。编译时，出现下图错误提示，并且页
2020-09-19 16:33:37
115
原创 Echarts绘制不出来的情况一
在自定义的图例绘制.js中写了一个新的图例函数，但是页面中却渲染不出来。虽然没找到原因，但是将.js函数里定义变量的var改成const后，就能正常渲染了。倒推回来，原因可能是.js里写了多个函数，而每个函数里又都用var定义了相同变量名的变量，导致了命名污染，这也只是猜测。...
2020-09-18 10:36:04
1372
原创 vue将data作为参数传给echarts.js，但echarts却不能识别data
这个问题太TM打头，虽然找到解决办法，但并不知道原理。现在记录一下一个.vue文件要绘制图形，echarts内容单独写了个.js文件，暴露.js里的绘制函数，用import引入，并在created钩子时调用绘制。但结果却没有实现绘制，问题出在通过request获取后台的数据，明明是个数组对象，但却有_ob_:Observer(如下图)据说是vue为了起到观察值变化，所以添加了这么个东西，但这不是我关心的。网上也说通过JSON.parse(JSON.stringfy(data))可以解决，所以我在.v
2020-09-17 09:49:36
1782
3
原创 数组对象有内容，但length却是0
在这个项目里，将request得到的数据push到数组里。再在一个method里能console.log出数组对象里的内容，但arr.length却是0，因此不能用循环获取里面的元素。一个解决的办法：将要处理数组的代码，直接写在request的success时axios.then(response => { reponse.data /*处理数组代码块*/})...
2020-09-16 01:13:16
6350
原创 调试时 Error in render: “TypeError: Cannot read property ‘value‘ of undefined“
这个提示是不能读取未定义的‘value’属性，但之前已经在created钩子时通过axios从服务器端获取了数据，尝试了用this.$nexttrick()和async await都不行（也有可能是我没有用对）。搜索一番后，得知这是因为获得的数据有多层包裹，例如我遇到的项目是 data{ ...platform_info { ...datalist []... }... }，因为datalist位置太深获取不到。但解决方法也很简单，就是在页面渲染时做一个判断，如果platform_info或者datal
2020-09-15 11:00:35
1166
原创 CSS伪元素引用图片logo
在一些文字前需要一个logo，可以使用<img />实现，也可以在文字div上使用伪元素实现。经过搜索，以及逐条实验，可以用下面的代码实现&::before { width: ; height: ; background: url(...) no-peat; content: ''; /*内容就为空*/ display: inline-block;}设置这5条后，就能实现伪元素引用图片logo了...
2020-09-11 18:28:05
449
原创 去除＜area＞被选中时的蓝色边框
在<map>中用<area>勾画区域，shape：可取值为 default | rect | circle | poly，用来指定超链接区域的形状。default：将整个图片定义为超链接区域； rect：定义一个矩形超链接区域； circle：定义一个圆形超链接区域；poly：定义一个多边形超链接区域；coords：用来指定超链接区域在屏幕上的位置和形状，确定位置的坐标值和坐标值的书写顺序由所设定的形状来决定，确定位置与形状的可能性组合如下rect：left-x，top-
2020-09-08 20:57:07
337
转载 elementui里Table常见坑
转载于“手摸手，带你用vue撸后台 系列三(实战篇)” 链接通过dialog来编辑，新建，删除table的元素这种业务场景相对于前面说的两种更加的常见。而且也有不少的小坑。首先我们要明确一个点 vue 是一个MVVM框架，我们传统写代码是命令式编程，拿到table这个dom之后就是命令式对dom增删改。而我们现在用声明式编程，只用关注data的变化就好了，所以我们这里的增删改都是基于list这个数组来的。这里我们还要明确一点vue 列表渲染注意事项由于 JavaScript 的限制， Vue 不能检测
2020-09-06 14:45:22
462
原创 字体不能小于12px的解决方法
在做开发时，发现右上角的头像处，如果有名字的话，字体无法调到12px以下。搜索以后得知，是chrome浏览器的设置，为了让人看得清楚，所以最小的字体大小就是12px解决办法是：在div里面套一个span，例如：<div class="xxx"><span>AAAA<span></div>在css的font-size下面，加一条-webkit-tranform: scale(0.8)，通过调整括号里的数字来调整字体大小...
2020-09-05 17:12:46
864
原创 CSS背景渐变色再叠加背景图
在开发中遇到个问题，一个div背景是渐变色，但在div的右下角又需要叠加一张小尺寸的背景图。搜索后，解决方法如下：在 background-image 里通过 url 引用图片，再用逗号隔开，使用 linear-gradient添加渐变色用background-repeat设置背景图片重复的模式用background-position设置背景图片的位置...
2020-09-04 16:40:25
2069
原创 Vue里用el-image加载本地图片失败（Failed）
在使用el-image组件加载本地图片（src/assets/logo/logo.png）时，总是提示Failed，图片显示不出来。搜索后得知，要在路径前使用require加载所以将引用路径改为下面截图后，就可以正常显示了注意：引用过程中单双引号的配对...
2020-08-31 23:59:09
5658
4
原创 提示计算属性没有定义的错误
做了个计算属性sections，获取store里部门的内容，但一直提示这个计算属性没有定义。相同的内容，在另一个页面中是成功的。最后，发现，原来是已经有了一个computed……艹
2020-05-15 23:31:37
666
2
原创 Uncaught TypeError: Cannot read property 'match' of undefined
页面一加载就提示Uncaught TypeError: Cannot read property ‘match’ of undefined网上教的package-lock.json， 然后 npm install，试过了，没有解决我的问题再反复检查代码，其中还有 match 属性的部分完全没有问题，也没有进行过修改，之前都是成功执行了的。忽然发现，我调用 match 的属性是 cname，但我在mock数据里原本是 cname现在改成了name 。倒回去把所有cname的地方都改成了name后，代码就
2020-05-12 17:31:57
3485
原创 及时响应的筛选过滤器
添加一条input框，然后根据官方给出的方法是用即可变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/)})参考链接：[https://cn
2020-05-11 08:56:36
102
原创 ElementUI里Table和Pagination组件的组合形成翻页
其他都没什么问题，这里主要是记录一下，如何使用。1、设一个totalpages，发送一次不带参数的get请求，获取数据所有条目数，并将其与Pagination里的total绑定；2、设置size-page和current-page时，将参数分别传给_limit和_page，之后发起get请求，就能获得请求的当前页数据；3、因为第一步骤，所以显示的页数会一直是总数的数量，就能正常使用了。...
2020-05-10 14:19:35
216
原创 Vue 3.0跨域问题使用代理解决方法
最近用vue-element-admin框架，在访问阿凡达api和百度api的时候，会出现提示跨域问题。搜索了半天，再通过自己尝试，总结如下：Vue 3.0为了解决跨域，使用了 http-proxy-middleware 。在根目录下，有个vue.config.js文件，只需要在其中配置proxy项，就能解决跨域问题。so easyproxy: { "/locainfo": { //在...
2020-03-16 14:05:33
415
原创 在Vue中应用中国天气网插件
无意间访问到中国天气网，网站提供自定义的插件内容，获得代码如下：<!-- weather_plugin --><script type="text/javascript"> WIDGET = {FID: 'xxxxxxxxxx'}</script><script type="text/javascript" src="https://apip.w...
2020-02-29 15:16:02
1780
3
原创 访问阿里云api遇到的问题
前前后后遇到了些问题，记录如下提示没有认证 / 没有授权（unauthorized）， 原因是不知道阿里云认证的Appcode该写在哪里，之前是写在axios的auth里，结果不成功。应该是将Appcode写到header里面，格式为：headers: { 'Authorization': 'APPCODE xxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
2020-02-27 11:33:08
585
原创 用axios访问json-server的get、put、post、delete心得
get获取服务器端信息put修改数据请求。不知道是不是没有设置json-server的route内容，只能用‘…/id’作为url，来提交数据。post新增/登录数据请求。在作为新增功能时，url后面不能加参数。delete删除数据请求。需要id来作为参数...
2020-01-29 21:59:37
1749
原创 在Dialog组件里引用不到ref属性
在做一个点击编辑数据栏，然后弹出Dialog框，显示两个input，在其中placeholder是之前的值想到用ref引用元素赋值，但总是提示ref元素undefined。搜索过后得以解决用$nextTick，这个的功能就是等所有的DOM元素节点都渲染完成以后才执行其里面的方法，不然获取不到Dialog里面元素的ref值如上图，就能解决Dialog里面引用ref的问题...
2020-01-29 09:49:56
1619
原创 icon元素上事件的绑定与解绑
使用了一个Element UI中tree控件，tree里用icon元素增加了新增、编辑、删除功能，但在第一次新增还没有完成输入前，又可以继续点击其他的新增，这样的用户体验一点也不好。使用获取元素，再用 元素.onclick = " "，这样并不起作用。因为icon是以伪元素的形式存在的，这样是无法获取事件的。研究了一下发现，元素本身：pointer-events: none;禁用点击事件...
2020-01-28 17:50:41
864
原创 el-container布局不正常
按照官方文档直接复制过来，发现head和aside、main、foot在同一行问题排查查了下官网的文档，发现这样一项说明分析原因是：将head、aside、main、foot封装成了独立组件，封装成组件后，el-container中没有了el-footer和el-header，导致子元素排列方向默认为horizontal问题解决在el-container上增加 direction="v...
2020-01-28 17:49:44
1200
原创 使用Dialog/Tooltip组件时，不能正常显示
在表格里最后一列加入了“操作”列，打算在其中添加一个“详情”，单击后，弹出一个框来显示内容详细信息。但不论是Dialog，还是Tooltip都出现一个问题，弹出来黑色的一片，却没有内容，如下图：搜索后，找到两个办法来解决：方法一：取消 el-table-column中的 fixed=“right”方法二：在Dialog中加入属性 :append-to-body =“true”在ap...
2020-01-28 17:49:10
1277
1
原创 用Message功能遇到提示框内为空
在做会员消费功能时，用了判断操作。在“取消操作”时用了this.message({ message: '操作取消', type: 'warning'})但测试的结果，弹出了消息窗口，但里面的内容为空。搜索过后，发现网上的解决办法，并不是针对我的情况。我用的是全局引用Element UI，不是单功能引用。将代码再次重新输入一遍后，发现问题解决了。可能是一个bug，记录下来。...
2020-01-28 17:41:29
1080
原创 Vue3.0报错error: Unexpected console statement (no-console) 解决办法
写项目过程中用ESLint遵守代码规范很有必要，但是对于一些规范也很是无语，比如：‘Unexpected console statement (no-console)’，连console都不能用，这就很抓狂了。其实增加一行代码即可。修改package.json中的eslintConfig:{} 中的 “rules”:{}，增加一行代码: “no-console”:“off”原帖地址：https...
2020-01-28 17:23:40
234
原创 Vue router报错:NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}的解决方法
在使用Element UI 时点击同一个路由，控制台报错，但不影响使用解决方法如下：在引用vue-router的文件中添加一段代码const originalPush = Router.prototype.push;Router.prototype.push = function push(location) { return originalPush.call(this, ...
2020-01-28 17:22:54
603
原创 Vue Router相对路径重复点击问题
在练习vue + vue router + element ui 时，做了个侧边栏（aside :router=true），但在点击选项时，发现第一次正常，但点击多次时，地址栏不断增加重复，就无法正常浏览了。后来发现是路径写成了相对路径这时，只需要在相对路径最前面加上“/”就成功解决了。...
2020-01-28 17:21:59
650
1
原创 VueRouter路由返回上一条问题
在使用 element page-header这个组件时，其中有个“返回”，写了goBack(){ this.$router.back(-1) }路径上虽然改变了，但是页面并没有变化。搜索得知：需要在router-view的页面中加入监视项watch:{ $route(to,from){ }}但，出现了错误提示error: ‘to’ is defined ...
2020-01-28 17:01:52
569
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人