el-table table vue el
快速解决element中el-dialog弹框组件垂直居中问题的方法
快速解决element中el-dialog弹框组件垂直居中问题的方法：https://blog.csdn.net/Shids_/article/details/120728973 ::v-deep .el-dialog{ display: flex; flex-direction: column; ......
关于 vue 虚拟dom 的渲染机制的一些思考
1. 虚拟dom 的渲染过程 2. vue3中 nexttick 的作用 1.虚拟dom 的渲染机制 我们在template中写的 div 和 其他的标签。不会被vue 当作是最终 渲染的dom, vue会将我们写入的标签 转化为 对象，通过diff算法，将其构造成一个虚拟树 每个树 都有一个 对应 ......
Vue实现大文件分片上传、断点续传
前言实现大文件分片上传的断点续传以及上传进度条是一个在前端开发中常见且具有挑战性的问题。本篇博客将介绍如何使用Vue框架来实现这个功能，并给出代码示例。 概述大文件分片上传指的是将一个大文件切割成多个小文件（或称为分片），然后依次上传这些小文件，最后在服务器端将这些小文件合并为原始的大文件。断点续传 ......
vue 图片转base64格式方法+将base64流数据转成pdf文件可打印的方法✔️✔️✔️
1. 图片转base64格式方法 （主要的代码）（其实用的还是FileReader） handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file. ......
Vue2 基础入门
1 Vue 1.2 第一个Vue实例（Hello Vue） 1.3 插值表达式 { 作用： 利用表达式进行插值，渲染到页面中 表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果 以下的情况都是表达式： money + 100 money - 100 money * 10 money / 10 ......
Vue大文件切片上传 断点续传
一、中等文件上传解决方案-nginx放行在我们工作中，上传功能最常见的就是excel的上传功能，一般来说，一个excel的大小在10MB以内吧，如果有好几十MB的excel，就勉强算是中等文件吧，此时，我们需要设置nginx的client_max_body_size值，将其放开，只不过一次上传一个几 ......
Mac 中安装 vue 脚手架后报错 vue: command not found
解决方案 安装 node、npm 查看 npm 全局安装位置 npm root -g 正确位置 /usr/local/lib/node_modules 修改位置 npm config set prefix /usr/local 重新安装脚手架 sudo npm install -g @vue/cli ......
el-radio或el-checkbox内容过长超出未换行的解决办法
解决办法 在el-radio或el-checkbox上添加属性： display: flex; /* 用于对齐文本 */ 在el-radio或el-checkbox的选项标签上添加属性： /deep/ el-radio__label{ white-space: normal; /* 换行 */ } ......
[Vue]React、Vue中的key有什么作用? (key的内部原理)
1. 虚拟DOM中key的作用: key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM] 随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下: 2. 对比规则: (1).旧虚拟DOM中找到了与新虚拟DOM相同的key: ①.若虚拟D ......
mysql create table and insert into via c++ and lmysqlcppconn
//create table t1 CREATE TABLE `t1` (`id` bigint NOT NULL AUTO_INCREMENT,`author` varchar(40) NOT NULL,`comment` varchar(40) NOT NULL,`content` varcha ......
vue打包体积优化
一、webpack-bundle-analyzer工具 1、安装 终端运行命令，根据包管理器自行选择命令 #NPM npm install --save-dev webpack-bundle-analyzer #YARN yard add -D webpack-bundle-analyzer 2、代 ......
一个类似于Gridster的栅格布局系统Vue组件
哈喽,我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！ Vue Grid Layout是一个类似于Gridster的栅格布局系统, 适用于Vue.js，灵感来源于React Grid Layout。 特性 可拖拽 可调整大小 静态部件（不可拖拽、调整大小） 拖拽和调整大小时进行边界检查 ......
基于Vue.js和Vanta.js的动态天空颜色效果实现
背景 最近在写一个Vue项目，想要在登录界面加一个动态背景效果，搜索之后发现了 Vanta.js（https://www.vantajs.com/ ）这个库。Vanta 可以借助 three.js (WebGL) 或 p5.js 渲染动态的3D背景效果，提供了多种预设。 几种效果都挺不错的，最终我决 ......
python sqlalchemy 动态设置表名__tablename__，一个model对应多个table
from sqlalchemy import create_engine,Column,BigInteger,String from sqlalchemy.ext.declarative import declarative_base from sqlalchemy.orm import sessi ......
vue 将html保存成pdf文件
结合 html2canvas 和 jspdf 插件处理 /* eslint-disable */ //不使用JQuery版的 import html2canvas from 'html2canvas' import JsPDF from 'jspdf' /** * @param ele 要生成 pd ......
34-Vue脚手架-组件的自定义事件（使用自定义事件优化Todo-List案例）
组件的自定义事件 1.一种组件间通信的方式，适用于 子组件 > 父组件（这里也可以使用 props 传递数据进行实现） 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 3.绑定自定义事件： 1）第一种方式，在父组件中 <!--通过父组件给子 ......
vue关于render函数如何渲染v-html
render函数如何渲染v-html，两种方式（适用于搜索关键字高亮） 例子：“互联网数据” 搜索关键字"网" ==>row.htmlStr：互联<span class="search-text">网</span>数据 render: (h, { row }) => { // 模板组件方式 retu ......
Element Plus el-tree懒加载默认选中
百度上试了很多方法，设置default-expanded-keys不生效，最后使用了下面的方法，亲测有效 const loadNode = async (node: Node, resolve: (data: AreaType[]) => void) => { if (node.level 0) { ......
el-table选中效果及动态修改
项目有个需求，是点击关联账户，弹窗显示已经关联的 ，而且表格上还要勾上 效果： 这里的交互有两条线： 1.勾选表格内容，上方标签显示和隐藏 2.删除上方标签，表格中的 该条数据去除选中效果 ......
vue中attrs的使用
vue中attrs的使用 1.attrs的作用 用来进行子孙组件之间的数据传递 接收父组件传过来，但是又没有在props中定义的数据。（class及style除外） 2.父子组件之间数据传递的用法 爷爷组件-grandpa： <template> <div> <span>爷爷</span> <Son ......
vue3 + vite 的Excel表格的导入导出
一、安装XLSX插件 yarn add xlsx 或者 npm i xlsx 二、引入插件 在你需要的页面或者在main.js中引入 import * as XLSX from 'xlsx' 三、导出Excel 3.1 核心api ① xlsx.utils.book_new() 新建工作簿 ② xl ......
Vue2 实现印章徽章组件
Vue2 实现印章徽章组件 需要实现的组件效果： 该组件有设置颜色、大小、旋转度数和文本内容功能。 一、组件实现代码 <template> <div class="first-ring" v-bind="getBindValue" :class="getStampBadgeClass" :style ......
[WEB安全] XSS攻击防御 Vue
一、概念 XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。 这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。 攻击成功 ......
[Vue]列表渲染v-for
1. 用于展示列表数据 2. 语法：v-for="(item, index) in xxx" :key="yyy" 3. 可遍历：数组、对象、字符串（不常用）、指定次数（不常用） <body> <div id="root"> <!-- 遍历数组 --> <h2>人员列表</h2> <ul> <li ......
css控制table首列固定内容滚动
table tbody { display: block; height: 500px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; table-layout: fixed; box-sizin ......
33-Vue脚手架-浏览器本地存储（使用本地存储优化Todo-List案例）
什么是网络存储 在HTML5之前，开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。 在HTML5发布后，提供了一种新的客户端本地保存数据的方法，那就是Web Storage，存储内容大小一般支持5MB左右（不同浏览器可能还不一样），它允许 Web 应用程序在用户浏览器中实现本地存储机 ......
el-upload上传必填验证
<el-form-item label="excel文件" prop="file"> <el-upload style="display: inline-block;margin-left: 10px" class="upload-demo" ref="upload" :file-list="add ......
el-upload上传附件并携带其他参数
<el-dialog title="导入" :visible.sync="showExportDialog" > <el-form :model="addForm" ref="addForm" size="small" :rules="rules" label-width="130px"> <el- ......