VUE
代码敲着敲着就睡了
这个作者很懒,什么都没留下…
展开
-
vue el-tabs切换 不显示echarts 宽度为0
1.通过echarts不同的id,写不同的图,调用接口展示不同的图<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="电厂" name="dc" > <div :id="'myChart1'" style="width:100%;height:160%;"></div> </el-tab-pane> &l原创 2021-12-28 14:23:10 · 1034 阅读 · 0 评论 -
vue 根据id找出数组里的对象
dsChange(id){ let selectedName = {}; selectedName = this.dsOptions.find((item)=>{ return item.dsid === id; //筛选出匹配数据,是对应数据的整个对象 }); this.formModel.ds = selectedName.ds this.formModel.dsid = selectedName.dsi.原创 2021-12-27 08:51:42 · 3675 阅读 · 3 评论 -
vue 数组查找包含某个元素
for(let i=0;self.pop2List.length>i;i++){ if(self.pop2List[i].text.indexOf("突变") !== -1){ self.pop2List[i].text = '突变' console.log(self.pop2List[i].text)}for循环数组,判断text字段是否包含‘突变’二字原创 2021-12-20 17:05:52 · 4755 阅读 · 0 评论 -
vue中比较两个数组取相同值
this.checkChange.map((x) => { this.dxmbOptions.map((k) => { if (k.lxr == x) { var listing = { name: k.lxr, lxfs: k.lxfs, ...原创 2021-12-16 16:24:15 · 3122 阅读 · 0 评论 -
vue中cookies存值
第一步 安装npm install vue-cookies --save第二步 全局引入 main.js import Vue from 'vue'import VueCookies from 'vue-cookies'Vue.use(VueCookies)第三步 设置cookiesthis.$cookies.set('selectValue', this.value,"1h") // selectValue==cookies名称// this.value==值// 1h.转载 2021-12-07 17:16:57 · 416 阅读 · 0 评论 -
vue 截取
let str = 'abcdef';// 0 str = str.slice(0);//返回整个字符串 abcdefstr = str.substring(0);//返回整个字符串 abcdefstr = str.substr(0);//返回整个字符串 abcdef// 使用一个参数str = str.slice(2);//截取第二个之后所有的字符 cdefstr = str.substring(2);//截取第二个之后所有的字符 cdefstr = str.substr(2);/.转载 2021-12-07 16:34:33 · 2309 阅读 · 0 评论 -
获取当前时间
getCurrentTime() { //获取当前时间并打印 var that = this; let yy = new Date().getFullYear(); var mm = new Date().getMonth() < 9 ? "0" + (new Date().getMonth() + 1) : new Date().getMonth() + 1; var dd = new Date().getDate() <= 9 ? "0" +.原创 2021-12-07 16:12:04 · 270 阅读 · 0 评论 -
vue 首页跳转页面,首页缓存
1.index.vue 设置name2.router js文件path 设置为'/'noCache为false,原创 2021-12-03 09:41:09 · 488 阅读 · 0 评论 -
vue 打包 报错
1.检查package.json文件,找到一下内容2.因此打包命令为:npm run build:prod原创 2021-12-03 09:37:10 · 1223 阅读 · 0 评论 -
vue el-select label显示多个值,选择后只显示其中一个
<el-select filterable @change="getHtInfo" v-model="form.hth" placeholder="请选择合同号" > <el-option v-for="(item,index) in hthOptions" :key="index" :label="item.hth + '__' + item.qdr + '__' + item.htmc" :value.原创 2021-11-12 10:24:21 · 3192 阅读 · 1 评论 -
vue 表单效验小数以及整数 及手机号身份证号
data() { var valiNumberPass1 = (rule, value, callback) => {//包含小数 let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g; if (value === '') { callback(new Error('请输入内容')); } else if (!reg.test(value)) { callback(.原创 2021-11-11 16:34:06 · 980 阅读 · 0 评论 -
vue element 表格选中的数据找出相同的值
想法:找出第一次勾选的这条数据需要用到的字段值,之后再点击的数据和第一条数据的字段值进行判断<el-table v-loading="loading" :height="tableHeight" :data="hthlList" @selection-change="handleSelectionChange" @row-contextmenu="rightClick" border></el-table><el-button type="primary"原创 2021-11-11 08:53:22 · 1883 阅读 · 0 评论 -
vue elementUI el-select 同时获取label 和 value 的值
<el-form-item label="新签订人" prop="xx"> <el-select v-model="form.xx" placeholder="请选择新签订人" @change="selectWorkName" clearable > <el-option v-for="(dict,index) in qdrOptions" :k.原创 2021-11-10 18:03:42 · 461 阅读 · 0 评论 -
vue 取消单个表单效验
<el-form-item label="合同类型" prop="htlx" :rules="this.form.ysbz=='申请到合同号即验收,不进行合同评审' ? []:form.htlx"> <el-select v-model="form.htlx" :disabled="htlxShow" placeholder="请选择合同类型"> <el-option v-for=.原创 2021-11-04 14:24:27 · 711 阅读 · 0 评论 -
vue 右键点击列表 打开菜单
1.npm install 安装--save moment vue-context-menu vue-contextmenu2.父组件<el-table v-loading="loading" :height="tableHeight" :data="xmgzList" @selection-change="handleSelectionChange" @row-contextmenu="rightClick" border> </el-t原创 2021-11-02 09:29:55 · 687 阅读 · 0 评论 -
vue 路由 query传对象
handleDetail(row) { let ryrzDetails = JSON.stringify(row) this.$router.push({path: '/ryrzDetail', query: {res: ryrzDetails}})},2.接收let ryrzDetails = JSON.parse(this.$route.query.res)this.infoForm = ryrzDetails原创 2021-10-29 11:37:30 · 1525 阅读 · 1 评论 -
vue 父组件传对象给子组件
1.父组件//子组件名<Flow :item ="this.item" @lcList="flowList"></Flow>data() { return { item:{ page:'add' }, }},methods:{ getBmOption(val){ //这里传的值 一定要写成对象的类型,如果直接赋值,子组件是接收不到的 this.item = {page:'add',原创 2021-10-28 17:47:37 · 2484 阅读 · 0 评论 -
vue 关闭当前页 跳转上一页
cancel() { this.form = {}; //关闭当前页 跳转上一页 this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1) this.$router.push(this.$store.state.tagsView.visitedView.原创 2021-10-28 13:50:57 · 3364 阅读 · 1 评论 -
vue element表格某一列内容过多,超出省略号显示
给table-cloumn添加一个属性show-overflow-tooltip<el-table-column label="描述" :show-overflow-tooltip='true'> <template slot-scope="scope"> <span>{{scope.row.ms}}</span> </template></el-table-column>.原创 2021-10-28 13:49:09 · 323 阅读 · 0 评论 -
vue 获取路由跳转地址
//跳转的路由name beforeRouteEnter (to, from, next) { next(vm => { vm.fullPath=from.name; console.log(vm.fullPath ) }); },vm 相当于this原创 2021-10-27 16:56:38 · 1231 阅读 · 0 评论 -
vue 插槽 及传参
1.子组件<template> <div class="over"> <div >{{titles}}</div> <slot name="h1"></slot> <div class="b2">22</div> <div class="b3"> 3</div> </div></template><sc原创 2021-10-22 08:20:29 · 929 阅读 · 0 评论 -
vue echarts 每次调用接口没有清除上一次内容
initChart() { this.chart = echarts.init(document.getElementById("myChart")) var option = { backgroundColor:'#232d36', tooltip: { trigger: 'axis', axisPointer: { lineStyle: { .原创 2021-09-16 14:08:10 · 537 阅读 · 0 评论 -
vue 父组件调用子组件方法
1.子组件写一个方法2.父组件<div @click="showDetail(scope.row)"> <line-Ktj :region="this.region" ref="mychild"></line-Ktj></div>showDetail(item){ this.$refs.mychild.getCode();}原创 2021-09-16 11:22:31 · 89 阅读 · 0 评论 -
vue element 动态导航菜单
1.写两个vue文件:SecondMenu.vue 和 index.vue2.SecondMenu.vue<template> <div> <!--if包含子级--> <!--levelId为唯一id--> <el-submenu :key="item.levelId" :index="item.levelId" v-if="item.children"> <template slot="ti原创 2021-09-16 08:20:52 · 949 阅读 · 0 评论 -
echarts地图放大拖拽
let option = { color: ['#FF8C00', '#00acea', '#1DE9B6'], tooltip: { trigger: 'item', formatter: '{b}' }, geo: { map: '滁州', // aspectSca.原创 2021-08-26 14:49:05 · 1303 阅读 · 0 评论 -
vue echarts 拖拽事件和点击事件冲突
需求:echarts地图单击地图外的区域时,需要返回上一级。地图需要放大时候进行拖拽,鼠标松开后,还是会返回上一级<div id="parent" @click="closeMap" @mousedown="mousedown" > <div v-if="!flagMap" id="chartDs" ref="totalChart" style="width: 900px;height: 900px;margin-left:0;" ></div>&原创 2021-08-26 14:40:30 · 1076 阅读 · 0 评论 -
vue echarts 清除数据
myChart.on('click',function(param){ myChart.dispose();//消除数据})原创 2021-08-24 14:39:59 · 1703 阅读 · 0 评论 -
vue echarts 地图立体 并设置tooltip属性背景图片
这是做完的样子1.地图立体的代码,map应与series中的一致//地图立体的代码,map应与series中的一致geo: { map: '34', aspectScale: 1, //长宽比 zoom: 1, roam: false, itemStyle: { normal: { ..原创 2021-08-16 16:18:43 · 1989 阅读 · 0 评论 -
vue el-table 合计计算
<el-table :data="tableData" ref="table" tooltip-effect="dark" border show-summary :summary-method="getSummaries" stripe id="table" :max-height="tableHeight"> <el-table-column label="应付账款" prop="yfk" ali..原创 2021-07-30 11:42:17 · 1122 阅读 · 0 评论 -
vue echarts 柱状图因高度太低难以点击
initChart() { var myChart = echarts.init(document.getElementById('lineChart')); this.chart = echarts.init(this.$el, 'macarons') this.chart.setOption({ grid: { left: '3%', right: '4%', .原创 2021-07-27 11:22:40 · 1309 阅读 · 0 评论 -
vue el-dialog 如何在子组件使用
1.父组件<div class="lcyHeadline" @click="xgystz" > 新供应商拓展</div><table-chart :xgystzShow="xgystzShow" @close-dialogStatus="CloseDialog"></table-chart>data(){ return{ xgystzShow: false, //默认不显示弹窗 }}方法:xgys原创 2021-07-20 10:43:19 · 909 阅读 · 0 评论 -
vue 屏幕自适应及全屏放大缩小
1.<div id="screen-content" > <div id="main"> <!--这里放内容--> </div></div>2.data中data(){ return{ screenWidth: document.documentElement.clientWidth,//屏幕宽度 screenHeight: document.documentElement.原创 2021-07-19 17:30:28 · 3750 阅读 · 0 评论 -
localstorage和sessionstorage
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。localStorage 属性是只读的。一、web storage和cookie的区别大部分现代浏览器 Storage 的存储限制大小为 5M,cookie 的存储大小限制原创 2021-07-16 10:30:57 · 105 阅读 · 0 评论 -
el-form 点击重置返回第一次数据 json.stringify()与json.parse()
在列表点击修改的时候,弹出el-form,点击重置返回第一次数据//修改 handeleUpdate(item) { //保存下来要重置返回的数据 this.thisItem = JSON.stringify(item); console.log(this.thisItem ) this.title = "修改"; this.dialogVisible = true; this.form =原创 2021-07-15 14:09:01 · 351 阅读 · 0 评论 -
vue 动态父组件传值给子组件
父组件先在父组件引入子组件import liChart from './dashboard/liChart';components: { pieChart,linesChart,piesChart,piChart,liChart },<div class="block"> <el-date-picker v-model="month" type="month" placeholder="选择月" value-form原创 2021-07-12 09:51:16 · 123 阅读 · 0 评论 -
vue 子组件传值给父组件
子组件通过$emit触发父组件中的自定义函数,第一个值为自定义函数名,后面的参数是向父组件传的值子组件<van-button @click="adcd" type="info">搜索</van-button>adcd(){ this.$emit('adc',this.infoDialogVisibles)}父组件<lines-Chart @adc="change"></lines-Chart>change(params)原创 2021-07-12 08:48:53 · 68 阅读 · 0 评论 -
vue element表格筛选条件filter
<el-table :data="detailData.filter(data => !searchInput || data.bdz.includes(searchInput) || data.lx.includes(searchInput) || data.dydj.toLowerCase().includes(searchInput.toLowerCase()) || data.dq.includes(searchInput))" ref="detailRef" height="500".原创 2021-07-05 09:59:06 · 1469 阅读 · 0 评论 -
JavaScript eval()函数的用处
eval的作用其实很简单,就是把一段字符串传递给JS解释器,由Javascript解释器将这段字符串解释成Javascript代码,并且执行他。语法为 eval(string),string 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。<script type="text/javas原创 2021-06-30 14:51:01 · 141 阅读 · 0 评论 -
vue 中的 store 和 $store 的区别
<router-link to="/login">{{ $store.state.userName }}</router-link><router-link to="/login">{{ store.state.userName }}</router-link><router-link to="/login">{{ this.store.state.userName }}</router-link>等价于 script 中的 .原创 2021-06-30 14:26:59 · 1041 阅读 · 0 评论 -
vue element tree 列表增加自定义图片
<el-tree :data="data" :props="defaultProps" node-key="id" :default-expanded-keys="Arr" highlight-current @node-click="handleNodeClick" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span> .原创 2021-06-28 11:20:22 · 412 阅读 · 0 评论