- 博客(28)
- 收藏
- 关注
RSS订阅转载 树形节点的过滤处理
链接: 树形节点过滤// An highlighted block// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组function filter(nodes, query) { // 条件就是节点的title过滤关键字 let predicate = function (node) { if (node.title.indexOf(query) > -1) { return true;
2022-05-05 13:49:49
701
原创 el-table自定义合并单元格行或列
效果图：合并单元格方法 const getSpanArr = (data) => { // data就是表格数据 const spanArr = [] let index = 0 for (let i = 0; i < data.length; i++) { if(i === 0){ spanArr.push(1), index = i
2022-03-22 10:25:02
1078
原创 使用new XMLHttpRequest请求JSON数据
const getJson = () => { const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); // url 请求地址 // xhr.responseType = "blob"; // json格式不需要 xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.r
2022-03-04 12:00:20
2121
原创 vue3使用keep-alive
在app.vue写入，注意：v-if 不要写错地方，否则缓存不生效<router-view v-slot="{ Component }"> <keep-alive> <component v-if="route.meta && route.meta.keepAlive" :is="Component"/> </keep-alive> <component v-if="!(route.meta.keepAli
2022-03-03 15:45:50
1231
原创 element-plus图标全局注册和分页英文显示问题
最近使用element-plus的UI框架，发现图标引入需要组件的形式和分页是英文显示 ，解决如下：// 在main.ts中引入element-plusimport ElementPlus from 'element-plus';import 'element-plus/dist/index.css';import zhCn from 'element-plus/es/locale/lang/zh-cn';import Icon from '../plugins/icon'; // 这个是建的文件
2022-01-22 15:01:31
910
原创 销毁echart的图表实例
echart图表再次渲染不显示在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。 var myChart = echarts.init(document.getElementById('main')); // 销毁实例，销毁后实例无法再被使用。 // 在什么情况下需要调用该函数进行销毁当前的实例呢？// 官方给的说明:在图表容器被销毁之后，调用 echartsInstance.dispo
2022-01-12 11:53:50
3823
原创 vue绑定快捷键实现上下翻页
项目是使用vue3 + tssetup（）{ const prevKeys : string[] = ["ARROWUP", "PAGEUP", "ARROWLEFT"]; // 上翻页快捷键集合 const nextKeys : string[] = ["ARROWDOWN", " ", "ENTER", "PAGEDOWN", "ARROWRIGHT"]; // 下翻页快捷键集合 // 快捷键翻页 const keydownListener = (e: KeyboardEvent) =&g
2021-12-15 15:17:03
1112
原创 Electron主进程与渲染进程相互通信
主进程与渲染进程通信// 创建实例const { app, BrowserWindow } = require('electron')let mainWindowconst winURL = process.env.NODE_ENV === "development" ? `http://localhost:9080` : `file://${__dirname}/index.html`function createWindow() { // Menu.setApplicationMen
2021-12-10 11:34:44
762
原创 react-devtools安装教程（谷歌）
谷歌vue-devtools插件，帮助你react开发快速调试。下面分享一个简单的安装方法~1.点击官网链接[react-devtools插件下载-收藏猫插件]，选择手动安装(https://chrome.pictureknow.com/extension?id=b02ac2064fdb4f888357cecbf6487592)2.下载完成之后，找到你下载的文件，拖拽到谷歌扩展程序（别忘记打开开发者模式）3.运行你的react项目，F12就可以看到安装的react-devtool调试工具了哦4
2021-03-21 20:33:28
2432
原创 在vue项目中使用自定义字体
1.首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包2.在项目assets下创建一个font文件夹 如图：3.在font.css中定义你使用的字体 如图：4.在main.js引入字体5.引入之后，你就可以直接在项目中使用了。因为我们是整个项目都用这个字体，我是直接在App.vue中使用。...
2021-03-16 10:16:02
604
原创 el-switch的blur事件
今天遇到一个问题，是el-switch绑定的change事件，点击一次之后，鼠标不要动，直接按下enter键，会继续执行绑定的change事件。出现这个情况就是焦点聚焦了。刚开始的思路一直是绑定一个键盘监听事件，键盘按下让el-switch失去焦点。遇到问题：el-switch官网给的方法只有focus，没有blur这样还会在执行一次change事件，然后才会失去焦点。解决：最后解决的办法是在绑定的change方法最后加上失去焦点，让enter键失效<el-switch v-model
2021-02-05 15:27:42
1182
原创 Chrome商店镜像，支持各种插件下载
官网地址: 收藏猫~Chrome商店.1，选择要下载的插件，直接点击下载插件手动安装（需要登录一下哦）2.下载完成后直接拖动到你的扩展程序中就可以了，不会安装的点击安装教程3. 安装插件不再会出现, 程序包无效 CRX_HEADER_INVALID4. 实时性更高，实时同步Chrome商店插件...
2021-01-21 11:06:43
5316
原创 Axure RP谷歌浏览器插件安装下载
作为一名优秀的it工作者，怎么可能有“怎么不能用谷歌浏览器查看Axure RP做的原型”这种问题，原因就是没有安装Axure谷歌浏览器插件。下面为为你介绍一款超级简单的Axure RP谷歌浏览器插件安装方式：1.安装 chrome 浏览器，下面是下载链接 ，如果安装过跳过这一步。链接: Google chrome浏览器.2.下载Axure RP插件并保留，下面是下载链接。链接: Axure RP 插件下载-收藏猫插件.3.打开浏览器插件安装页面4.安装插件5.安装完成之后，你就可以直接用谷
2021-01-19 11:22:48
1445
1
原创 el-select的change事件，传递多个值
下拉框列表的change事件，自带一个参数，就是为下拉框选中的值，但是有时候我们需要在带一个参数过去，就会覆盖原来的参数，要怎么办？这个时候我们可以借助箭头函数，完美解决传参问题。代码如下：// An highlighted block<el-table border stripe :data="searchForm.taxPlanEntityList" style="width: 100%"> <el-table-column label="公司名称" align="cente
2021-01-15 11:19:21
7025
4
原创 el-table设置表格高度无效
设置表格高度，官网给的很详细只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。因为我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。效果如图：是通过css解决的，代码如下：/deep/.el-table{ .el-table__body-wrapper{ height: calc(100% - 48px)!i
2021-01-13 16:05:33
7835
7
原创 vue调试工具vue-devtools安装（谷歌）
vue调试工具vue-devtools安装谷歌vue-devtools插件，帮助你vue开发快速调试。安装 chrome 浏览器，下面是下载链接 ，如果安装过跳过这一步。链接: Google Chrome浏览器.下载插件并保留，下面是下载链接 。链接: vue-devtools插件下载-收藏猫插件.打开浏览器插件安装页面安装插件5.安装完成之后运行你的vue开发项目，F12就可以看到这个vue-devtools插件了，可以快速调试了...
2021-01-13 15:24:04
443
原创 el-form表单根据不同条件下校验是否必填
在项目开发过程中难免会有，在某个条件下表单必填，马讴歌条件下不检验是否必填，具体代码如下：// An highlighted block <el-form ref="formInfo" :model="searchForm" label-width="100px"> <el-form-item label="金额：" prop="payOut" :rules="flag ? rules.payOut : []"> <el-input v-mod
2021-01-13 10:43:20
6435
1
原创 el-table表格合计放在上面
el-table的表格合计官网给出了属性和方法，但是合计是在表格的下方，若是把合计行放在上面，一个简单的方法实现它：效果如图：方法如下： showSummariesPosition() { const table = document.querySelector('.customTable') // customTable这个是在el-table定义的类名 const footer = document.querySelector('.customTable .el-table__
2020-12-17 14:18:24
2693
原创 在el-table表格中使用el-input检验无效果
表格渲染直接使用element中的表格，按照官网给的格式直接就渲染出来了，但是奈何后台给我返回的是一列对应一条数据，本来想着转换格式就行，途中又遇到校验无效，代码如下后台返回的数据格式：// An highlighted blockexport const tableDataTest = [ { 'name': '第一列', 'a1': 11, 'a2': 12, 'a3': 13, 'a4': 14, 'a5': 15 }, { 'name': '第二列', 'a1': 21, 'a2':
2020-11-19 17:12:33
2676
原创 不同浏览器隐藏滚动条样式
不同浏览器隐藏滚动条样式 .content{ height: 100%; overflow: auto; //谷歌 &::-webkit-scrollbar { display: none; } //IE -ms-overflow-style: none; //firefox scrollbar-width: none; }
2020-11-11 13:58:28
139
原创 elememt的日期控件的 禁用日期disabledDate方法中使用this报错
代码如下：// An highlighted block <el-date-picker type="date" placeholder="选择开始日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="form.startTime"></el-date-picker> data() { return { pickerOptions: { disabled
2020-10-29 11:08:06
1800
原创 Element日期区间控件 分开选择开始和结束日期的禁用判断
选择一个日期区间，我们肯定会想到elementUI的日期区间控件，但是奈何我们需求就是不想要一下选择一个日期范围，而是分两次选择开始日期和结束日期，这样就需要做禁用判断了，比如你先选择开始日期，那你结束日期肯定要在开始日期之后，或者你先选择了结束日期，那你的开始日期只能选结束日期之前了：如图： 代码如下：// An highlighted block<template> <div class="date-wrapper"> <el-date-picker
2020-10-29 10:51:15
1352
原创 vue-cli中eslint编译报错
在项目初始化时，如果安装了eslint，会发现编译报错，但是你可能只是希望输出编译警告,其实官网写的很清楚，但是奈何我们就是喜欢百度，哈哈如下图：
2020-09-14 09:34:18
471
原创 vue+element表格的左右布局及动态添加行
一般我们实现表格，直接使用element中的table组件，现在有个原型图是，类似表头左边，本来在纠结要写元生的表格了，最后突然想到把它当成form表单，直接样式实现表格效果效果如图：我这里还有一个动态的添加行，我只做了这一个的动态添加的必填检验。下面展示一些 内联代码片。 <el-form ref="form" :model="form" label-position="left" label-width="240px" :hide-required-asterisk="true">
2020-09-11 14:22:58
5647
原创 vue实现多条件模糊查找且兼容分页
实现多条件模糊查找且兼容分页：搜索的方法如下： searchList() { const arr = [...this.tableList] // 返回的所有数据 const searchObj = {userName: this.searchForm.userName, userTelNum: this.searchForm.userTelNum} //根据输入的用户名和手机号模糊查找 const filterArr= arr.filter(item
2020-09-04 17:53:44
776
原创 vue绑定键盘事件 ctrl+enter触发事件
公司项目（vue+element）有个需求，是在一个input输入内容后按下Enter键进行搜索查询，查询到得数据显示在表格，勾选表格的选中的数据进行提交（提交按钮的快捷键是Ctrl+Enter键盘），功能很常见，下面说的主要是绑定这些键盘事件和遇到的一个问题效果如图：在输入框中绑定键盘事件vue官网提供了键盘修饰符很方便代码如下：// An highlighted block<el-input ref="enter" clearable @keyup.enter.native="lis
2020-08-25 16:08:27
3103
原创 vue+element的远程搜索实时高亮关键字
最近有个需求是在输入框搜索关键字实时高亮，element中有个input的远程搜索功能，但是不能实时高亮关键字，做了下修改。效果如图：实现的代码 html部分：主要是这个querySearch和handleSelect的方法，如图：handleSelect（）方法是为了选中赋值下面是数据定义：...
2020-08-20 14:51:27
1133
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人