前端
关注
分享
扫一扫
前端相关：Node，Vue，UI等
@小匠
永远相信美好的事情即将发生！
展开
-
动态的在el-table中添加新数据（由Baidu Comata生成）
使用element-ui2.0的el-dialog组件，在dialog中有一个表格，共有四列，第一列序号，第二列变量（下拉列表），第三列显示排序（输入框），第四列是删除当前行， 表格底下是新增行的按钮，新增行后，表格就多一行新数据，默认为空，按钮底下是取消和提交按钮。由于您的问题涉及到具体的UI组件库（Element UI 2.0）和框架（Vue.js），我将提供一个基于Vue和Element UI的示例代码，用于实现您所描述的功能。请注意，以下代码是一个简化的示例，可能需要根据您的具体需求进行调整。原创 2024-05-17 10:11:43 · 610 阅读 · 0 评论 -
element-tree鼠标移入显示操作鼠标移出隐藏操作
时，我们可以通过以下方式实现鼠标移入和移出的效果。在组件的模板中，为树节点添加。需要注意的是，具体的实现细节可能因项目需求而有所不同。属性，从而控制操作按钮的显示与隐藏。原创 2024-05-16 10:54:20 · 923 阅读 · 0 评论 -
流式输出技术SSE：前后端实践
当使用ChatGPT时，模型的回复不是一次性生成整个回答的，而是逐字逐句地生成。这是因为语言模型需要在每个时间步骤预测下一个最合适的单词或字符。如果等待整个回复生成后再输出到网页，会导致用户长时间等待，极大降低用户体验。相反，逐字蹦出回复可以实现更快的交互响应。ChatGPT可以在输入消息后迅速开始生成回答的开头，并根据上下文逐渐细化回答。这种渐进式的呈现方式可以提供更流畅的对话体验，同时让用户知道模型正在工作，避免感觉像卡住了或没有响应。转载 2024-04-25 11:49:36 · 1199 阅读 · 0 评论 -
如何简化多个 if 的判断结构
编程实践中，往往连续使用多个 if 进行判断，这种代码非常冗余，也不易读，本文讨论怎么简化它。转载 2024-03-23 09:37:04 · 297 阅读 · 0 评论 -
VUE学习案例
1、基本语法：分支结构，循环结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test1</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>原创 2020-10-07 22:36:44 · 164 阅读 · 0 评论 -
搭建Vue-Cli环境，并快速建立一个项目（webpack）
1. 安装nodejs2. 检测nodejs和npm是否安装成功1、node -v2、npm -v如果出现版本号就代表安装成功3. 安装cnpm淘宝镜像站npm install cnpm -g4. 安装Vue-CLicnpm install vue-cli -g5. 快速构建项目1. 初始化（进入到准备将项目放到的目录）2. 进入项目目录（下载依赖包）异常情况：按照提示修复即可3. 运行项目访问：http://localhost:8080...原创 2020-10-09 19:48:16 · 184 阅读 · 0 评论 -
Vue+ElementUI项目搭建小案例（idea）
npm命令解释：1. 创建一个名为hello-vue的项目2. 在项目目录下初始化项目vue init webpack hello-vue进入项目目录 cd hello-vue先安装组件，在idea中会有语法提示安装vue-routernpm install vue router --save-dev安装elementUInpm i element-ui -S安装依赖npm install...转载 2020-10-11 00:26:22 · 3770 阅读 · 0 评论 -
Element-UI中，el-table动态合并多列的行
在使用Element-UI的el-table组件时，我们有时需要根据数据动态合并行或列，以更好地展示数据。在本文中，我们将介绍如何在Element-UI中实现这一功能。转载 2024-01-11 15:12:08 · 1751 阅读 · 1 评论 -
封装videoJS，可以作为Vue组件使用
【代码】封装videoJS，可以作为Vue组件使用。原创 2023-07-20 19:31:13 · 413 阅读 · 0 评论 -
el-card list卡片列表页面自适应布局
【代码】el-card list卡片列表页面自适应布局。原创 2023-03-30 10:52:31 · 9596 阅读 · 4 评论 -
数学公式语法（Mathjax语法）
数学公式语法、Mathjax语法转载 2023-01-28 16:51:19 · 2212 阅读 · 0 评论 -
el-table自定义序号为icon或者其他元素
el-table自定义序号为icon或者其他元素原创 2022-08-24 10:12:17 · 656 阅读 · 0 评论 -
【Javascript】DataURL与File,Blob,canvas对象之间的互相转换
【Javascript】DataURL与File,Blob,canvas对象之间的互相转换转载 2022-08-16 13:48:20 · 804 阅读 · 0 评论 -
window.onbeforeunload关闭/刷新页面不生效的原因
window.onbeforeunload关闭/刷新页面不生效的原因转载 2022-08-09 11:42:58 · 3985 阅读 · 0 评论 -
解决前端页面在笔记本和台式显示器比例大小不一问题（适配笔记本125% 150%缩放解决方法）
适配笔记本125% 150%缩放解决方法转载 2022-06-13 21:28:37 · 5675 阅读 · 0 评论 -
element-ui表格表头提示功能
1. 前言准备：element-uivue32. 代码实现html代码需要通过render-header进行渲染动态添加提示信息<el-table :data="list" stripe style="width: 100%"> <el-table-column prop="cameraX" label="坐标位置:X" :render-header="renderHeaderMethods"> </el-table-column>转载 2022-05-23 19:00:42 · 1586 阅读 · 0 评论 -
js数组中的对象去重
要去重的数组：[ { "itemId": 1, "itemName": "整体", "libraryId": 3, "objectName": "车行道", "categoryName": "道路感观质量评价", "categoryId": 1, "objectId": 1 }, { "itemId": 2, "itemName": "纸塑原创 2022-05-12 15:44:14 · 945 阅读 · 0 评论 -
Vue解决el-select下拉框选择值后框上不显示问题
Vue解决el-select下拉框选择值后框上不显示问题问题描述最近在做项目时用到了element-ui的el-select下拉框，下拉框数据是通过接口异步获取的，当选择某一个值后，在绑定的change事件中能够看到已赋值成功，但是框上却不显示选中的值。解决思路vue无法监听动态新增的属性的变化，需要用$set来为这些属性赋值。解决办法// 下拉框<el-form-item label="用户角色" prop="role"> <el-select v-model="ed转载 2022-05-12 11:46:12 · 12138 阅读 · 0 评论 -
Easyui如何实现combotree,输入文本及时筛选功能
easyui提供的ComboTree组件没有查找功能，如果结点多的话很不好找,想要的功能是在ComboTree中输入文字就显示出相应关键字的结点，有点像自动补全。本来的路是用ComboTreer的onChange事件来做，在值改变的时候把值取出来时进行树查找，在把搜索出来的结点显示出来，但是测试发现只有点树结点的时候才触法onChange事件,没办法百度了一个也没找到什么有用的资料。我就想怎样才能得到ComboTree文本框中的值改变事件，于是查看了一下ComboTree元素:发现实际输入的input是转载 2021-11-15 09:41:38 · 954 阅读 · 0 评论 -
修改node.js（npm）全局默认安装位置
修改默认 npm install -g pkg 安装全局模块的路径的话。需要修改4个地方。下面假设要把全局包安装到 d:/jstool/npm/ 目录下修改npm的prefix配置npm config set prefix d:/envrionments/npm/pkg修改cache配置npm config set cache d:/envrionments/npm/cache修改C:\Users\Administrator\AppData\Roaming\npm 对应的用户环境变量为 d:原创 2020-12-22 15:18:08 · 395 阅读 · 0 评论 -
npm修改全局包安装路径
1、安装方式全局安装在任何文件夹都可运行，原理是写进环境变量，每次在命令行中敲入命令时，根据环境变量的设置寻找对应的可执行程序运行。npm install -g <package_name>局部安装就是在当前项目中建立包，在当前项目中起作用npm install <package_name>2、修改全局包安装路径npm config set prefix "E:/Developer/nodejs/npm_global"npm config set cache "E:原创 2020-10-10 20:42:13 · 1649 阅读 · 0 评论 -
Vue项目部署到nginx配置
将vue项目打包生成的dist文件夹，复制到nginx目录下的html文件夹worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type application / octet - stream; sendfile on;#tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on;原创 2021-03-16 14:30:28 · 394 阅读 · 0 评论 -
vue文字公告自动横向循环滚动
关于vue文字公告横向滚动的文章网上已经有很多了，但是对我的项目的需求来说还存在两个问题要解决：是设置文字滚动的平均速度还是设置滚动的总时长？不少文章是设定了文字滚动的总时间而不是平均滚动速度，这样会造成一个问题：文字滚动的速度会和文本内容的长度的关联，文本越长，滚动越快，用户体验不好。在不同的手机端，文字滚动速度不一样，比如安卓手机上滚动的速度比ios的快，这造成用户体验不一致的情况。由于滚动的单位使用的是px，而不同的移动设备分辨率会有差别，如果用同样的滚动数值，肯定会造成速度不一致的情况。为转载 2022-04-11 09:17:51 · 11557 阅读 · 5 评论 -
vue中和风天气的使用
生成代码https://widget.qweather.com/create-simple/?token=14b7f867541144bfba4e5945189e14ab#title<template> <div id="he-plugin-simple"></div></template><script>export default { name: 'weather', mounted () { window..原创 2022-03-09 15:06:31 · 1008 阅读 · 0 评论 -
解决vue项目打包部署到tomcat时，访问成功，但是刷新后页面报404
问题描述：使用webpack打包vue后， 将打包好的文件， 发布到tomcat上， 访问成功，但是刷新该页面后报404错误。问题根源：是html5 history模式引发的问题， 具体的原因， 官方那个已经给了解释，查看 https://router.vuejs.org/zh-cn/essentials/history-mode.html解决方案：官方给的解决方案原理：要在服务端增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，则返回同一个index.html页面，这个页面就是ap转载 2022-03-09 10:47:59 · 1636 阅读 · 0 评论 -
Vue动态创建组件实例并挂载到body
方式一import Vue from 'vue'/** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(comp.$el) com转载 2022-03-08 15:46:08 · 4231 阅读 · 0 评论 -
前端相关汇总（持续更新）
function fileDownXHR(url, form) {ajaxLoading(); //发送请求前打开进度条var xhr = new XMLHttpRequest();xhr.open(‘POST’, url, true);//get请求，请求地址，是否异步xhr.responseType = “blob”; // 返回类型blobxhr.onload = function () {// 请求完成处理函数if (this.status === 200) {var blob原创 2022-01-20 09:54:19 · 136 阅读 · 0 评论 -
针对火狐浏览器的CSS样式，从而不会影响别的浏览器
针对火狐浏览器的CSS Hack:@-moz-document url-prefix() { .selector { attribute: value; }}针对webkit内核及Opera浏览器的CSS Hack:@media all and (min-width:0){ .selector { attribute: value;/for webkit and opera/ }}从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来，但并不能区分它们俩，因此转载 2021-12-15 11:44:49 · 1241 阅读 · 0 评论 -
解决在IView的对话框中使用ElementUI的多选级联组件el-cascader出现的问题
解决在IView的对话框中使用ElementUI的多选级联组件el-cascader出现的问题由于IView的级联组件不支持多选，所以需要采用ElementUI的级联组件问题：下拉选项随机性消失，点击之后看不到级联面板弹出原因：由于级联面板显示层级z-index低于Iview的model，从而遮住级联组件解决方案：在APP.vue的样式中添加：body > div.el-popper.el-cascader__dropdown { z-index: 9999 !importan原创 2021-12-14 14:34:09 · 1761 阅读 · 3 评论 -
在vue项目中使用lottie动画
首先npm安装vue-lottie:npm install vue-lottie -S在需要使用的组件里引用lottie动画的json文件：import * as animationData from '@/assets/json/data.json'import Lottie from 'vue-lottie/src/lottie.vue'注册到组件里：data(){ return { defaultOptions:{ animationData:ani.转载 2021-12-03 11:05:26 · 467 阅读 · 0 评论 -
vue文件里面使用lang=“scss“报错，@vue/cli 4.5.9
vue cli版本是@vue/cli 4.5.9vue文件里面使用lang=“scss”，各种报错，解决方法是：安装sass-loader和node-sassnpm install sass-loader node-sass --save-dev把package.json里面node-sass和sass-loader版本改成："node-sass": "^4.11.1"，"sass-loader": "^7.3.0"就可以了重新执行npm install，完美解决...原创 2020-12-24 09:00:05 · 581 阅读 · 0 评论 -
IView实现动态添加表单选项并实现高级搜索
如：<Modal v-model="advancedQuery" title="高级查询" draggable footer-hide width="650"> <Form ref="formDynamicRef" :model="formDynamic"> <FormItem v-for="(item, index) in formDynamic.items"原创 2021-09-26 16:57:45 · 747 阅读 · 0 评论 -
Vue中将文件批量下载打包成zip格式
1、下载插件import JSZip from'jszip'import FileSaver from'file-saver'2、在vue文件中使用import JSZip from'jszip'import FileSaver from'file-saver'3、下载文件以及打包方法//下载依赖// npm i axios, JSZip, FileSaver -simport axios from "axios";import JSZip from "jszip";import翻译 2021-09-22 10:30:27 · 4306 阅读 · 2 评论 -
vue面试题
常用指令:v-html: innerHTMLv-text: innerTextv-once: 只渲染一次v-pre: 不进行编译v-bind: 属性绑定(简写:属性名)v-on: 事件绑定(简写@事件)v-model: 双向绑定 表单控件 :value和@input的语法糖v-if 控制节点内容是否存在来进行显示v-show 节点存在,控制css节点来进行显示v-cloak: 防止闪烁 [v-cloak]{ display:none }vue双向绑定数据的原理 :采用数..原创 2021-02-26 09:48:45 · 141 阅读 · 0 评论 -
springboot实现邮箱注册
配置#邮件发送配置spring.mail.default-encoding=UTF-8spring.mail.host=smtp.qq.comspring.mail.username=XXX@qq.com#邮箱授权码spring.mail.password=授权码spring.mail.properties.mail.smtp.auth=truespring.mail.properties.mail.smtp.starttls.enable=truespring.mail.properti原创 2021-02-25 16:12:36 · 2305 阅读 · 0 评论 -
axios和Ajax的对比
ajax：1、什么是ajaxAjax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。2、ajax的原理？由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。3、核心对象？XMLHttpReques4、aja转载 2021-01-04 13:52:35 · 313 阅读 · 0 评论 -
Vue要点
基础条件渲染列表渲染v-for事件处理表单输入绑定v-model混入 (mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。fetch原创 2020-12-26 20:11:58 · 336 阅读 · 1 评论