- 博客(89)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 ELEMENTUI 之EL-TABLE 的一点小总结[表头内容错位[自定义BORDER问题][自定义列宽度]
标签： vue HTML5 JavaScript html css前端在开发PC 端项目时，现在用的比较多的就是Element UI,而在PC端管理系统中，Table 可以说是必不可少，刚开始使用对table没有做过多的处理，可是在需要做一些处理时，对其文档不熟悉使用不熟练总出现一些意想不到的问题。表头和内容错位：解决在全局中添加 样式可解决：.el-table th.gutter {display: table-cell !important;}自定义table 边框及单元格边框
2022-05-25 15:50:11
1252
原创 企业微信自建应用
1.第一步，获取授权code，这个在原来首页开发不太合适，在进入首页前新建页面进行授权，点击页面按钮进行授权。需要拼接的授权url。其中corpid是企业id，redirect_uri是授权后跳转的页面，state是自建应用的AgentId，其他是固定值，可以查看文档。https://open.weixin.qq.com/connect/oauth2/authorize?appid=corpid&redirect_uri=codeurl&response_type=code&sc
2022-05-25 09:41:35
3837
4
转载 vuex使用
vuex使用教程–入门篇什么是vuex？按照官网的说法，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex的组成vuex由五个部分组成，分别是State，Mutation，Action，Module，Getterstate共享状态Mutation更改vuex的store中state的唯一方法，只有通过提交mutation才能修改状态（变量值）Action类
2022-05-24 17:56:38
89
原创 创建基于vue的H5
技术选型公司现在需要开发移动端的h5，使用现在比较流行的vue 2.0开发，使用的脚手架是Vant2，网络访问使用的是axios，路由跳转使用的是vue-router，开发工具是vscode，vue clivuevuexvue中使用axios最详细教程vue router环境搭建引入库我这里已经安装好了nodejs，并且已经配置好了淘宝镜像npm config set registry https://registry.npm.taobao.orgvscode不能直接在工具里创建项
2022-05-24 11:50:21
4421
1
原创 uniapp中引入自定义图标
如何在uniapp中使用icon1.在iconfont官网找你想要的图标2.在你的uniapp项目中粘贴这段代码，粘贴在app.vue文件的style标签内注意：粘贴过来需要加https3.在App.vue的style标签内增加需要使用的图标引用content 控制来源：...
2022-05-07 17:36:31
1466
原创 微信小程序获取uni.showActionSheet中选择的值
this.reasonList=['多拍了','不想要了','其他原因'] actionTap() { uni.showActionSheet({ title: '退货原因', itemList: this.reasonList, itemColor: "#999999", success: res => { // res.tapIndex获取到选择的数组的位置 //list[res.tapIndex])获取选择的对应的值； console.l
2022-05-07 10:42:25
979
原创 uniapp小程序底部弹出窗口
实现效果：父组件：<Screen :show='showS' :list="serviceList" @close="close"></Screen>import Screen from '@/components/service'data(){return {showS:false,list:[] }}methods:{ getShow(){ this.showS=true }, close(e) { this.showS = e },}
2022-04-25 16:49:54
3080
原创 uniapp 微信小程序分享、分享朋友圈功能
页内自定义分享按钮当页面js上没有添加事件“onShareAppMessage”，右上角‘…’不会出现“转发”事件。如果有事件，但是没有定义事件内容的话，转发的卡片则是当前页面的截屏信息。官方文档：https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage方式1：小程序右上角原生菜单自带的分享按钮方式2：或者是在页面中放置的分享按钮 <button class="shareBtn" type="default"
2022-04-20 18:18:51
31967
8
原创 【ElementUI】el-table可编辑/输入框 卡顿性能问题解决案
问题背景用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。原因分析el-input组件实例数量过多。el-input的v-model在表单输入时频繁触发更新事件。解决思路3. 用原生input替换el-input，以减少el-input组件实例。并在原生input上应用el-input的样式，使前者后者外观一致。在v-model指令上追加.lazy修饰符，使实例数据仅在失去焦点时更新，减少触发次数。此时光标进入输入框，执
2022-03-24 15:08:23
4813
转载 js object相加_js 对象数组属性相同的值合并相加
对象数组根据某一相同项示例为travelerEmpNum，合并其他属性为一个数组，主要包括对象数组根据某一相同项合并其他属性为一个数组，为项目需求对象数组示例let rows = [{"travelerName":"王晓&陈辰","travelerEmpNum":"1001&1002","expenseAmountTotal":1381,"invoiceAmountTotal":1381},{"travelerName":"王晓","travelerE
2022-03-18 17:19:32
799
原创 js Qrcode.js实现文字内容通过二维码展示
效果：将电子证件信息通过扫二维码展示出来点击查看证件生成二维码2. 手机端扫描得到的证件信息实现过程：首先vue index.html 页面引入2.在需要转换的组件中加入//展示二维码的div <div class="lanren"> <div id="demo"> <p class="row"></p> <p class="row"
2022-03-17 13:57:00
1940
转载 H5页面导出成pdf文件
代码：<script>import html2Canvas from 'html2canvas' //下载依赖 npm install --save html2canvasimport JsPDF from 'jspdf' //下载依赖 npm install jspdf --saveexport default { data(){ htmlTitle: '合同模板', //PDF文件命 }, created() { this.g.
2022-03-15 09:45:43
3404
5
转载 element-ui 下拉框数据太多导致卡顿、页面崩溃问题
1. 场景描述不知道你有没有这样的经历，下拉框的选项很多，上万个选项甚至更多，这个时候如果全部把数据放到下拉框中渲染出来，浏览器会卡死，体验会特别不好用人会说element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。但是有时候这种方法有时候不一定适用（1）有时候服务端数据是经过计算返回给我们的，可能返回不是特别快，体验不是很好（2）有时候数据可能只有几千条，全部渲染又不太合适，一直掉接口不是特别好（3）仅仅通过前端能不
2022-03-09 09:40:44
5326
1
转载 new URLSearchParams() 内置对象获取地址栏的参数 通过键的方式拿到值
首先声明一下 随便赋个值也行let a = new URLSearchParams(location.search);然后通过a.get()的方式输入键 拿到值就简单点吧 拿到前一个页面传过来的idlet id = a.get(‘id’);这样就可以直接拿到id了下面这个图是之前拿地址栏id的值的方式 通过window.location.search这样拿到的值是整个地址栏 还需要切割成数组 手动循环取值比较麻烦...
2022-03-04 17:14:25
412
转载 实现在vue中element-ui的el-dialog弹框拖拽
1、在 utils 中新建 directives.js 文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-di
2022-02-21 16:40:21
268
原创 通过JS将图片File转为base64并压缩
/** * * @param {需要转换的图片file} file * @param {是否返回压缩后的base64} isCompression * @param {转换成功后通过回调函数将结果返回} callback */export function imageToBase64(file, isCompression, callback) { // 判断图片类型 if (file.type == 'image/jpeg' || file.type == 'image/png'
2022-02-21 16:37:25
999
原创 JavaScript-0.5时四舍五入
我遇到的问题是Javascript在达到0.5时舍入数字的方式.我正在编写征费计算器,并注意到结果之间存在0.1c的差异.问题在于它们的结果为21480.705,我的申请将其转换为21480.71,而关税则为21480.70.这是我用Javascript看到的内容：(21480.105).toFixed(2)"21480.10"(21480.205).toFixed(2)"21480.21"(21480.305).toFixed(2)"21480.31"(21480.405).toFix
2022-02-16 16:22:57
466
原创 vue elemtui导出合并后的表格为excel
项目中表格展示：导出后的效果：只需在vue中引入 (先npm 安装)import FileSaver from ‘file-saver’import XLSX from ‘xlsx’在导出的表格中使用ref绑定方法调用 // 导出 outTab() { let fix = document.querySelector('.el-table__fixed'); let wb; if (fix) { wb = XLSX.ut
2021-12-06 16:53:33
218
转载 ES6的便捷用法
一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名
2021-11-23 11:32:31
97
转载 JavaScript 复杂判断的更优雅写法
前提我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick = (status
2021-11-18 16:25:46
131
转载 最全echarts可视化图表综合
前言在前端漫长的开发生涯中，相信大家都会遇到各种echarts图表，那么要怎么去实现这些echarts图表呢，其实可以通过echarts官方api配合vue来实现这些操作，下面将从安装到使用以及图表的配置项包括每一个环节比较容易出现的问题来为大家进行详解。安装echarts图表使用echarts图表echarts图表那些你一定会用到的配置项一、安装echarts图表echarts的安装呢其实非常的容易，简单来说只需要两步：在下载echarts时，很多人可能会遇到安装不成功或者报错的问
2021-11-18 10:05:44
2240
转载 关于element-ui中Table表格如何合并单元格
第二步：代码开撸首先在data中新建变量data() { return { skuListInfo: [ // 假数据 { id: 1, name: '普通门店', storeIds: [1, 2, 3, 4], storeIdInfo: '[1, 2, 3, 4]', productType: '1', productInfo:.
2021-10-25 14:47:12
407
原创 this.$set的用法,even loop机制
vue 中将B对象深拷贝到A对象中，如果A中需要额外新增其他属性 ，则使用this.$set(A,新增的属性名称，属性的值)//深拷贝this.user = JSON.parse(JSON.stringify(data))//新增属性this.$set(this.user,"age", 30)
2021-09-03 10:19:42
269
原创 vue上传txt文件和下载文件为txt
需求：点击上传txt文件，先读取txt文件中的内容进行展示。上传使用的是element的upload如下：<el-upload action="/" ref="upload" accept=".txt" :before-upload="beforeUpload" :disabled="this.fileList.length !== 0" :default-fi
2021-08-12 17:29:44
1128
原创 vue中过滤数据小数点前使用千位分隔符 小数点后不使用且保留位数
import Vue from 'vue'//全局过滤器，金额千分位Vue.filter('moneyFormat', function (value) { if (value != undefined) { return value.toFixed(2).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); }})//全局过滤器，数量2位Vue.filter('qtyFormat', function (value) {
2021-07-02 17:32:14
889
1
原创 element ui中表格输入框回车跳到另一输入框
<template> <div> <el-button @click="add">新增</el-button> <el-button @click="save">保存</el-button> <el-form id="table-form" ref="form" :rules="rules" :model="form"> <el-table ref="table" :data=.
2021-06-04 17:41:02
1417
原创 js正则验证
export default { //金额 moneyFn(rule, value, callback) { var re = /^\d{1,12}(\.\d{0,2})?$/; if (value === "" || isNaN(value)) { callback(new Error("请输入数字")); } else if (value && !re.test(value)) {
2021-05-27 22:29:19
127
原创 element ui中form表单某一项的快速过滤
formDatas:[{ show: true, disabled: false, loading: false, type: "selectRemote", label: "商品编号", value: "gdno", placeholder: "商品编号", // change: this.gdnoChange...
2021-04-23 13:28:54
271
原创 数组对象变相赋值给另一个数组
this.form.detailList = res.map((item, index) => { return { barCode: item.barCode, gdno: item.gdno, gdname: item.shortGdname, units: item.units, inventoryQuantity: item.num, .
2021-04-23 13:25:18
238
原创 element ui 同时获取多选框的label绑定的name值和value
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css"></head><body> <div id="app">
2021-04-15 17:07:48
800
转载 svn的使用
2安装SVN2.1安装完成后，比如我想把代码放在我的电脑其中一个位置比如 ：我的项目在F盘的目录下中，我右键就可以看到如下：说明snv已经安装成功了！2.2使用checkout下载项目。先说下几个基本的命令：Checkout：把SVN仓库的代码下载到本地，比如你现在参与一个团队的项目，在你参与之前项目可能已经在运行或者技术主管也已经搭建好代码仓库，你可以通过checkout命令项目代码，获取相应的项目的代码。Update：在你编写代码的过程中，项目参考者很可能已经提交过代码到SVN服务器，而你
2021-03-26 14:02:52
85
原创 微信小程序wxs时间戳格式化多功能转换方法
在小程序开发中，我们经常遇到时间戳转换的问题，使用原生的js或者小程序自带的wxs都能解决该方法，通过大量的实例验证，我对wxs的使用方法觉得非常的方便，所以下面给大家看一下代码，通过这种方法可以轻松获取好几种类型的时间戳转换为正常时间的方法。首先把代码放到下面，方便大家复制。 myDate: function (value, type = 0){ var time = getDate(value); var year = time.getFullYear(); var mon
2021-03-10 08:48:14
2210
原创 wxs根据时间戳计算时间间隔
根据时间戳计算时间间隔在项目中经常会遇到，展现的效果就是比如：刚刚发布、1天前发布、33天前发布或者1年前发布，这种效果相信大家在微信小程序或者app及网站中经常能够遇到，这里给大家分享一个使用wxs写的时间间隔的计算方法使用过微信小程序的同学应该都知道，wxs的写法和JavaScript的写法还是不同的，在js中获取时间戳只需要Date.now()或者new Date().getTime()即可，但是wxs获取时间戳的方式是不同的，小程序是使用getDate().getTime()完成的，就是写法结构不
2021-03-10 08:42:52
568
原创 js时间戳转化为时间
一定要看好了，这个是js的处理时间戳的方法，不是wxs的处理时间戳的方法，如果找wxs的处理时间戳的转换方法，看下面的文档，下面就把多更能方法亮出来，方便大家学习使用。function myDate (value, type = 0){ var time = new Date(value * 1000); var year = time.getFullYear(); var month = time.getMonth() + 1; var date = time.getDa
2021-03-10 08:40:23
2857
原创 $router和$route的区别
$router是一个VueRouter的实例 可以导航到不同的路由里route是route是route是router跳转到的当前一个对象，里面包含该对象的path、query、name 、params用法 ： this.$router.push() 跳转到指定的url 会向history栈添加一个记录 点击后退会返回上一页面1、this.router.push(path:′/detail′,query:)this.router.push({path:'/detail',query:{}}) t
2021-02-20 14:21:38
214
原创 Vue中provide和inject 用法
1.概念成对出现：provide和inject是成对出现的 作用：用于父组件向子孙组件传递数据 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据2.简单来说 provider/inject：简单的来说就是在父组件中通过provider来提供变量，然
2021-02-07 17:16:27
868
原创 前端响应式原理
前端响应式原理：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面方案：1.媒体查询：CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。@media screen an
2021-02-07 16:29:16
1210
git flow的基本概念及使用.md
2020-03-09
git 的基本概念及命令使用.md
2020-03-09
linux的基本概念及指令.md
2020-02-04
YoudaoNote.exe前端学习后总结的面试题
2019-10-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人