vue.js
恩婧
不以物喜,不以己悲
展开
-
echarts常用图表
完整代码如下根据代码需要进行改动// utilizationTimes.vue文件<template> <div class="whthinWay flex flex-col items-center" :class="{'shadow':shadowFlag}" v-loading="waysLoad"> <span class="whthinWayTitle">查档方式</span> <div cla原创 2022-05-30 16:25:26 · 314 阅读 · 0 评论 -
项目新问题合集(自用记录)
1、定义网格布局如图所示:.classify-menus{//外层容器 width: 80%; display: grid; grid-column-gap: 10px; grid-row-gap: 80px; grid-template-columns: repeat(5,20%); grid-template-rows: repeat(5, 20%);}参考链接...原创 2022-05-10 17:03:50 · 98 阅读 · 0 评论 -
JS中的遍历方法forEach和map的区别
一、用法:同为遍历数组的方法,两者的用法区别在于:forEach()会改变原数组的方法,不会返回有意义的值let arr = [1, 2, 3, 4, 5];arr.forEach((num, index) => { return (arr[index] = num * 2);});//执行结果 arr=[2,4,6,8,10]map()方法不会更改原数组,而是返回新的数组;let doubled = arr.map(num => { return nu原创 2022-03-19 15:45:41 · 3250 阅读 · 3 评论 -
el-table实现分页 序号
序言:根据需求实现表格添加序号,根据组件给的方法实现了添加序号,但分页后都是从1开始的,不符合序号连贯起来的要求设计给数据分页处理,由于这里写的是固定数据,因此要为tableData数据实现分页//涉及js方法slice定义和用法:slice()以新的数组对下个,返回被选中的元素;slice()方法选择从给定的start参数开始的元素,并在给定的end参数处结束,但不包括;注意:slice()方法不会改变原数组实现给表格添加序号//html代码<el-table :data原创 2021-12-31 14:36:32 · 2358 阅读 · 0 评论 -
ui组件 element 中是使用 el-empty报错
报错信息: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.报错图片报错原因:根据报错信息提示el-empty未注册,项目中全局引用element使用,无需单独注册某个组件。解决办法:重新安装element的版本,建议安装如下element,重新运行即可解决问题。npm i e原创 2021-12-14 14:01:39 · 5908 阅读 · 2 评论 -
echart折线图 轮询请求更新数据
需求:在后端没有使用websocket的时候,前端做轮询请求实时更新图表数据,这时候我们要在每次请求数据的时候进行图表的初始化,那么多次请求就会出现多个图表,不符合需求图表以及相关代码 <div class="wrap"> <div id="arichLine"></div> </div> created(){ this.dataRefreh(); this.query_data(); }, //相关方法.原创 2021-11-03 17:15:11 · 663 阅读 · 0 评论 -
代码托管 git常用命令和操作
1、git 安装完成后 在开始菜单中会有git选项 菜单下有3个程序Git Bash :Unix与Linux风格的命令行,使用过最多,推荐最多Git CMD : Windows风格的命令行Git GUI :图形界面的Git,不建议初学者使用,尽量先熟悉常用命令;Git Bash 风格与Linux和Unix的风格是一样的,平时多使用这些基础的技巧,熟能生巧)常用的基本 Linux命令cd:改编目录cd … :回退到上一个目录,直接cd进入默认目录pwd:显示当前所在的目录路径l原创 2021-10-23 15:24:16 · 141 阅读 · 0 评论 -
项目常用el-upload、a-upload、流文件下载
1、流文件下载 //有效时长导出 effectExport() { let query={ st:1, limit:10 } //query 为接口所需参数 //CONFIG.httphost()是我自己项目定义的请求参数,可根据实际情况改变 this.$axios.post(原创 2021-10-20 14:32:34 · 1966 阅读 · 0 评论 -
axios再封装
/* * @Author: Hikari * @Date: 2021-03-26 11:05:07 * @LastEditTime: 2021-06-26 14:33:42 * @LastEditors: Please set LastEditors * @Description: RESTFUL_API * @FilePath: /core/nuxt-framework/plugins/api.js */import Vue from 'vue' export default func原创 2021-08-20 15:59:09 · 120 阅读 · 0 评论 -
自用项目方法合集
get请求多参数 方法/** * 生成 url get请求参数 * @param {*} object * @returns */export function make_params( object ){ let params = '' for( var key in object ){ let value = object[key] params += key + '=' +value + '&'; } ret.原创 2021-08-18 17:03:00 · 115 阅读 · 0 评论 -
new promise 以及promise.all在项目中的实际应用
需求:在实际项目的开发应用中我们需要先执行前两个方法,用两个方法返回的数据作为参数去执行第三个方法这时候我们就需要使用new promise、resolve、promise.all等方法使用代码如下所示:可根据实际情况进行变通方法1// 账户信息获取getAccount(){ return new Promise((resolve,reject)=>{ this.$axios.post(CONFIG.httphost() + '/user/queryUser',{ .原创 2021-08-11 18:26:41 · 1196 阅读 · 0 评论 -
滚动条下拉进行分页请求数据
需求说明 一个公告页面,如果一次性请求所有数据必定会造成页面卡顿,所以将接口设置成分页模式,按照每页请求<a-list item-layout="horizontal" :data-source="data" class="list"@scroll.passive="getScroll($event)"> <a-list-item slot="renderItem" slot-scope="item" @click="godetail(item.id)" style="cu.原创 2021-08-11 18:14:07 · 772 阅读 · 0 评论 -
Ant-design-upload中 upload批量挂接
需求是批量上传一个文件夹中的文件,当文件夹中的文件上传完成之后进行一个上传完成的提示<el-dropdown class="ml-1" size="medium"@command="BatHandle"> <el-button icon="el-icon-s-operation" > 批量操作<i class="el-icon-arrow-down el-icon--right"></i> </el-button>.原创 2021-08-11 16:06:40 · 655 阅读 · 0 评论 -
项目中的路径跳转
当要跳转的路径path中含有http字符:使用window.open 进行路由跳转否则使用router.push();原创 2021-07-22 14:49:23 · 139 阅读 · 0 评论 -
slot 的简单理解
slot简单来说就是‘占坑’,在子组件里占好了位置,父组件使用该子组件时,新添加的元素就会自动填充到这个坑里;给childrer添加一个slot插槽,父组件添加的DOM元素就自动填充到这个slot插槽里面了;多个DOM元素会一起填充到这个slot插槽里;<div id="app"> <children> <span>我是魔鬼</span> <!--上面这行会显示在 “我是子组件” 数据后面--> .原创 2021-07-17 14:37:17 · 238 阅读 · 0 评论 -
a-upload文件夹上传
项目开发时遇到了一个需要使用upload组件上传文件夹的需求总的来说选中文件夹之后还是单个文件进行上传的本质需要清楚的是当上传多个文件的时候(比如10个文件10),upload组件的是先执行10次beforeUpload方法 再执行十次上传方法,完整代码如下;我的需求是在完成十次文件上传后进行一次表格数据刷新和上传成功的提示;//template中的代码<a-upload name="file" :showUploadList="false" :multipl.原创 2021-07-16 17:39:32 · 7184 阅读 · 0 评论 -
deep迭代遍历树形tree数据 取出所需值
定义好迭代取值的方法let datas = [] //是一个树结构的数据setName(datas){ //遍历树 获取id数组 for(var i in datas){ this.expandedKeys.push(datas[i].id) if(datas[i].children){ this.setName(datas[i].children); } }},项目需求:取出当前分支的id以及当前分支的上一级id值,组成对象数组传递给接口数据/原创 2021-05-08 15:21:45 · 369 阅读 · 0 评论 -
vue实现 24小时刻度间断显示展示
根据24小时刻度线将工作时段进行表示展示实现出发点,即利用组件的进度条,将24段div包裹的进度条组装成一个完整刻度线(生成一个组件,通过for循环遍历出来)实现效果图:实现代码,封装内部组件timebar.vue<template> <div> <span >{{time}}</span> <div class="bar"> <q-linear-progress .原创 2021-02-27 09:31:29 · 4765 阅读 · 6 评论