入坑笔记
1.element-ui el-input输入框加单位
el-input 如果需要添加单位显示,可以在el-input中插入一个插槽即可实现
代码:
<el-form-item label="销售额:" prop="orderAmount" label-width="120px">
<el-input v-model="form.orderAmount" style="width: 300px;">
<template slot="append">元</template>
</el-input>
</el-form-item>
效果如图:
2.表格搜索结果为空时显示图片
使用element-ui做表格搜索或分类查询的时候,当结果为空,可以放一张图片,如下图:
实现代码:
<el-table :data="userList" border style="width: 100%" :row-class-name="setClass">
<el-table-column prop="headimgurl" label="头像" width="180" align="center">
<template scope="scope">
<el-avatar shape="square" :size="50" fit="fill" :src="scope.row.headimgurl"></el-avatar>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" align="center">
</el-table-column>
<el-table-column prop="class" label="班级" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center">
</el-table-column>
<el-table-column prop="cTime" label="创建时间" align="center">
</el-table-column>
<el-table-column prop="productUrl" label="项目" align="center">
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="240px">
<template scope={row}>
<el-button type="info" v-if="buttons.indexOf('read') !== -1" plain size="mini" @click="$router.push({path:'/StudentManager/studentProfile'})"><i
class="el-icon-view"></i>查看</el-button>
<el-button type="info" v-if="buttons.indexOf('edit') !== -1" plain size="mini" @click="editUserInfo(row)"><i
class="el-icon-edit"></i>编辑</el-button>
<el-button type="danger" v-if="buttons.indexOf('delete') !== -1" plain size="mini" @click="delUserInfo(row)"><i
class="el-icon-delete"></i>删除</el-button>
</template>
</el-table-column>
// 在此处可以使用slot="empty"的方式插入为空时显示的图片
<div slot="empty">
<img src="../../../assets/blank/blank.png" alt />
</div>
</el-table>
3.require.context的简单使用
require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则
const storeModules = require.context('./modules', false, /\.js/)
const langs = require('./modules/langs.js')
console.log(storeModules)
console.dir(storeModules)
console.log(storeModules.keys())
console.log(langs)
调用keys方法可以获取到目录的字符
使用keys返回目录的数组,并调用forEach方法遍历目录,将每个路径传入storeModules中,结果如下
storeModules.keys().forEach(filename => {
console.log(storeModules(filename))
})
最终结果与 const xxx = require(‘./xxx/xxx.js’) 返回结果一致
4.Number对象转换数字精度丢失问题
在项目中和后台对接时候,关于会员的接口中都需要向后台传一个vipId的字段,去查会员的一些基本信息,这个vipId是一个自增id,当时应后台要求传入数字类型而使用Number转换了一下。但是后期快上线的时候由于导入客户提供会员数据及某些原因,使vipId达到了惊人的1612179754378615606,请求到的数据也不正确,后面排查发现vipId已经超过Number对象转换的最大整数:Math.pow(2,53)。导致传给后台的vipId一直都是有误的,最终还是将其全部替换成字符类型,问题才得以解决。
5、简单版查找数组最大最小值
const array = [2,1,54,32,21,34,67,3,53,12,87];
// 最大值
array.reduce((a,b) => a > b ? a : b); // 87
// 最小值
array.reduce((a,b) => a < b ? a : b); // 1
6、数组去重
const array = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// 输出: [5, 4, 7, 8, 9, 2]
7、小程序scroll-view无法下拉
在使用uniapp开发微信小程序,使用 scroll-view 组件做分页查询时遇到一个问题,明明已经开启了下拉刷新属性,并且配置好各个方法,但是使用时却无法下滑
由于页面使用了自定义头部,所以 scroll-view 组件高度只能动态获取,尝试将height属性写死,发现组件可以正常下拉操作了
但是height属性肯定不能去写死,所以最后想到一个简单的办法,就是在data里面给height初始化一个比较大的值,后面再去更新这个值,问题解决。。。
持续更新中。。。