随笔分类 - vue
摘要：1、安装依赖（Vite 环境） 首先安装解析 SVG 的依赖： npm install vite-plugin-svg-icons -D yarn add vite-plugin-svg-icons -D pnpm add vite-plugin-svg-icons -D 2、配置 Vite 解析规
阅读全文
摘要：效果图 代码 <template> <el-container class="car-head"> <el-header height="auto"> <el-form :inline="true" :model="formObj" @submit.native.prevent label-widt
阅读全文
摘要：示例图 代码 组件代码 <template> <div class="coordinate-table h-100" @paste="(e) => handleTablePaste(e)" @mousedown="handleTableMouseDown"> <!-- 拖拽起始事件 --> <tab
阅读全文
摘要：示例图 父组件代码 xsgxAxis = [] xsgYAxis = [] tableData = []; InitLoad() { const tmp1 = this.processHorizontalMerge(data1); const tmp2 = data2.map(el => ({ na
阅读全文
摘要：示例图 表体只有一列 组件代码 <template> <div class="coordinate-table h-100" @paste="(e) => handleTablePaste(e)" @mousedown="handleDragStart"> <!-- 拖拽开始事件 --> <tabl
阅读全文
摘要：示例图 第一列会出现跨行合并 父组件代码 pgxAxis = [] pgyAxis = [] verticalSpans = [] // 处理纵向合并（行合并） processVerticalMerge() { if (this.pgyAxis.length 0) { return; } const
阅读全文
摘要：示例图 实现跟excle一样复制粘贴功能 拖动选中单元格实现按delete和backspace后删除单元格 键盘箭头上、下、左、右、回车单元格会往上、下、左、右、下一格 二维表组件代码 <template> <div class="fixed-table-container" :data-insta
阅读全文
摘要：<template> <div class="resizable-container"> <!-- 上半部分内容区 --> <div class="resizable-top" :style="{ height: topHeight + 'px' }" > 上半部分内容（可拖动下方分隔线调整高度）
阅读全文
摘要：效果图 vue3.0+element-plus 拖拽效果 vue-draggable-plus 父组件使用 <column-dialog :options="fields" v-model="content"></column-dialog> 子组件 ColumnDialog/index.vue <
阅读全文
摘要：<template> <div class="table-merge-example"> <h2 class="title">Vue2 表格数据合并示例</h2> <div class="table-container"> <h3>横向合并（列合并）</h3> <table class="merge
阅读全文
摘要：<template> <div class="fixed-table-container"> <!-- 顶部固定表头 --> <div class="top-header"> <!-- 左侧表头滚动区 --> <div class="top-left-scroll" ref="topLeftScro
阅读全文
摘要：图片 实现T形2维表，上下滚动，T形左右可以各自水平滚动 底部和顶部水平滚动保持一致 实现excle复制粘贴 T形左右宽度各自撑开 代码如下 <template> <div class="fixed-table-container" ref="tableContainer"> <!-- 顶部固定表头
阅读全文
摘要：1、 创建 vue3.0 工程 1、使用 vue-cli 创建 vue create vue_test 2、使用 vite 创建 官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite vite 官网：https://vitejs.cn v
阅读全文
摘要：效果图 实现数组里选择月份，月份只能选一次不能重复 reject 方法用于从集合中移除符合特定条件的元素，返回剩余不符合条件的元素。其语法与 filter 方法相反，常用于反向筛选场景。 some 函数用于判断集合中是否存在符合特定条件的元素。其核心功能是遍历数组或对象集合，对每个元素执行回调函数，
阅读全文
摘要：vue2 + ant-design-vue1.7.8 safari 内核苹果电脑钉钉版本 7.0 及以上英文引号自动变为中文 div 上加 contenteditable="true"，实现 div 可输入功能，点击事件可能会触发新的焦点，添加 user-select: none;可解决 conte
阅读全文
摘要：// 判断环境 isWechat() { const ua: any = window.navigator.userAgent.toLowerCase(); if (ua.indexOf("micromessenger") !== -1) { // 判断是否在微信浏览器内 return true;
阅读全文
摘要：vue2 + ant-design-vue1.7.8 钉钉浏览器上滚动下拉框的时候会出现下拉框文字重叠 效果图 /* 针对钉钉浏览器的滚动重绘修复 */ .ant-select-dropdown-menu { /* 强制滚动时刷新渲染 */ will-change: transform; } .an
阅读全文
摘要：获取今天以后一月内的日期数组 效果图 // 获取今天 const today = this.$moment(new Date()); // 获取一个月后的日期 const nextMonth = today.clone().add(1, "months"); // 初始化日期变量 const cur
阅读全文
摘要：日期数组时间轴显示 效果图 <template> <div> <div class="time-line"> <span>小时的时间轴显示</span> <div class="time-box"> <div v-for="(item,index) in dateList" class="time-
阅读全文
摘要：vue 项目中添加水印效果 效果图 原文链接：https://article.juejin.cn/post/7140610844223602725 方法 1 通过 waterMark.js 实现 水印会随着页面滚动而滚动 waterMark.js const watermark = {}; cons
阅读全文
浙公网安备 33010602011771号