vue
麻辣_水煮鱼
游啊游
展开
-
处理树结构(有某个属性时不显示该节点)
需求:有analysis属性的节点不显示。原创 2024-07-02 17:10:24 · 97 阅读 · 0 评论 -
vue关闭页面时执行事件
在vue中,可以通过监听浏览器的。事件在关闭页面时执行你想要的操作。原创 2024-06-21 16:24:40 · 1118 阅读 · 0 评论 -
antdv 穿梭框
除了实现简单的穿梭框功能,还想要重写搜索事件,想达到的效果是搜索到的结果的节点能自动展开且高亮显示。antd的穿梭框的数据貌似只接收key和title,而且必须是字符串(我测试不是字符串的不行),所以要把后端返回的数据再处理一下得到我们想要的数据。给穿梭框添加show-search。原创 2024-06-07 17:21:04 · 454 阅读 · 0 评论 -
vue实现pdf下载——html2canvas
的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象,并叠加到一起形成一张完整的图片或者PDF文件。2.1 在页面引入html2canvas。html2canvas 官方文档。2.2 创建下载pdf页面的方法。2.使用(页面已经写好)2.3 页面调用下载方法。原创 2024-06-05 10:03:54 · 561 阅读 · 0 评论 -
vue3笔记
通过扩展于标准HTML的模板语法,我们可以根据JavaScript的状态来描述HTML应该是什么样子的。当状态改变时,HTML会自动更新。原创 2024-04-17 16:55:43 · 446 阅读 · 0 评论 -
antdv下拉框即可手动输入又可下拉选择
最近有个需求是下拉框既可下拉选择也可手动输入,antd 的a-select组件不能直接使用,所以需要基于插件再修改一下。原创 2024-01-30 17:00:53 · 1137 阅读 · 0 评论 -
antdv 锚点踩坑
背景:使用antd的锚点时,按照官方文档的用法配置之后发现锚点组件的锚点Title位置没办法随着我的页面滚动而变化,但是点击Title跳转具体锚定位置的功能却是没有问题的。解决方法:getContainer绑定滚动范围容器。原创 2023-10-18 09:17:39 · 1286 阅读 · 1 评论 -
antd 表格getCheckboxProps禁用
需求:列表某些数据复选框禁用。原创 2023-10-12 10:13:39 · 708 阅读 · 0 评论 -
a-select下拉框因为数据量太大造成卡顿的问题
实际需求:在项目中一个下拉框中需要展示10000条数据,这10000条数据去后端查询虽然比较快,但是将查询结果返回给前端需要进行渲染,前端就会造成卡顿的现象,这时候就可以使用滑动加载只渲染总数据前100条数据以保证不卡顿。然后当需要搜索的时候对从后台拿到的数据进行过滤,也只取前100条,然后通过select下拉框popupScroll事件,下拉列表滚动时的回调,每次回调时都添加一部分数据来解决下拉框的卡顿问题。原创 2023-05-12 16:48:47 · 981 阅读 · 1 评论 -
vue-router 中beforeEach无限循环
vue-router 中beforeEach无限循环原创 2023-04-07 11:13:12 · 574 阅读 · 0 评论 -
antd 表单setFieldsValue给变量赋值
antd 表单setFieldsValue给变量赋值)原创 2023-04-06 09:44:46 · 527 阅读 · 0 评论 -
antdv table 行点击事件且点击高亮显示
antdv table 行点击事件且点击行高亮显示原创 2023-01-14 14:11:58 · 2113 阅读 · 0 评论 -
vue 点击事件名是变量
代码】vue点击事件名是变量。原创 2022-07-22 11:17:53 · 827 阅读 · 0 评论 -
vue中v-for写在template上,加key提示错误
vue中v-for写在template上,加key提示错误原创 2022-07-22 09:08:32 · 5062 阅读 · 1 评论 -
vue3.0项目引入three.js
vue3.0项目引入three.js原创 2022-07-20 11:34:12 · 727 阅读 · 0 评论 -
vue实现html格式(富文本编辑器)导出word
目录1.导入需要的包2.引入3.点击事件实现导出html-docx-js和file-saver2.引入3.点击事件实现导出原创 2022-06-24 09:40:55 · 2336 阅读 · 2 评论 -
vue中$ref取值有时是对象,有时是数组
在vue项目,$ref取值时发现,有时是对象有时是数组,以前没有注意到这个细节问题,今天又写了固定的ref名称,又写了for生成的ref名称。原因:vue中$ref取值,静态的ref读取到的是dom对象,而for循环生成得ref,读取到的dom对象是一个数组。官网解释:...原创 2022-04-07 10:17:17 · 1770 阅读 · 0 评论 -
vue过滤器将阿拉伯数字转化为汉字
numberfilter是过滤器的名称;关联项目{{index+1|numberfilter}}过滤器的写法:filters:{ //将阿拉伯数字转换为汉字的算法 numberfilter:function(num){ const changeNum = ['零','一','二','三','四','五','六','七','八','九']; const unit = ['','十','百']; num = parse转载 2022-02-21 15:35:25 · 676 阅读 · 2 评论 -
antd-vue 树结构默认展开第一个节点
在官方文档看到有defaultExpandedKeys这个属性,那么我们将默认展开的树节点设为树的第一个节点的key就可以。实现代码如下:<a-directory-tree :tree-data="fileTree" :defaultExpandedKeys="[fileTree[0].path]" @select="onSelect" :replace-fields="{title:'name',key:'path'}"></a-原创 2022-01-20 11:49:20 · 3213 阅读 · 0 评论 -
antv/G6自定义边
antv G6自定义边原创 2021-12-17 11:20:14 · 8203 阅读 · 1 评论 -
antv G6绘制流程图
先贴上实现的效果图G6官网,按照官网可以绘制出简单的流程但是当实际绘制流程图时,简直是要被连接线的折点给搞崩溃<template> <div id="mountNode"> </div></template><script>import utils from "@/plugin/utils";import G6 from '@antv/g6';import insertCss from 'inse..原创 2021-12-15 17:40:05 · 8837 阅读 · 1 评论 -
解决antd-vue表格批量操作选中框仍残留的问题
对数据批量操作成功,将选中的值selectedRowKeys值清空后,值虽然为空但是选择框依旧是选中状态,下面是解决方法操作成功后将值清空这样写就能将选择框原创 2021-11-13 21:31:51 · 2503 阅读 · 0 评论 -
vue递归组件
1、首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。既然要用递归组件,那么对我们的数据格式肯定是需要满足递归的条件的。就像下边这样,这是一个树状的递归数据。 [ { "name": "黄焖鸡米饭111111111",转载 2021-09-18 16:46:22 · 436 阅读 · 0 评论 -
数组map遍历是否改变原数组的值
查map方法的时候,总能看到map方法不会修改原数组,会得到一个新数组并返回。但原数组真的不会修改吗?最近写代码的时候发现一个问题:进行下面操作之后原数组modal_content的值也被改变了。在网上搜了一下,原来是上面的map方法不够“纯粹”,实际上还是直接修改了每个item的属性,如果不想影响原数组,应该这样写:this.modal_beforeContent= modal_content.map((item)=>({...item,disabled:true}))我们对.原创 2021-09-18 10:07:26 · 2752 阅读 · 5 评论 -
2021-08-23
1.更新子组件props 大多数人会通过 $emit 触发自定义事件,在父组件中接收该事件的传值来更新 prop。child.vueexport defalut { props: { title: String }, methods: { changeTitle(){ this.$emit('change-title', 'hello') } }}parent.vue...原创 2021-08-23 17:17:39 · 85 阅读 · 0 评论 -
vue 实现指定日期之间的倒计时
原文地址转载 2021-08-13 17:25:06 · 508 阅读 · 0 评论 -
vue 的 this.$refs 为undefined
"关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs也不是响应式的,因此你不应该试图用它在模板中做数据绑定。"也就是说 ref 只有等页面加载完成好之后你才能调用 this.$refs。解决方法:如果在method中,那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用,这样就可以了...原创 2021-08-13 10:55:05 · 578 阅读 · 0 评论 -
解决vue中watch监听第一次数据变化失败的情况
项目中,第一次进去数据不渲染,第二次才渲染。watch: { 'detail':{ immediate: true, // immediate选项可以开启首次赋值监听 handler(newVal, oldVal) { console.log(newVal, oldVal) this.tableData = newVal.progress; this.tbbh = newVal.tbbh;原创 2021-08-09 09:05:22 · 1061 阅读 · 0 评论 -
antd表单的<a-form-item>使用自定义label 插槽
item的label类型可以使字符串或者自定义label插槽。1.直接使用字符串类型是最常见的<a-form-model-item prop="job" label="岗位"> <a-input v-model="job" placeholder="请输入岗位" /></a-form-model-item>2.自定义label使用插槽<a-form-model-item prop="job"> <span s...原创 2021-07-14 17:44:37 · 15339 阅读 · 0 评论 -
vue项目引入echarts报错undefined
引入echarts后使用 一直报错undefined,但是package里确实有这个包,然后换了种引入方式:constecharts=require("echarts");然后就可以了。原因:安装的echarts版本是5.1的,可能版本太高不支持,换成4.*版本就不会报错...原创 2021-06-23 11:42:55 · 2533 阅读 · 0 评论 -
vue项目打包部署到NGINX
1.npm run build打包2.xshell进入nginx配置文件中(whereis nginx -> cd /etc/nginx(文件位置不一定,一般是这个))vim nginx.conf打开文件修改 自定义服务器端口号,IP,root,index(网址中加粗部分)3.配置文件修改后重启sudo nginx -s reload...原创 2021-06-21 08:29:59 · 184 阅读 · 0 评论 -
vue-video-player播放m3u8格式的视频
一、vue-video-player的使用:1.安装npm i vue-video-player -D2.引入(组件内引入)import { videoPlayer } from 'vue-video-player'import 'video.js/dist/video-js.css'export default { name: "sstc", components: { videoPlayer },3.使用<video-player cla..原创 2021-02-23 08:35:02 · 7246 阅读 · 5 评论 -
vue使用echarts绘制地图
由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧。直接贴代码<template> <div class=""> <div id="map" :style="{ height: '800px', width: '100%' }" ref="myEchart"></div> </div></template><script&g.原创 2021-02-20 17:33:24 · 3040 阅读 · 3 评论 -
vue-cli3 antd定制主题
这里可以参照官方文档。项目根目录下修改vue.config.js文件(需要安装less和less-loader,且安装版本不能太高,我最开始安装最新的版本,一直有各种报错,之后卸载了再安装低版本的就可以了)// vue.config.js for less-loader@6.0.0module.exports = { css: { loaderOptions: { less: { lessOptions: { // If you are原创 2021-02-19 10:26:00 · 1154 阅读 · 0 评论 -
vue antd根据权限控制表格显示的列
场景:根据不同用户的权限,展示表格的列各不相同。实现:动态变更表格列的配置columns。初始化的时候,只需要控制应该展示那些列就好。 const columns = [ { title: '序号', align:'center', customRender:(t,r,index)=>{ returnparseInt(`${(index+1)}`); } }, { ...原创 2021-01-29 10:24:12 · 1527 阅读 · 0 评论 -
vue antd tree控件右键点击菜单实现增删改查
今天实现的是,树形控件右键点击会出现操作菜单,增加、修改、删除按钮会弹出相应的操作弹窗。根据ant design vue 的右键点击事件rightClick 来控制菜单的显示和隐藏就简单了效果如下:(样式还没写,所以比较简单)代码如下//树结构<a-directory-tree :tree-data="filetreeData" @rightClick="onRightClick" ></a-directory-tree>//功能菜单.原创 2021-01-15 10:11:45 · 5805 阅读 · 1 评论 -
antd vue 将表格导出为Excel
1.安装依赖npm install -S file-saver xlsxnpm install -S script-loader2.引入js文件 放在src目录下新建excel文件夹里面3.在main.js里引入添加的两个文件(路径根据自己文件目录自行修改)//导出ExcelimportBlobfrom"@/excel/Blob.js"importExport2Excelfrom"@/excel/Export2Excel.js"4.修改Expor...原创 2020-12-23 09:58:05 · 2917 阅读 · 9 评论 -
退出xshell保持进程不断开
通过Xshell连接的服务器,vue项目启动后,如果xshell关闭,项目就停止了。解决办法是输入以下命令取代npm run serve (挂起模式)nohup npm run serve >/dev/null 2>&1 &原创 2020-12-18 15:06:20 · 2996 阅读 · 1 评论 -
antd-vue table跨行合并单元格
效果图:直接贴代码<a-table :columns="columns" :data-source="statisticData" bordered size="small" :pagination=false :scroll="scrollY" :rowKey="(record,index)=>{return index}">const columns = [ { title: '资产', colSpan: 3, ..原创 2020-12-18 10:52:16 · 2060 阅读 · 0 评论 -
vue-cli4配置公共scss样式文件
需要借助 sass-resources-loader工具来实现npm install sass-resources-loader在项目的根目录下,新建vue.config.js文件,加入配置module.exports = { chainWebpack: config => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(item =.原创 2020-12-18 08:27:02 · 760 阅读 · 0 评论