爱技术的大仙-CSDN博客

原创 vue element-ui 表格table列求和（合计行）

element-ui 表格table列求和

2022-10-31 11:23:13 7802

原创纯前端excel导出，并且前端自定义excel格式

纯前端excel导出也就是表格导出自定义excel格式

2022-10-12 16:26:23 790

原创 vue异步树点击父节点勾选框自动展开已经勾选上子节点，类似勾选父全选

vue 异步树点击父勾选框全选以后回显

2022-08-15 16:24:44 796

原创在已经知道表格列勾选一个显示一列

react 已经知道了表格列多选选一个显示一个

2022-06-29 21:10:37 140

原创 elementUI-Tree-懒加载树的选中与回填

这是异步el-tree 回显

2022-06-17 14:08:34 1817 1

原创 table trtd tbody

<template> <div class="view-table"> <table border="1" > <tr class="tr"> <td>指标名称</td> <td>时间</td> <td>指标状态</td> <td>企业数量</td> <

2022-05-24 15:06:25 196

import React from 'react';import {Button} from "antd";const Demo = () => { let lastVal =null // 记录下上次的值 const getValue = (val) => { const thisValue = lastVal ==val ?'' :val // 先把上次的值传给这次 lastVal =thisValue

2022-05-23 21:05:28 168

原创原生打印js

import React from 'react';import {Button} from "antd";class Example extends React.Component { constructor(props) { super(props); this.state = { printType: 1, }; } // 原生打印 printPartFn = () => {..

2022-05-20 23:49:17 507

原创多文件上传，文件夹上传

<template> <div> <el-upload v-loading="loading" class="upload-demo" action="*" :on-remove="fileRemove" :on-change="fileChang" :http-request="uploadFile" accept="" :before-

2022-05-18 23:07:55 421

原创 vue实现列表自动滚动、向上滚动的效果（vue-seamless-scroll）

第一步进行安装npm install vue-seamless-scroll --save - 在main.js直接导入使用```javascriptimport scroll from 'vue-seamless-scroll'Vue.use(scroll) - 建立了一个Test.vue来使用(结合element-ui中的表格来一起实现的)```javascript<template> <div id="app"> <div class..

2022-05-12 21:57:27 3120 2

原创多功能React影像组件(拖拽、水印、缩放、切换、旋转)

yarn add cxj-react-image// npm i cxj-react-image**import ImageModal from 'cxj-react-image'; <ImageModal src={imageList[currentImageIndex]} {/* 当前图片路径 */} next={() => this.next()} {/* 控制下一张 */} prev={() => this.prev()}

2022-05-03 00:57:28 644

原创 React基于antd Table实现可拖拽调整列宽的表格

实现功能1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无横向滚动条，公司项目特殊需求）2：当容器宽度变化时，保持当前列宽的分配比例，等比缩小3：拖动过程中不进行列宽的调整，只有释放之后再进行列宽调整效果图见目录结构：在这里插入代码片useTableCol.tsx: 处理表格列的宽度计算等相关逻辑import { useMemoizedFn, useSafeState } from 'ahooks';import type { ColumnType } from 'antd/es/ta

2022-04-30 16:57:59 4024

原创 Hooks中父组件中调用子组件方法

/* child子组件 */// https://reactjs.org/docs/hooks-reference.html#useimperativehandleimport {useState, useImperativeHandle} from 'react';...// props子组件中需要接受refconst ChildComp = ({cRef}) => { const [val, setVal] = useState(); // 此处注意useImperativeHand

2022-04-19 21:03:53 517

原创前端导出数据

这是不依赖分页document节点导出1.安装依赖cnpm install -S file-saver xlsxcnpm install -S script-loader2.在公共组件中引入import XLSX from "xlsx"import FileSaver from 'file-saver'3.使用封装的公共组件<template>  <el-button type="success" icon="e

2022-04-07 12:15:24 2144

原创将数组里某个属性相同的对象合并成一个数组

var array=[ {id:1,name:'小明',sex:'男'}, {id:2,name:'小刚',sex:'男'}, {id:3,name:'小红',sex:'女'}, {id:4,name:'小花',sex:'女'}, {id:5,name:'小甜甜',sex:'女'}, ] var obj={},newArr=[]; array.forEach(function(item,suffix){

2022-04-05 15:21:25 1605 1

原创 el-table高亮显示

<el-table stripe v-loading=“loading” class=“tables” :data=“esopData” @row-click=“clickData”highlight-current-row:row-style=“rowClass”:row-class-name=“tableRowClassName”@current-change=“handleCurrentChange”@selection-change=“handleSelectionChange” :

2022-04-04 22:10:27 1915

原创 Antd 不能选择今天之前的日期

{/* 不能选择今天之前的日期 */} <DatePicker showTime allowClear disabledDate={isBefore} style={{ width: '100%' }} ></DatePicker>import moment from 'moment'// 判断传入时间是否小于今天0时0分0秒0毫秒的时...

2022-03-25 20:26:20 799

原创后端返回状态，前端显示对应的值，以及颜色

const STATUS_TYPE: any = { 1: { color: '#f50', text: '待提醒' }, // 1代表后端返回的字段 2: { color: '#87d068', text: '已提醒' }, 3: {color:'',text:'全部'} } console.log(STATUS_TYPE[1].text) //待提醒 console.log...

2022-03-24 21:26:34 1105

原创时间一开始就显示一年的开始到结束或者点击重置

import React, {useState, useEffect} from 'react'import {Button, DatePicker, Form, Select, Card} from "antd";import moment from "moment";const {RangePicker} = DatePickerconst {Option} = Selectconst Demo: React.FC = function () { const [form] = F.

2022-03-24 20:53:07 259

原创 react 动态获取年月日

import React, { Component } from 'react';class DateSelect extends Component { constructor(props) { super(props); this.state = { yearList: null, monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], dayList: null, selectYea

2022-03-22 22:26:25 1917

原创 vue动态获取年月日类似级联

<template> <div class="date-pickers"> <el-select class="year select" v-model="currentDate.year" @change='judgeDay' placeholder="年"> <el-option v-for="item in years" :key="

2022-03-22 17:51:59 1371

原创 el-tree 跟el-table连用，el-tree每选一个el-table多一列

<template>  <el-container> <div class="card2"> <div class="serchWrap"> <div class="left"> <el-form :inline="true" :model="listQuery"

2022-03-09 16:49:29 1582 1

原创富文本上传的html格式的显示在table中只显示文字

const delectHtml=(description)=>{ description = description.replace(/(\n)/g, ""); description = description.replace(/(\t)/g, ""); description = description.replace(/(\r)/g, ""); description = description.replace(/<\/?[^>]*&gt..

2022-02-10 10:58:57 415

原创 vue element视频上传以及进度条

<div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</span> </p> <div class="pic_img"> <div class="pic_img_box"> <el-up

2022-01-26 11:05:13 709

原创 PDF预览

import {useState} from "react";import {Document, Page} from 'react-pdf';import Pagination from "antd/es/pagination";import {pdfjs} from 'react-pdf';import {Button} from "antd";pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/p

2022-01-12 15:25:07 217

原创 Vue.js 第三方常用插件盘点

vue-lazyload 图片懒加载插件地址：https://github.com/hilongjw/vue-lazyloadDemo：http://hilongjw.github.io/vue-lazyload/1、安装：cnpminstallvue-lazyload–savesrc/main.js 导入import并使用use插件：importVueLazyloadfrom’vue-lazyload’Vue.use(VueLazyload)//也可以配置一些选项,建议使用这种配置方式，配

2022-01-06 17:28:48 843

原创 javascript鼠标双击时触发事件大全

javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3、N2 鼠标点击时触发此事件ondblclick IE4、N4 鼠标双击时触发此事件onmousedown IE4、N4 按下鼠标时触发此事件onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件onmousemove IE4、N4 鼠标移动时触发此事件onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件

2022-01-04 16:32:05 9022

原创 vue/uniapp - 返回上一页并onLoad刷新数据

methods:{ back() { uni.$emit('refreshData'); uni.navigateBack({ delta: 1 }) }}// 这是换回到哪个页面就使用这个方法控制刷新onLoad() { // 正常进入该页面的获取数据 this.getData(); // 从详情页返回该页面的获取数据 uni.$on('refreshData',() => { this.getData(); })},methods:{ getDat

2021-12-31 16:13:30 1723

原创【无标题】Cookie 封装

import Cookies from 'js-cookie'const TokenKey ='Admin-Token'export function getToken(){return Cookie.get(TokenKey)}export function setToken(token){ return Cookie.set(TokenKey,token)}export function removeToken(){return Cookie.remove(TokenKey)

2021-12-29 16:31:39 425

原创基于react的拖拽组件库react-beautiful-dnd 与功能组件一起使用

import React, { useState } from "react";import ReactDOM from "react-dom";import styled from "@emotion/styled";import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";import type { Quote as QuoteType } from "../types";// 生成一个数组co.

2021-12-28 10:43:57 1004

原创基于react的拖拽组件库react-beautiful-dnd 一个简单的垂直列表

// 用的时候先安装react-beautiful-dndimport React, {Component} from "react";import {DragDropContext, Droppable, Draggable} from "react-beautiful-dnd";// 生成一个数组const getItems = (count:any) => Array.from({length: count}, (v, k) => k).map(k => ({

2021-12-28 09:52:35 746

原创 Canvas

Canvas介绍1.canvas是html5的一个新标签，属于h5的新特性2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo3.它是通过javascript来画的，即脚本绘制图形canvas可以用来干啥呢？1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas）3.广告banner的动态效果非常适合用canvas制作4.canvas

2021-12-24 10:55:44 283

原创 react antd list用法

在这里插入代码片```import React, { useState, useRef, useEffect, useCallback } from 'react';import { PageContainer } from '@ant-design/pro-layout';import { Button, Card } from 'antd'import { FormattedMessage, formatMessage } from 'umi';import { AlipayOutlined.

2021-12-23 14:43:55 1413

空空如也

空空如也