- 博客(21)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 element复杂表格有冻结列时滚动迟滞性解决
解决方案是继承覆盖element的Table组件,并重写Table组件的bindEvents和syncPostion方法,因为根据源代码发现,Table中的syncPostion方法可能出于性能的原因使用了防抖,我们这里就直接把防抖拿掉了,但这不是产生问题的主要原因，这个只是会导致轻微的迟滞。产生这个问题的最主要原因是：滚轮事件会自动触发滚动事件，滚动事件中自动使用了behavior: 'smooth’机制，这个机制会让滚动看起来很丝滑，但会耗费更多的性能，估计浏览器处于性能考虑导致两个滚动效果不同步了。
2023-07-06 18:14:13
236
原创 Vue组件定制——动态查询规则生成组件
1. 动态查询规则动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现SQL查询的where条件，下面是摘自mongodb的某一软件。2.组件构建思路按照规则组件的组织形式，可以把其视为一棵树，有树干和树叶，这样看起来就不难了。2.1 组件html这里采用ElementUI构建，因此可以方便的组合各类ui控件来进行构建需要的界面。当然该组件既然被看作树，因此其也是个递归组件，因此还涉及到自己调用自己。<template> <d
2022-04-24 15:35:55
3795
22
转载 【VUE】后台管理中使用富文本编辑器
一.介绍使用的插件介绍wangEditor浏览器兼容性兼容主流 PC 浏览器，IE11+不支持移动端和 ipad插件教学文档教学文档上图看效果二.使用使用npm安装npm install wangeditor --savecomponents下创建 editoritem.vue，将编辑器封装成组件，方便调用管理代码可完全复制修改<template> <div id="wangeditor"> <div ref="edi
2022-01-06 11:00:46
1276
原创 elementUI el-checkbox复选框 隐藏label
最近做到一个多选的需求，我是需要把所需要的东西选中，然后并不需要显示label，我只想要框框就可以了，然后经过了百度之后，发现了一个牛逼又简洁的写法
2021-12-21 11:23:43
1119
原创 vue+element el-checkbox 选中一个全部都被选中
例如：点击一个即所有的多选框都选中了，出现的情况有以下几种；第一种情况：v-model 绑定的值应该是数组的形式，结果写成了字符串的形式。第二种情况：没有写label值
2021-12-21 11:22:19
1904
2
原创 element ui 中table 单列 超出部分显示省略号
elementui表格超出部分显示省略号1.el-table是有这个控制属性的：:show-overflow-tooltip=“true”<el-table-column prop="address" align="center" header-align="center" label="报修地址" :show-overflow-tooltip='true'> </el-table-column>...
2021-12-09 17:35:37
468
原创 让element-ui 的el-upload组件能够上传文件夹
用vue + element-ui中的el-dropdown组件，实现上传文件或者文件夹效果图如下：当点击上传按钮部分的时候，默认是“上传文件”，当鼠标悬停到右边的下拉菜单，可选择“上传文件”或“文件夹”，通过点击不同的菜单项，确定是否在input上添加webkitdirectory属性。如图实现了使用同一个上传弹框组件，让用户既可以选择上传单个文件，也可以选择上传文件夹...
2021-03-31 18:31:46
7025
2
原创 JS控制弹出新页面窗口位置和大小的方法
本文实例讲述了JS控制弹出新页面窗口位置和大小的方法。分享给大家供大家参考。具体如下：相信很多朋友都想做一个弹出用来弹出公告或者重要信息，但是弹出的框口位置和大小又不能太大，所以我们今天使用JS来控制弹出窗口的位置和大小，想弹多大就多大<html><head><title>指定弹出窗口位置(IE)</title><script language="javascript"><!--function winpop(){window
2021-03-30 09:49:52
2214
原创 处理 elementUI 中表格多选框禁用问题
处理 elementUI 中表格多选框禁用问题在 el-table-column type 类型为 selection 组件中，添加 :selectable='方法名’<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange"> <el-ta
2021-03-25 17:28:15
760
原创 vue中路由跳转页面
跳转路由很简单，我们可以通过this.$router.push(location) 来修改 url，完成跳转push后面可以是对象也可以是字符串：跳转页面并传递参数的方法：第一种.Params由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问在路由配置文件中定义参数通过name获取页面，传递params：this.$router.p
2021-03-25 17:12:19
160
原创 element-ui中的表格el-table滚动条样式修改
参考： // 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }
2021-03-24 18:09:08
796
原创 手动调用element DateTimePicker 日期时间选择器关闭事件
有时候手动调用控件的关闭隐藏控件事件官网api中没有此事件，查看源码发现有一个handleClose事件，亲测可用，在日期选择控件上设置ref，直接调用handleClose()可达到关闭日期控件的作用
2021-03-04 14:07:55
1934
1
原创 在Echarts扇形图中添加点击事件
在Echarts扇形图中添加点击事件在vue中使用echartsscript 部分有这样一个需求，在echarts中点击某一块弹出列表展示数据，这个时候需要用到echarts的点击事件在vue中使用echarts<template> <div class="pie" style="width:100%"> <div id="pie1" style="width:100%"> <!-- 为 ECharts 准备一个具备大小（宽高）的 DO
2021-03-03 17:48:52
3122
1
原创 文件上传进度条(基于vue+element)
直接上图 <el-dialog title="上传文件" :visible.sync="dialoguploadingShow"> <el-upload class="upload-demo" :auto-upload="false" ref="upload" action="Fake Action" :on-preview="handlePreview" :on-remove="
2021-03-02 10:43:03
1059
2
原创 解决uni pdf.js 接口请求后台文件流显示白屏问题
解决uni pdf.js 接口请求后台文件流显示白屏问题pdf.js的使用这里不再多介绍了，直接奔向主题。但是我需要的是这个样子的结果就显示肯定是不行的。。。查阅资料修改代码参考文章pdf.js的使用这里不再多介绍了，直接奔向主题。场景介绍：文件管理系统，要求文档可以预览pdf，向后台请求拿到文件流。网上查到的资料都是这个样子的通过页面参数传值的方式加载pdf文件 file的值需要URLEncode编码 指向服务器端例如： http://xxxxx.com:89/demo/fileupdown
2021-03-01 17:15:37
2796
9
原创 快速安装create-react-app脚手架
安装create-react-appnpm isntall -g create-react-app安装好了之后，看一下版本create-react-app --version创建项目目录my-app安装好了之后就直接创建my-app目录，这个目录是我们项目的根目录，具体叫什么名字，看具体需求啦create-react-app my-app安装好了之后，接下来进入这个目录，然后安装依赖（脚手架都差不多）cd my-app我是直接命令行进入目录的，如果你还不清楚命令行，就直接进入当前m
2020-11-27 16:43:16
160
原创 Vue实现购物小球抛物线
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-11-20 17:26:27
1743
9
原创 关于在vue中设置swiper 分页器自定义样式
一，安装swiper执行命令 npm install vue-awesome-swiper --save二，引入swiperimport {Swiper} from “vue-awesome-swiper”;import “swiper/dist/css/swiper.css”;
2020-11-10 23:30:00
1179
1
原创 Chrome游览器改变SameSite设置
Chrome浏览器改变SameSite设置Chrome 默认将没有设置SameSite设置为SameSite=LaxSameSite取值StrictStrict完全禁止第三方Cookie，跨站点时，任何情况下都不会发送CookieLaxLax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。None网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送）
2020-11-07 23:36:21
8160
8
原创 关于axios发送请求时默认不携带cookie的解决办法
axios默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials: true来解决。import axios from 'axios'; // 引入axiosaxios.defaults.withCredentials = true; // 允许携带cookie
2020-11-07 23:20:18
1611
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人