qq_49732089的博客

原创 vue日期回显到昨日，今日和今日以后日期不可选

vue日期回显到昨日，今日和今日以后日期不可选

原创 vue封装请求接口

axios请求的相关代码放置于：src→api→index.js. indext.js基于axios的封装，便于处理统一处理POAT，GET等请求参数，请求头，以及错误提示信息等。具体可以参考：和服务端进行交互 | vue-element-admin。或者https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js下面我们看index.js文件中的写法实例index.js文件请求拦截器中index.

原创 vue锚点定位案例

<!--健康记录--><template> <div id="healthRecord"> <hc-tabs tab-position="left" v-model="tabActive" @tab-click="tabHandleClick" style="height:200px;width:90px;"> <el-tab-pane label="体重" name="weight"> </el-tab-pane> .

原创 vue 全屏按钮切换

<!-- 全屏按钮 --> <!-- <img class="box" v-if="!showFullScreen" src="../assets/img/full.png" @click="showFullScreenFun" style="position: absolute;top: 0.4rem;right: 0.9rem;"/> --> <img class="box" v-if="!showFullScreen" src="../ass.

原创 echarts图表

<div id="targetPic"></div>// 目标用户群环形图 getTargetCus(){ let option; option = { series:[ { name:'', type:'pie', radius:['70%','100%'], //饼图的半径 .

原创 echarts条形图

<div id="sexColumnPic" v-show="isShowSexPic === 2" style="height:313px;"></div>// 性别条形图 getSexColumnPic(){ let option; option = { yAxis:{ type:'category', data:this.columnOptio.

原创 echarts柱状图

<div id="levelColumnPic" v-show="isShowLevelPic === 2" style="height:313px;"></div>// 客户等级柱状图 getLevelColumnPic(){ let option; option = { xAxis:{ type:'category', data:this.col.

原创 echarts 环形图

<div id="sexRoundPic" v-show="isShowSexPic === 1"></div><hc-button class="btnColor" plain="true" icon="operator-0308-download-0408" size="small" @click="downloadSexPic">下载图片</hc-button>methods方法中isShowSexPic是图表切换，如果项目中不需要可以不写，这个.

原创 tab 栏切换

<div class="btnBox" style="padding: 10px 0 10px 0;box-sizing: border-box;"> <span class="yangshibutton" :class="{'slectcolor':flagClick=='服务量'}" @click="handleClick('服务量')">服务量</span> <span class="yangs.

原创 el-radio单选

<hc-radio v-model="scope.row.increaseFlag" :label="true" :disabled="diableEdite" style="line-height: 32px;" @click.native.prevent="changeForwardRadio(true,scope.row,scope.$index )">显示长箭头</hc-radio>data中写increaseFlag:false,.

原创 el-table合并单元格-行合并

合并单元格，如果id列值一致，则合并原理1、getSpanArr(data)方法 data就是我们从后台拿到的数据，通常是一个数组；2、spanArr是一个空的数组，用于存放每一行记录的合并数；3、 pos是spanArr的索引。如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，0即表示该行不显示<template

转载 vue中this.$set的用法

https://www.jianshu.com/p/6f28f5abee08

原创 vue 下载或导出文件

html里写一个按钮组件<hc-button type="default" text="导出" style="color: #229399;" icon="hc-icon-downLoad" size="small" @click="exportButton" v-preventReClick>导出</hc-button>methods方法里// 导出按钮 exportButton(){ let param = { "articleType": thi

原创 vue 动态按钮设置权限，是否显示和可被操作

//按钮名称<hc-button size="small" type="primary" v-if="ifOperate1()" @click="btnFun(btnitem.resID)" :disabled="isDisabled(btnitem.resID)">{{btnitem.resName}}</hc-button>//按钮是否显示可被操作 ifOperate1(item) { if (JSON.stringify(this.obj.operateOA

原创 VUE date类型时间转换成正常时间日期

转换日期格式设置过滤器date.js文件export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': da

原创 vue页面接口数据不更新问题，重复调接口

