- 博客(35)
- 资源 (1)
- 收藏
- 关注
原创 vue2使用ag-grid表格
根据官方文档说的AG Grid no longer supports Vue 2. The last version to support Vue 2 is AG Grid v31.3.,目前只有v31.3.版本支持vue2。我这只是皮毛,基础用法,ag-grid还有很多很多功能属性有待探索。1、包的引入,我与官方给的不一样,因为我按照官方方法报错了,3、代码中的css包括修改表头背景、表头文字居中、表格边框。2、需要勾选列,要在columnDefs里面配置这一列。1、在vue组件中引入使用。
2024-09-11 10:14:33 1105
原创 键盘方向键移动当前选中的table单元格,并可以输入内容
但是,这样是有弊端的,代码中也能看出来,对于ctrl+,alt+这些快捷键的功能我没有模仿出来,可能跟个人能力有关,而且就算有办法我觉得可能也太复杂了(不想折腾),还有就是很重要的一点,他没办法输入中文,因为我是监听键盘按下的事件,然后获得它的key,那用户想输入中文,我也只能获取到一个一个的英文字母(本人也想过偷懒,因为这个系统这里的表格大多数是不用输入中文,少数有中文,后面闲着没事,就问了chat gpt得到一些灵感)。有类似于这样的表格,用的<table>标签。
2023-11-17 10:25:17 771
原创 文件流实现下载、预览
公司系统出于安全性考虑,不允许控制台出现文件地址,避免有人把地址复制给没有该文件查看权限的人。所以只能后端返回文件流。上面这个方法只适用于预览图片和后端可以转为pdf的word文档,excel和其他office文件没法实现。然后是预览,文件有word类型和图片。我们的word是由后端把文件转为pdf类型,饭后返回pdf文件流。
2023-11-06 16:52:19 267
原创 Echarts散点图连接所有点
他使用的方法就是把所有点用echarts自带的markLine连接起来。这样做需要手动遍历所有点,根据每两个点的坐标,形成一条线段。因为我这个图数据量很大,从它光是那些点就可以连接成一些线段就可以看出,个人觉得多少性能不太友好。需求要用数据实现这样一个图,试过折线图,效果可以说大相径庭。然后试了散点图,刚开始根据官方示例。用户给的数据只能形成上面那种效果。然后我就致力于把这些点连起来。以上其实是我走的弯路,其实散点图本来就可以连接所有点的。来做的,它就是一个一个的点,没连接起来,
2023-08-01 11:08:26 1135
原创 前端面试-笔试题
1、如上的手写递归(我自己写的,可能不准确);2、JSON的序列化和返序列化:JSON.parse(JSON.stringify());3、第三方库:lodash的cloneDeep:_cloneDeep(),jQuery的extend:$.extend(true,{},obj)。在对于对象或数组中含有函数或循环引用的情况下,使用可能会出错。因为 JSON 格式本身不支持存储函数和循环引用,所以在进行序列化和反序列化操作时会忽略掉这些内容,导致深拷贝不完整或出现异常。
2023-03-29 17:07:09 315
原创 js实现常见算法
二分法(又称折半查找,Binary Search),是一种在有序数组中查找某一特定元素的搜索算法。二分法通过将整个数组不断地对半拆分来排除掉不可能存在目标元素的那一半部分,直到找到目标元素或者确定不存在为止。
2023-03-24 15:00:34 82
原创 vue-响应式原理-Object.defineProperty监听数组和对象
function viewChange(type){ console.log('update view:'+type)}const originalProto=Array.prototype//Object.create()创建一个新对象,原型指向originalProto,扩展新方法不会影响原型const arrayProto=Object.create(originalProto)//克隆Array的原型const methodsToPatch=['push','pop','shif.
2022-04-15 16:52:12 1207
原创 antd pro+umi项目demo
文件下载https://download.csdn.net/download/ifmushroom/24131135
2021-09-22 10:56:51 311 1
原创 React+Antd-ProTable
后面部分的表头由接口返回,数据结构: //处理:数据请求 const handleRequest = async (params) => { const otherParams = formTrimParams(formRef.current.getFieldsValue()) const res = await getUserList({ page: params.current, row: params.pageSize, ...
2021-09-09 15:22:10 461 1
原创 React+antd Table Date
要求表头显示本周剩余的日期(包括今天)+本周后四周的日期,第一行是当前日期是今年的第几周,第二行是周几,第三行是日期import {Card, Col, message, Row} from 'antd';import React, {useEffect, useRef, useState} from 'react';import ProTable from '@ant-design/pro-table';import {connect} from 'umi';// import * ...
2021-09-09 14:29:10 365
原创 JS Date
获取每月有多少天(传入当前日期,获得当前月份有多少天,如:getMonthLength(new Date()) function getMonthLength(date) { // 获取每月有多少天 let d = new Date(date) // 将日期设置为下月一号 d.setMonth(d.getMonth()+1) d.setDate('1') // 获取本月最后一天 d.setDate(d.getDate()-1) return.
2021-09-03 11:41:04 121
原创 Taro 小程序 NODE-ENV 环境变量
cross-env:需要安装依赖,使用cnpm i cross-env -Dpackage.json:{ "name": "myApp", "version": "1.0.0", "private": true, "description": "我的taro项目1", "templateInfo": { "name": "default", "typescript": false, "css": "sass" }, "scripts": {
2021-09-03 11:22:31 4458 2
原创 React 函数组件 离开页面清除定时器 useRef()
页面需求:页面有一个下拉框,用于给请求接口的参数赋值;每隔一定时间就要重新请求接口,刷新页面数据;离开页面,清除定时器。
2021-07-20 10:47:39 6758 1
原创 Vue项目 HBuilder X打包H5 APP
一、准备项目HBuilder X中:新建->项目->5+app,自定义项目名称、保存路径,选择模板“默认模板”,创建。删除掉默认模板自己生成的无用的css,img,js,index.html文件夹和文件。将需要打包APP的vue项目,先npm run build,将生成的dist文件夹中的static和index.html复制到刚刚新建的5+APP中。二、APP配置项目的mainfest.json文件中进行配置APP:1、基础配置:应用标识APP ID是登录HBuilde
2021-07-02 11:21:42 3264 1
原创 React下载文件-Base64类型数据
请求数据:const downloadFile=()=>{ Axios({ url:'xxx',//接口地址 method:'',//请求方式 headers:{},//请求头 data //请求参数 }).then(res=>{ let reader=new FileReader() const blob=new Blob([res.data]) reade.
2021-06-30 17:25:52 1084
原创 React导出后端传的Excel文件
后端响应的数据格式文件是由后台生成,传给前端是这样的文件流。前端请求Axios({ url:'xxx', method, responseType:'blob', headers:{...}, data //查询导出数据的参数}).then(res=>{ const blob=new Blob([res.data]) let reader=new FileReader() //将blob格式的响应数据转换为原本的格
2021-05-24 13:54:43 1236
原创 React-Antd Pro-登录 记住密码
使用Cookie封装工具方法export const setCookie=(name,value,expiryDate)=>{//参数:cookie的key、cookie的value、存储时间 let currentDate=new Date() currentDate.setDate(currentDate.getDate()+expiryDate) document.cookie=name+'='+value+'; expires='+currentDate /
2021-03-31 14:49:50 1236 2
原创 vue+element-ui 修改动态生成的表格(el-table)中的数据
客户又提需求了(/微笑)不管需求是啥,为难我就是无理取闹,哼!原本就是动态生成的el-table表格,里面的数据还要修改。意味着要修改的字段名都是动态的,我需要动态的声明input框绑定的变量,其实本来以为就那么回事儿,就跟以前做得差不了太多,结果搞了一天!!!虽然是实现了,但至今没弄明白我遇到的问题是怎么肥四。<!--显示数据表格--> <div class="table_common_container lsz_content-load active-table" style=
2020-10-14 21:29:03 6520 1
原创 vue+Elment-UI 动态生成表格、动态生成搜索框
**vue+Elment-UI 动态生成表格(包括表头,表头的个数、名称都未知)、动态生成搜索框**动态生成的input搜索框: <div style="display: inline-block;margin-left:5px" v-for="(item,index) in excel_header_name_list" :key="index">{{item.excel_header_name}}:<el-input v-model="fields_value[i
2020-10-13 08:55:12 906
原创 vue EXCEL XLSX.utils.sheet_to_json()解析Excel文件
查看源码中的XLSX.utils.sheet_to_json()方法,发现有三个同名的方法,有两个参数,第一个worksheet是要解析的excel文件的工作簿对象,第二参数opts?: Sheet2JSONOpts,?表示是这个参数可有可无,不传就没有。源码如下图:export interface XLSX$Utils { /* --- Import Functions --- */ /** Converts an array of arrays of JS data to a wor
2020-10-10 18:40:49 25056 7
原创 修改Element-UI 默认样式
.active-table /deep/ .el-table .el-table__body-wrapper{ height: auto !important; }用element-ui很方便,但它的标签表面上看起来是一个,其实封装了不知道多少层,里面封装的标签的样式可能不是我们想要的。就用以上方法:其中.active-table是我自己的标签的class,/deep/后面的就是element-ui的标签自带的class。我在样式中用了!important是因为这个element-UI的标
2020-10-10 15:40:48 367
原创 Vue+Element-UI el-dialog
我们公司的前端项目都用vue+element-ui,然后像新增、编辑页面都用el-dialog弹框。我也不知道为啥都要用这个,上班快三个月了,至今我做的项目都还没涉及父子组件。emmm,咱也不敢说,咱也不敢问。问就是按照公司已有的框架走速度更快。然后呢,我就发现一个问题,如果el-dialog弹框内容过多,页面就会很长,当你第一次拉到下面,没拉回去,点击了关闭,下一次你再点击进来会发现它依旧在下面。。毫无疑问这样的用户体验贼差。其实在标签中加上属性: losk-scroll=‘false’ 和 a
2020-10-07 12:39:45 1052
原创 VUE+EXCEL实现数据导入excel文件
前端+vue+将数据写入excel最近的项目要求,按照给定的模板,将后台返回的数据(包括表名、表说明、类型、类型说明,如下图)写入excel文件我从网上找到了相关代码(参考https://segmentfault.com/a/1190000018993619?utm_source=tag-newest),但该代码只能将表头和表格数据写入。通过研究该文章中提供的代码,可以发现在Export2Excel.js文件中的export_json_to_excel(th, jsonData, defaultT
2020-10-07 12:21:54 1232
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人