- 博客(55)
- 收藏
- 关注
RSS订阅
原创 vue一个页面中分多个模块，使用组件写法
index.vue页面<dataItem v-for="(item,index) in dataItemParams" :key="item.name" :name="item.name" :type="item.type" :iconName="item.iconName" :value="staticIndexData[index]" :unit="item.unit" :settings=“item.setti
2021-01-11 11:02:47
2257
1
原创 [Vue]“TypeError: Cannot read property ‘0‘ of undefined“的解决方法
原因：请求不到数据，vue在拿到数据之前就已经渲染完了页面，所以我们采用延迟渲染页面的方法。先获取数据，再渲染页面。解决方法：在mouted中，将要执行的函数使用延时setTimeout()方法包裹 mouted:{ setTimeout(() => { this.showRingChart() }, 1000) }...
2020-12-01 15:53:37
7878
1
原创 bus.$emit和bus.$on的用法
bus用来传递非父子关系的数据如两个子组件之间传递数据子组件1this.bus.$emit("change",param)子组件2this.bus.$on("change",function(param){})补充：子组件中也可以写成这样的箭头函数this.bus.$on("change",para=>{})...
2020-10-29 10:28:19
7008
原创 vue斑马纹表格颜色设置，使两种不同的颜色间隔出现，表格背景颜色设置透明度
<el-table :cell-style="cellStyle" :header-cell-style="{ color: '#fff', background: 'rgba(78, 131, 211, 0.8)' }" :data="tableData" style="width:100%;color:white;" > </el-table>:header-cell-style是表头的样式设置:cell-style就是斑马纹表格..
2020-10-29 09:56:52
4267
原创 vue中的find()函数的用法与扩展用法
find函数基本格式：let obj=this.list.find(item=>item.code===val)首先在这里我们要知道的两个基础知识一、find是一个查找函数。二、箭头函数find(item=>item.code===val)相当于find(item){item.code===val}其中list是数组，this.list.find()是指在list数组中找某样东西，item是find()函数的寻找某样东西的根据，也可以说是id或者是主键。后面item.code===val
2020-10-27 15:18:12
30062
5
原创 vue中v-chart双y轴折线图的使用
效果图：双y轴都有数据代码：<template> <ve-line :data="chartData" :extend="traderExtend" :seetings="chartSettings" :colors="colors"></ve-line></template><script>export default{ data() { return { tableData: [], ch
2020-10-16 15:51:21
2451
原创 vue中给el-dialog添加滚动条
页面代码<el-scrollbar style="height:700px;"> <el-dialog></el-dialog>//此处为dialog的代码</el-scrollbar>css代码.el-scrollbar__wrap { overflow-x: hidden!important;}
2020-10-12 14:52:21
11932
原创 vue对table的某一行的数据进行编辑，删除，查看详情操作
效果图在html中需要对button按钮进行template包裹，scope.row就是这一行的数据<el-table-column label="操作"><template slot-scope="scope"><el-button type="primary" @click="editProgram(scope.row)">编辑</el-button><el-button type="danger" @click="del(scope.r
2020-09-30 14:13:57
2861
原创 面试题集锦
1、hash和history的区别https://blog.csdn.net/z591102/article/details/106613284https://blog.csdn.net/lk19910323/article/details/124339381
2022-05-25 17:14:47
86
原创 在运行vue项目时，遇到Use // eslint-disable-next-line to ignore the next line.
在vue.config.js中添加配置，再重新启动，完美解决 lintOnSave: false, devServer: { overlay: { warning: false, errors: false } },
2021-08-30 13:37:00
867
原创 2021-08-27openlayers加载动态地图服务
先看下官网，需要加的参数如下。方法源代码如下 function loadDynamicLayer(url, layerId, zIndex, vls, token) { const showLayers = 'show:'.concat(vls) const layer = new ol.layer.Image({ source: new ol.source.ImageArcGISRest({ url: url,//token不能放在url后面，必须放在参
2021-08-27 09:21:28
350
原创 vuex的使用
本片博文用于自学，摘抄至官网。（一）取出store中存储的数据1、第一种方法template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } }2、第二种方法，使用mapState辅助函数，用于获取多个数据computed:{ mapState([ // 映射 this.count 为 store.state.c
2021-08-19 15:39:32
70
原创 水平居中块级元素如div
一、水平居中块级元素：margin:auto;二、水平居中元素中中的文本：text-align:center;三、图片居中对齐：display:block;margin:0 auto;四、div实现右对齐的两种方式：①position:absolute;right:0px;②float:right;(如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "在父元素上添加 overflow: auto; " 来解决该问题。)五、div中的文本居中line-heigh
2021-06-24 10:19:45
63
原创 vue前端生成二维码列表
<div v-for="(item,idx) in dataList" :key="idx"> <div :id="`qrcode${idx}`"></div><!--id用来标识出div的唯一性 --></div><script>import QRCode from "qrcodejs2"; // 引入qrcodedata(){ return{ dataList:[] }}methods(){
2021-06-23 09:27:44
260
原创 vs code解决浏览器兼容问题
第一步：npm install --save babel-polyfill第二部：在main.js中引用import 'babel-polyfill'注：如果安装报错，可删除node_modules文件夹，然后重新npm install。
2021-04-02 17:09:41
506
原创 比较好用的js写法
一、返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。var arr = ['a', 'b', 'c'];console.log(Object.keys(arr)); // console: ['0', '1', '2']二、Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。const o1 = { a: 1 };const o2 = { b: 2 };
2021-04-02 17:05:29
131
原创 在对象中，key值不相同，value值相同，去重方法
这里打印出来的是对象，格式是key:value，去掉重复的value的方法。方法：图片中打印出来的是this.listlet arr =Object.value(this.list);//把value中的数据全都取出来let set =new Set(arr);//去重this.newList=Array.from(set);//将Set结构的数据转换为真正的数组...
2021-01-29 14:58:54
437
原创 vue按照不同的button切换页面
展示效果图<el-button-group> <el-button type="primary" size="small" :plain="optType==='1'" @click="switchOptType('0')">竹节图</el-button> <el-button type="primary" size="small" :plain="optType==='0'" @click="switchOptType('1')">调度表</
2021-01-14 11:17:33
477
原创 map函数理解
map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。map函数对空数组无效。map函数不会改变原数组。let echartData = [ { name: '工单类型一', finishNum: 23, unfinishNum: 33 }, { name: '工单类型二', finishNum: 10, unfinishNum: 19 }, { name: '工单类型三', finishNum: 40, u
2021-01-12 10:28:19
797
原创 vue使用for循环展示图片列表
<div class="icon-list-container"> <div class="icon-list" v-for="item in items" :key="item.name"> <!--此处是vue加入图片的一种方法 --> <img :img="base64Config[`${item.icon}`]" alt="" /> </div></div>return{ base64Conf
2021-01-12 09:48:22
2736
原创 vue.js三个同样的div,div里放不同的数据，使用组件的写法
需求：三个同样的div,div里放不同的数据解决方案：组件里面写样式，index页面放数据组件：<div class="data-item-with-icon"> <div class="data-item-with-icon-name">{{name}} </div> <div class="data-item-with-icon-value">{{data}}</div></div>.data-item-with
2021-01-07 10:34:52
699
原创 vue.js修改密码表单
<el-button plain @click="changePassword" size="small">修改密码</el-button><div> <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px" top="30vh"> <el-form :model="form" :rules="rules" ref="form"> &l
2021-01-07 09:41:15
588
原创 vue模板开发，for循环里嵌套for循环
<div class="company-item" v-for="(item,index) in companyList"> <el-row type="flex"> <el-col :span="3"> <img :src="base64Config[item.img]" /> </el-col> <el-col :span="7" v-for="(ele,i) in i
2020-12-22 10:28:18
897
原创 vue使用watch监听器
千米与米之间的转换（不能使用箭头函数监听）千米：<el-input type="text" v-model="kilometers"></el-input>米：<el-input type="text" v-model="meters"></el-input>data:{ kilometers, meters }watch:{ kilometers:function(val){ this.meters=val*100
2020-12-21 16:01:38
116
原创 vue中ref的使用方法，ref与prop的区别
1、ref加在普通元素上，使用this.ref.name获取到的是dom元素。2、ref加在子组件上，用this.ref.name获取的是组件实例，可以使用组件的所有方法。例：<busIndustry ref="busIndustry"></busIndustry>import busIndustry from './components/busIndustry'components:{ busIndustry }mouted:{ this.search(
2020-12-21 15:36:42
1023
原创 vue.js使用正则表达式校验填入表单的数据格式
设置数据格式<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item prop="telephone" label="联系方式:"> <el-input v-model="form.telephone" placeholder="请输入资源需求方联系人可用11位的固话或手机号码"> </el-form-item></el-form&
2020-12-21 11:10:36
669
原创 es6常用语法: alert、定义对象、拓展运算符(...)、find()函数
alert`hello world!`//等价于alert('hello world!')定义对象const person = {age,name}拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。let person={name:“Amy”,age:15};let someone={…person};someone;//{name:“Amy”,age:15}find()函数let arr=Array.of(1,2,3,4);console.log(arr.find(
2020-12-16 10:23:40
235
原创 vue使用switch切换审核状态
<el-form-item label="审批状态："> <el-input :value="getStatus(form.applyStatus)" ></el-input> </el-form-item>methods:{ getStatus(code) { let str = '' switch (code) { case '0': str = '申请中...
2020-12-16 10:22:23
755
原创 vue修改表格头的样式
<el-table :data="tableData" :header-cell-style="rowClass"></el-table>methods:{ rowClass(){ retrun 'background:#ff;color:#333333;font-weight:600' }}
2020-11-27 10:36:59
195
原创 vue整数校验和不能以零开头校验
要求不能有小数点，不能以0开头 <el-form-item label="人数：" prop="num"> <el-input :value="ruleForm.num" type="number" @input="(e) => (ruleForm.num= isnumber(e))"></el-input> 人 </el-form-item>methods:{ isnumber(val) {
2020-11-27 09:56:27
1406
原创 vue使用watch监听查询条件变化，查询结果发生变化
当点击完不同的选项的时候，查询条件会变化。<el-select v-model="search.company"> <el-option label="选项一" value="0"></el-option> <el-option label="选项二" value="1"></el-option></el-select>watch:{ 'search.company':{ handler(){ this.i.
2020-11-26 09:38:03
705
原创 vue.js:router路由跳转页面并且进行带参查询
this.$router.push{ path:'/index' query:{ params:item.id }}
2020-11-16 15:26:23
271
原创 array.slice(0,3)
截取数组中的值array=[1,2,3,4,5,6,7,8,9]array.slice(0,3)//包含1，但是不包含3，所以取的是第0，1，2位数字得到数组[1,2,3]
2020-11-16 15:09:19
891
原创 使用＜component :is=““＞＜/component＞一个页面，多个相似组件使用方法
<component :is="`zuJian${type}`" :settings="settings"></componen>import Zujian1 from './components/zujian1'import Zujian2 from './components/zujian2'props:['settings']components:{ zujian1, zujian2}
2020-11-16 15:02:59
1253
原创 父子组件之间的传值
父子组件之间的传值子组件：<el-menu @select="selectMenu"> <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index"> <div slot="title">{{ item.title }}</div> </el-menu-item></el-menu>props:{
2020-11-16 13:56:21
115
原创 vue两个子组件之间的传值
两个子组件之间传值，最好使用一个中间桥梁父组件来进行传值。子组件1—>父组件—>子组件2本例想实现的功能：把子组件1中的status传递到子组件2子组件1： <el-table :header-cell-style="{ background: '#3A5FA6', color: '#fff', fontWeight: 'bold' }" :data="tableData" stripe height="770px"
2020-11-16 10:45:21
1576
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人