例如做一个上传图片按钮，上传图片到详情页的表格，但是如果不强制刷新页面的话，表格里的内容就不更新，那么我们就需要去再调一遍接口，如果组件较多的情况下我们可以用以下方法表格里的信息是从详情查询接口获取的父组件定义刷新依赖 在appointment_detail .vue文件夹定义(当前接口所在的文件夹)子组件uploadimageshow.vue中注入刷新依赖并引入methods方法里使用刷新方法...

原创 sessionStorage用法

sessionstorage怎么传对象通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。例如let currentOrg = JSON.parse(sessionStorage.getItem('currentOrg'));//currentOrg为session里的名称

原创 vue前端按钮防止重复点击

新建一个preventReClick.js文件import Vue from 'vue'const preventReClick = Vue.directive('preventReClick', { // 防止按钮重复点击 inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el

原创 vue 创建项目

# 一、项目初始化## 使用 Vue CLI 创建项目> 注意：不要使用 Git Bash 执行项目创建操作，使用 cmd 或者 powershell 之类的工具。> 如果你还没有安装 VueCLI，或者版本低于 4，请执行下面的命令安装或是升级：>> ```shell> npm install --global @vue/cli> ```在命令行中输入以下命令创建 Vue 项目：```shellvue create toutiao-pub

原创 vue 多选缩略图

<hc-dialog title="选择图片" :visible.sync="selectImgFlag" width="520px" top="10vh" class="dialog-picker selectImageDialog" :close-on-click-modal="false" :append-to-body= "true" .

原创 js 导出、下载

原创 el-select同时获取code和name的方法

原创 vue如何配置

vue中，测试环境，生产环境，是通过打包来识别和运行的。识别关键字其实他内部封闭好了。可以用：process.env.NODE_ENV 来识别。比如：process.env.NODE_ENV === ‘production’ //说明是生产环境，还有develop\test等具体做方是，在根目录建一个vue.config.js,然后里边写：第一步：const path = require(‘path’); //这个require(‘path’)是你建项目后，就有path了，就像 import V

原创 el-upload 上传图片

原创 h5小页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"></style></head><body></body><script type="text/javascript">...

原创 rel-date-picker日期组件灵活运用

原创 Vue中，$forceUpdate() 强制刷新

//vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的<template> <p>{{userInfo.name}}</p> <button @click="updateName">修改userInfo</button></template><script> data(){ return

原创 vue el-tree树状菜单允许拖拽（同级拖拽）

以上是拖拽的，那么如果想要有搜索框搜索下边的菜单那需要做如下操作

原创 解决el-input 不能编辑输入问题

在el-input标签中添加@input=“change($event)”：去实现此change(e)方法，效果为强行刷新视图：change (e) { this.$forceUpdate() },详情见https://blog.youkuaiyun.com/weixin_45883730/article/details/108779686

原创 el-select 同时传给后端code编码和name

原创 switch 用法

methods 里写方法

原创 elment ui解决右上角弹框关闭验证不消失问题

原创 watch监听对象里边的key值的写法

原创 vue 子组件的数据如何根据ref传给父组件

父级里写个ref:<moban ref="mobanList"></moban>当父级的确定按钮点击后：var list = this.$refs['mobanList'].model.drugTable;这个list就是你的drugTable了。或者在子件的method里写个 getDrugTable(){ return this.model.drugTable;}然后父组件点确定时：var list = this.$refs['mobanList'].ge.

原创 vue 从详情页返回，保留之前的状态

原创 el-table中自定义标签

<el-popover placement="top-start" trigger="hover" v-if="nickName.length > 10" width="200"> <span v-if="nickName.length > 10" slot="reference" style="background-color:#ccc">{{nickName.substring(0, 10) + "..."}}</span> .

原创 el-table只有指定列可以复制

第一步第二步第三步

原创 table表头添加升序降序按钮，并调接口传参

先写样式画table表格然后排序调接口传参

原创 使用moment格式化日期（时间戳转格式）

https://blog.youkuaiyun.com/qq_38933412/article/details/82879127

原创 el-table 返回勾选状态并向后端传递勾选数据

<el-table ref="multipleTable" :row-key="getRowkey" :data="tableData" border height="200" :header-cell-class-name="cellClass" :span-method="handleSpan" @select="handleRow"> <el-table-column prop="productName" label="ID"></el-table-co.