![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
九号窗口
这个作者很懒,什么都没留下…
展开
-
富文本编辑器判断是否有实际输入的内容
if(isNull(tepState.content)){ ElMessage.warning("输入内容不能为空"); return; } const isNull = (content:string) =>{ let filterContent = content.replace(/<[^<>]+>/g, "").replace(/&a...原创 2022-05-24 15:08:12 · 672 阅读 · 0 评论 -
js实现复制功能
<i class="el-icon-document-copy copyIcon" @click="copyId(cardData.id)"></i> const copyId = (contentId:any)=>{ // console.log(props.cardData.id) let _input = document.createElement('input'); // 直接构建input // _input.value原创 2022-03-31 09:28:05 · 510 阅读 · 0 评论 -
vue3+ts项目使用自定义指令实现根据角色权限控制显示隐藏
在src目录下新建directives文件夹,然后在文件夹中新建一个permission.ts文件,代码如下import session from '@/utils/session';import type { ObjectDirective } from 'vue';const userInfo = session.get('unified_management_userInfo');const getRole = () => { if (userInfo && .原创 2022-03-30 11:02:14 · 1779 阅读 · 0 评论 -
Vue3+TypeScript学习笔记
ref与reactive的使用ref作用:一般用来定义一个基本类型的响应式数据,创建一个包含响应式数据的引用(reference)对象用法:js中操作数据: xxx.value,模板中操作数据: 不需要.value<template> <h2>{{count}}</h2> <hr> <button @click="update">更新</button></template><script&g原创 2022-03-21 10:01:56 · 1342 阅读 · 0 评论 -
vue根据索引修改数组里对象的属性
this.$set(this.editForm.cnofigArr[index], 'disabled', false) index为数组索引disabled为对象属性false为改后的值原创 2021-07-13 16:35:39 · 1271 阅读 · 0 评论 -
ElementUI中checkbox绑定值为布尔、字符串或数字类型
布尔值<template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox></template><script> export default { data() { return { checked: true }; } };</s.原创 2021-06-22 15:08:24 · 4138 阅读 · 1 评论 -
elementUI给动态生成的输入框加校验
<el-row v-for="(batch,couponIndex) in formData.skuInfos" :key="couponIndex"> <el-form-item class="is-shrink" :label="`商品编码${couponIndex+1}:`" :prop="'skuInfos.' + couponIndex + '.skuCode'" :rules="{required: t...原创 2021-06-09 16:21:39 · 732 阅读 · 0 评论 -
路由拦截器
import Cookies from 'js-cookie';import axios from 'axios';import { getToken } from './token';// const { CancelToken } = axios;// 初始化配置const http = axios.create({ baseURL: '/api',});// // 请求拦截器http.interceptors.request.use( (config) => {原创 2021-04-16 15:43:27 · 538 阅读 · 0 评论 -
vue条件语句v-if中条件较多时优雅写法
普通写法v-if=" type==1 || type==2 || type==3 "优雅写法v-if=" [1,2,3].includes(type) "原创 2021-01-13 15:41:46 · 4501 阅读 · 2 评论 -
vue插槽
概念插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签使用场景直接填充内容在子组件中放一个占位符<template> <div> <span>操作</span> <slot></slot>原创 2021-01-12 10:33:08 · 149 阅读 · 0 评论 -
vue自定义过滤器以及全局定义过滤器的方法
自定义过滤器html部分 <div class="item-inner"> <div class="item-title">支付方式:</div> <div>{{item.paymentMethod | paymentMethod}}</div> </div>js部分var vm=new Vue({ el:"#app", data:{ msg:'' }, .原创 2020-07-24 15:25:20 · 644 阅读 · 0 评论 -
echarts折线图标识最大值
series: [ { name: "总需量", symbolSize: 5, data: demandArr, type: "line", // smooth:true, showSymbol: false, markPoint: v...原创 2020-07-08 11:19:48 · 7064 阅读 · 0 评论 -
vue项目实现echarts图表最大化显示功能
由于echart工具栏没有提供最大化功能,只好使用elementUI的el-dialog自己写一个类似的功能,效果如下貌似这个放大效果作用不大(-_-||)下面放代码吧结构部分 <div class="picItem boxShardow"> <div class="header"> <span>功率曲线</span> <i class="el-icon-rank" @cli原创 2020-06-19 16:10:31 · 2156 阅读 · 2 评论 -
vue-element-admin项目实现excel表格导出
安装依赖npm install xlsx file-saver -Snpm install script-loader -S -D在需要导出excel的页面执行以下方法 <el-button v-if="visible" :loading="downloadLoading" style='float:right;margin:7px 10px 0 0 ' size="mini" type="info" icon="el-icon-document" @click='exportEx..原创 2020-06-17 10:33:59 · 3721 阅读 · 2 评论 -
实现elementUI的el-date-picker自动弹开
点击左边时间控件选择后自动弹出右边时间控件 <el-date-picker size="mini" v-model="monthBg" type="month" :picker-options="pickerOptions0" placeholder="选择开始月份" @change = 'chooseBg'> </el-date-picker> &.原创 2020-06-03 14:57:09 · 5962 阅读 · 0 评论 -
echart图表实现动态改变纵坐标的最小值(解决y轴波动太小问题)
yAxis: { name: "KM", type: "value", min: function(value){ return value.min; } }在yAxis属性中加入以下代码 min: function(value){ return value.min; }...原创 2020-05-20 15:44:57 · 2968 阅读 · 0 评论 -
vue项目实现定时刷新和关闭刷新功能
<div class="refleshBtn"> <el-button type="primary" plain size="mini" @click="recovery">恢复刷新</el-button> <el-button type="primary" size="mini" @click="stopReflash">停止刷新</el-button> </div&g...原创 2020-05-19 16:40:47 · 1488 阅读 · 0 评论 -
js实现时间的加减运算
let date1 = new Date('2020-04-01 17:29:30') let dateTemp = date1.setHours(date1.getHours() + 5 ) //增加5个小时 let dateTemp = date1.setDate(date1.getDate() + 7 ) //增加7天 let dateTemp = date1.setMonth...原创 2020-04-01 17:39:28 · 2224 阅读 · 1 评论 -
vue项目中iframe子页面调用父页面的方法
父页面的结构 <el-tab-pane label="派单流程" name="3"> <iframe ref='3' width="100%" height="480px" :src=dispatchUrl></iframe> </el-tab-pane>父页面中的方法methods: { ...原创 2020-03-31 10:41:55 · 6691 阅读 · 0 评论 -
elementUI的日期范围组件的编辑回显问题
elementUI的DatePicker选择日期范围时提交参数我们只需要将绑定的数组拆开即可,但在编辑时如果只是简单地将后台返回的开始日期和结束日期赋值给数组,页面上不会正常地显示日期范围,这时候就需要用到Vue的setter或$set方法赋值 vm.ruleForm.treatmentDate[0] = data.treatStartDate vm...原创 2020-03-26 11:24:10 · 3487 阅读 · 1 评论 -
如何在elementUI中message组件提示消失后执行函数
根据elementUI官网组件介绍message组件有个onClose方法,具体使用如下: vm.$message({ message: '新增成功', type: 'success', ...原创 2020-03-23 17:44:26 · 4896 阅读 · 1 评论 -
解决Chrome调试移动端项目时鼠标光标消失的问题
打开核芯显卡控制面板2.逐步找到量化范围设置项:显示器 —— 一般设置 —— 量化范围3.将量化范围设置成全范围即可原创 2020-03-05 10:34:02 · 2218 阅读 · 0 评论 -
给el-input等组件绑定点击事件
想要给elementUI的某个组件绑定一个原生事件。可以使用 v-on 的修饰符 .native<el-input v-on:click.native="showRO" v-model="relationOrder" placeholder="请选择关联订单" ></el-input> // 弹出关联订单弹框 showRO(){ ...原创 2020-03-03 10:52:50 · 4910 阅读 · 5 评论 -
实现elementUI的tabs标签页切换时每个标签页下的iframe自动重载
首先给t每个tabs标签页下的iframe绑定ref,ref的值与el-tab-pane的name属性的值一致通过tab-click方法取到当前选中标签页的iframe,然后执行刷新 <el-tabs v-model="activeName" @tab-click="handleClick" v-else> <el-tab-pane label=...原创 2020-01-05 19:25:45 · 5347 阅读 · 1 评论 -
elementUI的DateTimePicker组件日期时间格式改成yyyy-MM-dd hh:mm:ss
如果只是copy官网上的demo的话选择时间后打印出来的时间格式如下2019-12-15T05:28:29.000Z想要改成yyyy-MM-dd hh:mm:ss格式需要加上value-format属性,具体代码如下 <el-form-item label="支付时间" prop="payTime"> <el-date-picker va...原创 2019-12-15 13:33:51 · 4644 阅读 · 0 评论 -
elementUI中的表格实现表头与内容文字居中
因为elementUI的table组件没有对应的参数可以设置表头内容文字居中,所以只能通过修改样式的方式实现,代码如下.el-table td, .el-table th { text-align: center; } ...原创 2019-12-04 10:55:35 · 6676 阅读 · 3 评论 -
elementUI的表格内容进行数据转换
一般我们前后端联调的时候后台返回的数据都是数字,比如1代表上线,0代表下线。这时候就不能直接使用该字段而需要做转换,需要formatter属性,该属性用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。<el-table-column prop="createdate" label="创建时间">...原创 2019-11-14 10:37:12 · 3706 阅读 · 0 评论 -
element-UI的el-table添加序号时所有分页的序号都是从1开始的解决方法
<el-table-column type="index" label="序号" width="50"> <template scope="scope"> <span>{{offset * limit + scope.$index + 1}}</span> ...原创 2019-11-13 10:06:56 · 2895 阅读 · 0 评论 -
解决html+vue方式开发时页面加载时闪过{{页面标签}}等现象
<el-form-item :label=`选项${index+1}_描述` prop="idec"> <span v-cloak>{{item.describes}}</span> </el-form-item> <el-form-item :label=`选项${ind...原创 2019-11-12 10:43:54 · 678 阅读 · 0 评论 -
elementUI的el-select选择器同时返回选中项的value和label值
<el-select v-model="ruleForm.category" @change="selectedCag" placeholder="请选择项目类别"> <el-option v-for="item in ClaOptions" :key="item.value" :labe...原创 2019-11-08 09:42:03 · 11981 阅读 · 0 评论 -
[Vue warn]: Injection “elForm” not found报错解决方法
该错误大部分是因为elementUI与vue版本不匹配,个人解决方法是引入的时候都是用线上引入的方法,确保版本不冲突 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- <script src="../../js/vue.js">...原创 2019-11-05 15:20:08 · 9973 阅读 · 0 评论 -
vue点击列表传参进入详情页
在列表页文件的methods方法中写跳转代码 methods: { handleWatch (row) { // console.log(row.activeJobId) this.$router.push({path: 'gd_detail/', query: {id: row.activeJobId}}) }2.在详情页文件的methods方...原创 2019-01-28 17:33:56 · 12152 阅读 · 4 评论 -
Vue后台管理里系统项目前端解决跨域问题
首先找到项目目录下的config文件夹,找到index.js,覆盖以下代码 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 这里可以配置代理 '/gdapi': { target: 'http:...原创 2019-01-24 09:50:01 · 803 阅读 · 0 评论 -
调用elementUI的确认弹出框时页面右侧缩小5px的解决方法
在app.vue中的style样式里面添加body{padding-right:0 !important;}原创 2018-12-24 15:37:03 · 1982 阅读 · 0 评论 -
vue中实现点击返回上一页
vue中实现点击返回上一页<template><el-button @click="prev()">返回</el-button></template><script>export default { data () { return { } }, methods: { prev () { ...原创 2018-12-18 20:18:03 · 4251 阅读 · 0 评论 -
Vue+elementUI侧边导航栏高亮显示问题
首先给导航栏加上default-active属性,记得加上冒号 <el-menu :default-active="defaultUrl" unique-opened2.然后在data中给参数赋值 data () { return { defaultUrl: '/dashboard' } },...原创 2018-12-27 17:11:19 · 5314 阅读 · 1 评论 -
element中表格中的表头与表格内容边框错位的解决方法
在APP.vue中的style标签内加上 body .el-table th.gutter{ display: table-cell!important;}原创 2018-12-21 17:38:17 · 4643 阅读 · 0 评论 -
在vue项目中使用fontawesome字体
从官网下载压缩包 Font Awesome解压后保留css和fonts目录,其余可删除,然后将文件夹复制到vue项目的static目录下在main.js中引用css import '../static/font-awesome-4.7.0/css/font-awesome.min.css'在页面中引用 &lt;i class="fa fa-home"&gt;&lt;...原创 2018-12-27 14:36:13 · 831 阅读 · 0 评论 -
使用vue开发后台管理系统详细步骤
使用vue开发后台管理系统详细步骤1## 前期准备浏览器插件Vue.js devtoolsVS Code插件自动补全标签Auto Close TagAuto Complete TagAuto Rename Tag开启一个服务器浏览HTML网页,第一次使用需要Ctrl + Shift + p输入 live server选择openLive Server路径自动补全Path I...原创 2018-12-16 19:50:03 · 5323 阅读 · 0 评论 -
vue计算属性的简单使用
<div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <p>全名:{{fullName}}</p> <p>全名:{{fullName}}&...原创 2019-09-30 16:26:33 · 289 阅读 · 0 评论