
前端开发
恩婧
不以物喜,不以己悲
展开
-
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 · 6077 阅读 · 2 评论 -
echart折线图 轮询请求更新数据
需求:在后端没有使用websocket的时候,前端做轮询请求实时更新图表数据,这时候我们要在每次请求数据的时候进行图表的初始化,那么多次请求就会出现多个图表,不符合需求图表以及相关代码 <div class="wrap"> <div id="arichLine"></div> </div> created(){ this.dataRefreh(); this.query_data(); }, //相关方法.原创 2021-11-03 17:15:11 · 727 阅读 · 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 · 163 阅读 · 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 · 2100 阅读 · 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 · 137 阅读 · 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 · 1235 阅读 · 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 · 832 阅读 · 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 · 722 阅读 · 0 评论 -
项目中的路径跳转
当要跳转的路径path中含有http字符:使用window.open 进行路由跳转否则使用router.push();原创 2021-07-22 14:49:23 · 163 阅读 · 0 评论 -
slot 的简单理解
slot简单来说就是‘占坑’,在子组件里占好了位置,父组件使用该子组件时,新添加的元素就会自动填充到这个坑里;给childrer添加一个slot插槽,父组件添加的DOM元素就自动填充到这个slot插槽里面了;多个DOM元素会一起填充到这个slot插槽里;<div id="app"> <children> <span>我是魔鬼</span> <!--上面这行会显示在 “我是子组件” 数据后面--> .原创 2021-07-17 14:37:17 · 271 阅读 · 0 评论 -
a-upload文件夹上传
项目开发时遇到了一个需要使用upload组件上传文件夹的需求总的来说选中文件夹之后还是单个文件进行上传的本质需要清楚的是当上传多个文件的时候(比如10个文件10),upload组件的是先执行10次beforeUpload方法 再执行十次上传方法,完整代码如下;我的需求是在完成十次文件上传后进行一次表格数据刷新和上传成功的提示;//template中的代码<a-upload name="file" :showUploadList="false" :multipl.原创 2021-07-16 17:39:32 · 7450 阅读 · 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 · 389 阅读 · 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 · 5014 阅读 · 6 评论 -
vue v-for 下的$ref 返回数组
如果refs自身的dom,或父级的dom是经过v-for渲染出来的,vue框架就会把ref.key在registerRef函数就被设置成数组v-for父级dom渲染实现:source中查看被转化为数组格式:因此要获取对应元素从两个方面开始考虑:1、使用vue的this.$nextTick方法解决获取不到元素的问题;2、因为ref获取的元素变成了数组属性,因此要在多个refs中使用【0】取;因此这也是在获取refs对应的名称之后通过[0]这种获取数组元素的方式来获取对应的准确值;..原创 2021-02-27 09:10:03 · 1865 阅读 · 0 评论 -
quasar ui组件的使用记录
1、关于自定义页码 quasar pagination根据客户需求定制页码选项//table组件的相关属性:rows-per-page-options = [10,50,500]//完整代码//html <q-table class="q-mr-sm q-ml-sm q-mt-md" title="开机时长" separator='cell' :data="data" :columns="columns"原创 2020-12-22 16:09:00 · 745 阅读 · 0 评论 -
vue+elementUI中el-radio设置默认值
如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable=‘0’;如下:<el-form-item label="仿牌选项:" prop="ifCod" size="mini" class='form-label'> <div id='radio' > <el-radio class='m0' :disabled="disab...原创 2020-03-10 15:33:28 · 22438 阅读 · 0 评论 -
后台管理系统根据后台返回配置动态菜单栏
工作中提出的需求是这样的:根据登录后返回数据的菜单尽心动态菜单栏的配置 而不是在app.vue将菜单栏进行定死登录成功后 后台返回的数据样式原创 2020-03-10 11:25:39 · 1632 阅读 · 0 评论 -
项目中新增商品的样式
1、商品编辑保存的样式变化(基于elementUI)编辑视图保存视图实现代码<el-button type="primary" size='mini' class="el-icon-plus" :disabled="disable" @click='addTable'>新增</el-button><el-table ref='table...原创 2020-03-09 16:14:38 · 500 阅读 · 0 评论 -
vue项目中main.js常用定义以及全局配置
main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.// import Vue from 'vue';// import App from './...原创 2020-03-10 14:02:04 · 2549 阅读 · 0 评论 -
Vue项目中定义全局的日期时间过滤器,用于展示适合需求的时间格式
首先在全局main.js文件中定义全局过滤器,用于各个页面的日期处理,当后台返回的日期值为null时我这里做了处理展示为空function formatDate(date, fmt) { let exp = date; if (!exp && typeof (exp) != 'undefined' && exp != 0) { fmt = nu...原创 2020-03-04 23:23:05 · 523 阅读 · 0 评论 -
el-table 实现滚动条分页懒加载
1、滚动条懒加载实现分页数据获取首先在文件夹directive下的directive.js文件夹中定义全局指令 如下:'use strict';/** * * * 添加所有的全局指令 * * */ import Vue from 'vue' // 聚焦指令 // 注册一个全局自定义指令 `v-focus` // v-focus Vue.directive('f...原创 2020-03-04 23:15:59 · 7125 阅读 · 2 评论