![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
PC
九号窗口
这个作者很懒,什么都没留下…
展开
-
vue3项目中简单的wangEnduit富文本编辑器封装
组件代码<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"></div> <div ref="editor" class="text"></div> </div></template><script lang="ts"> import E from 'wang.原创 2022-04-06 17:34:33 · 503 阅读 · 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 评论 -
vue+elementUI项目封装分页组件
src/components/pagination<template><!--分页--><el-col :span="24" class="toolbar" :data-total="total" :data-size="pageSize" :data-pageSizes="pageSizes"> <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-chan原创 2021-05-31 10:56:51 · 226 阅读 · 0 评论 -
echart图表组合自定义设置tooltip的formatter
tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' ...原创 2020-12-10 17:01:14 · 854 阅读 · 0 评论 -
前端面试总结(vue篇)
vue的优点1、vue是个轻量级的框架,是一个构建数据的视图集合,大小只有几十Kb2、vue是组件化开发,适合多人开发3、vue中的双向数据绑定更方便操作表单数据4、因为vue是MVVM的框架,视图,数据,结构分离使数据的更改更为简单5、vuex可以管理所有组件用到的数据,不需要借助之前props在组件间传值6、官方文档通俗易懂,易于理解和学习;vue父子组件之间传递数据1、父组件向子组件传递数据通过props,例子如下<template> <div> .转载 2020-07-21 15:04:40 · 25585 阅读 · 1 评论 -
echarts折线图标识最大值
series: [ { name: "总需量", symbolSize: 5, data: demandArr, type: "line", // smooth:true, showSymbol: false, markPoint: v...原创 2020-07-08 11:19:48 · 7071 阅读 · 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 · 2157 阅读 · 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 评论 -
适应不同尺寸比例屏幕的css样式
div{ height: calc(100vh - 100px); }设置div的高度为当前窗口高度-100px原创 2020-06-12 14:22:39 · 847 阅读 · 0 评论 -
实现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 · 5974 阅读 · 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 · 2226 阅读 · 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 · 6692 阅读 · 0 评论 -
elementUI的日期范围组件的编辑回显问题
elementUI的DatePicker选择日期范围时提交参数我们只需要将绑定的数组拆开即可,但在编辑时如果只是简单地将后台返回的开始日期和结束日期赋值给数组,页面上不会正常地显示日期范围,这时候就需要用到Vue的setter或$set方法赋值 vm.ruleForm.treatmentDate[0] = data.treatStartDate vm...原创 2020-03-26 11:24:10 · 3489 阅读 · 1 评论 -
如何在elementUI中message组件提示消失后执行函数
根据elementUI官网组件介绍message组件有个onClose方法,具体使用如下: vm.$message({ message: '新增成功', type: 'success', ...原创 2020-03-23 17:44:26 · 4906 阅读 · 1 评论 -
基于layUI的select标签在回显的时候显示为空
解决方法:在请求成功的方法里加上以下代码 layui.use(['form'], function () { var $ = layui.$, form = layui.form; ...原创 2020-03-16 18:01:42 · 734 阅读 · 0 评论 -
基于layUI的Distpicker省市区联动失效的解决方法
使用distpicker实现省市区联动的时候发现点击选择省级后市级没反应,html代码如下 <div class="layui-form-item"> <label class="layui-form-label">籍贯:</label> <div data-toggle="distpicker" id="distpicker"...原创 2020-03-06 17:20:52 · 770 阅读 · 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 · 4918 阅读 · 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 · 5350 阅读 · 1 评论 -
解决qrcode动态生成二维码时多次点击生成多个二维码的问题
getEwm(url){ document.getElementById("qrcode").innerHTML = ""; var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: url, width: 200, height: 200, colorDark: '#000000', ...原创 2019-12-16 16:23:59 · 5547 阅读 · 0 评论 -
常用的遮罩层样式
/* 遮罩层样式 */ .mask{ position:fixed; left:0; top:0; opacity:.5; width:100%; height:100%; background:#000; z-index:...原创 2019-12-16 16:11:05 · 1161 阅读 · 0 评论 -
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 · 4647 阅读 · 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 · 3708 阅读 · 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 · 2897 阅读 · 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 · 679 阅读 · 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 · 11982 阅读 · 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 · 9980 阅读 · 0 评论 -
layUI日期时间控件闪退bug的解决方法
出现原因:页面高度不够解决方法:laydate文件中的默认配置中trigger: ‘focus’ //呼出控件方式由focus改成click //服务时间 layui.use(['form', 'laydate'], function () { console.log(new Date().getTime()) var form = layui.form, layer = la...原创 2019-10-18 17:14:34 · 1788 阅读 · 0 评论 -
后台管理系统导出Excel表格的方法
//导出Excel公共方法 function excelExport(colums,queryParams,objectName,baseUrl,sysUrl,body,title){ if(colums==null){ return; } var tableParam=new Object(); tableParam.colums=colums; tablePar...原创 2019-10-12 15:11:25 · 4050 阅读 · 0 评论 -
使用layUI时form表单中的select标签无法正常渲染option(option从后台返回)
// 获取推荐分类列表 function getRecomList(){ $.ajax({ type: 'get', url: '请求接口’, contentType: "application/json; charset=utf-8", ...原创 2019-10-09 16:27:44 · 1015 阅读 · 0 评论 -
layUI实现弹框内部使用代码关闭弹框
var index = parent.layer.getFrameIndex(window.name) //关闭当前的iframe层 parent.layer.close(index); //关闭弹框原创 2019-05-22 11:23:08 · 799 阅读 · 0 评论 -
dataTable报错:DataTables warning: table id=example - Requested unknown parameter 'null' for row 1
使用dataTable渲染表格数据的时候警报如下解决方法:经检查发现该行返回的值为null,做个判断即可 { "data":null, "bSortable": false, "render": function (data) { co...原创 2019-05-14 11:21:30 · 5552 阅读 · 2 评论