vxe-table 实现根据单元格渲染的内容自动渲染成统计图、折线图、拼图等图表
vxe-table 实现根据单元格渲染的内容自动渲染成统计图、折线图、拼图等图表
效果
代码
<template>
<div>
<vxe-grid
v-bind="gridOptions"
@menu-click="menuClickEvent">
</vxe-grid>
</div>
</template>
<script>
export default {
data() {
const gridOptions = {
bor ...
JavaScript 中的 map、parseInt 与 NaN:一场关于类型转换与函数调用的深度解析
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
引言:一个看似简单的陷阱
在 JavaScript 的日常开发中,我们常常会遇到这样一段“经典”代码:
console.log([1, 2, 3].map(parseInt)); // 输出:[1, NaN, NaN]
乍看之下,这段代码似乎应该将字符串数组或数字数组转换为整数数组。然而,结果却出人意料——除了第一个元素外 ...
vxe-table 如何实现右键菜单异步权限控制
vxe-table 如何实现右键菜单异步权限控制,根据后端返回是数据结果来判断按钮选项是否禁用及是否显示。
使用 visibleMethod 在菜单显示时,可以精确到每一列每一行的显示隐藏与禁用控制,非常灵活,不过是同步还是异步都支持
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https:/ ...
Rachoon:基于 TypeScript 和 PostgreSQL 的自部署发票管理系统
每个月为发票管理工具付费?
其实你可以用一个开源项目,在自己的服务器上搭建发票系统,数据完全由自己掌控。
这是什么项目
Rachoon 是一个发票管理系统,专门给自由职业者和小团队用的。名字来自波斯尼亚语里"račun"这个词,就是发票的意思。
它能做这些事:
开发票和报价单
记录客户信息
跟踪哪些钱收到了 ...
JavaScript性能优化:我从50ms降到5ms的7个关键技巧
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
引言
在现代Web开发中,性能优化是一个永恒的话题。随着前端应用的复杂度不断提升,JavaScript的执行效率直接影响用户体验。我曾面临一个关键功能的性能瓶颈——初始实现需要50ms完成的任务,通过一系列优化手段成功降至5ms。本文将分享这7个关键技巧,涵盖从代码层面到运行时 ...
精美的vue流程设计器
一、vue-dawn-flow介绍
vue-dawn-flow是一款功能强大的开源流程设计器,专为 Vue.js 生态打造,完美兼容 Vue 2 和 Vue 3 框架。并且能很好的兼容vue前端所有框架。
1.1插件功能
提供了一个可视化的流程设计器,你可以在设计器中拖拽组件,连接组件,设置组件属性。
提供了多种节点类型可共筛选。
提供了节点的相关操作,比 ...
精美的Vue可视化流程设计器
一、前言
该流程设计器(vue-dawn-flow)兼容任何vue前端框架,如element ui 、element plus 、Ant Design Vue、Naive UI等。
开箱即用,完全开源。
该流程设计器提供了api、属性、事件、方法等适用功能。
二、使用方式
选择1 npm i vue-dawn-flow
选择2 yarn add vue-dawn-flow
三、文档地址
文档地址:http://1 ...
20251107
每次写类的时候都会觉得发明面向对象的人真是个天才。
今天晚上又稍微写了点,增加了碰撞伤害,现在玩家碰到怪物会回扣怪物.at血量并进入一秒的无敌状态,并且自身颜色变为白色,也是第一次体会到异步的方便之处吧。
更新后代码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF ...
前端工程化中Less第三方库中@Import的“~”和“@”用法
在前端工程化开发中经常会用到less第三方css库,其中@import指令中的~符号和@符号用于指定模块化路径,常见于Webpack等构建工具中。下面介绍使用方法:
路径解析规则:
~符号:表示模块请求,构建工具会将其解析为node_modules目录或配置的别名路径 。
@符号:通常指向项目源码根目录(如src),具体由项目配置决定 ...
DHTMLX Gantt 9.1 的核心目标——在保持稳定性能的基础上,带来更智能的时间刻度优化、更灵活的任务渲染、更高效的实时协作能力及更完善的资源管理功能。
在与众多开发者及企业客户的交流中,全球知名的前端UI控件服务商DHTMLX常常被问到:“下一版甘特图控件(Gantt) 会有哪些新功能?”事实上,对于像 DHTMLX Gantt 这样成熟且广受欢迎的组件,用户并不期待彻底的变革,而更关注使用体验、灵活度及开发便捷性的提升。这正是 DHTMLX Gantt 9.1 的核心目标 ...
vxe-table 复制单元格时如何自定义内容,自定义复制的文本内容
vxe-table 复制单元格时如何自定义内容,自定义复制的文本内容
默认情况下是复制对应 field 字段值,当需要对特定字段进行格式化或自定义时,就可以通过 copyMethod、pasteMethod 配置可以精确控制复制粘贴的所有行为以及自定义复制粘贴的逻辑控制。比如需要控制某个单元格复制后的值,本来是下拉框的键值,要转成实际值复 ...
前端开发就业课程:10个企业级项目+3000课时完整学习路线
3000+课时,10个企业级项目,覆盖HTML5、CSS3、JavaScript、Vue.js、React、小程序6大技术栈。
这套前端开发完整课程,从零基础到就业水平,所有内容都配有源代码和课件。
有人用这套课程从转行小白变成了前端开发,有人用它补齐了学校课程没教的Vue和React,还有人把里面的项目改改放进简历拿到了面试。
课程不保证你一定 ...
弃用 html2canvas!快 93 倍的截图神器
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在前端开发中,网页截图是个常用功能。从前,html2canvas 是大家的常客,但随着网页越来越复杂,它的性能问题也逐渐暴露,速度慢、占资源,用户体验不尽如人意。
好在,现在有了 SnapDOM,一款性能超棒、还原度超高的截图新秀,能完美替代 html2canvas,让截图 ...
vxe-table 如何自定义排序图标按钮,自定义排序
vxe-table 如何自定义排序图标按钮,自定义排序
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
使用表头排序按钮插槽 sort 来自定义模板
<template>
<div>
<vxe-grid ref="gridRef" v-bind="gridOptions">
<template #name ...
移动端h5适配方案
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
em + PostCSS插件
使用PostCSS插件将项目中的px单位自动转换为rem,搭配JS动态设置根字体大小(监听window.resize)。
vite配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtorem from 'postcss-pxtorem'
// https://vite.dev/co ...
CSS尺寸、盒子模型、定位、浮动与布局(Flex/Grid)
CSS尺寸、盒子模型、定位、浮动与布局(Flex/Grid)
尺寸单位: px,em,rem,fr
各单位定义
px (像素): 相对固定的单位,代表屏幕上的一个物理点。在高分辨率屏幕上,1个CSS像素可能对应多个物理像素。
em: 相对单位,相对于父元素的字体大小。如果父元素字体大小为16px,则1em = 16px。
rem (root em): 相对单位,相对于根 ...
【金融行业案例】借助DHTMLX打造高效银行排班与管理系统
作为全球知名的前端控件开发商之一,DHTMLX 一直致力于为企业提供灵活、高效的 JavaScript 界面组件。近日,DHTMLX 再次与北美软件开发商 oint Enterprises Inc. 展开深入交流,了解其基于 DHTMLX Suite 与 Scheduler 的银行员工排班系统 StaffPro® 的最新成果。该系统通过灵 ...
vxe-table 树形表格显示连接线的方式
vxe-table 树形表格显示连接线的方式
完整连接线
通过 tree-config.showLine 来启用是否显示连接线
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
showOverflow: true,
border: 'outer', ...
前端表格工具AG Grid 34.3 发布:重磅引入AI工具包,全面支持 React 19.2!
近日,全球知名的前端表格工具AG Grid 发布最新版本 v34.3!本次更新带来了全新的AI工具包(AI Toolkit)、列宽自适应与数据透视增强功能,并正式支持React 19.2,助力开发者打造更智能、更高效的数据可视化体验。
AG Grid最新版试用,请联系AG Grid官方合作伙伴慧都科技
核心亮点一览
AI Toolkit —— 基于大模型 ...
Web前端入门第 89 问:总结 8 种跨域通信处理方案
为什么会跨域?跨域是谁附加的限制?为什么 APP 不会有跨域问题?
首先跨域问题是由于浏览器的同源策略(Same-Origin Policy)导致的,基本上所有浏览器都有限制,默认情况是不允许跨域访问的!!
APP 的请求不受浏览器的同源策略限制,所以不存在跨域。类似一个服务器像另一个服务器发起请求一样,也不会受跨域影响。
想想 ...