vue.js 根据select框的内容显示或隐藏div

根据下拉框的显示内容显示或隐藏div,非选中事件,而是别的页面跳转过去的,请问是使用v-if来实现的么

1个回答

是用v-if来实现,但是问题描述逻辑还是有点乱

qq_26744901
正在输入代码中 回复chronomancy: 理论上只有触发了数据绑定,不管事if或者show都会去执行的,重新渲染
2 年多之前 回复
chronomancy
chronomancy 是这样,表单的内容在编辑的时候可以自动获取到,在下拉框选择或者显示某个option时显示或隐藏部分div,我现在用的是@change和v-show,请问用v-if该如何实现,替换v-show的话似乎不能成功
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js select 多级联动 动态显示option
![图片说明](https://img-ask.csdn.net/upload/201912/17/1576546969_658423.jpg) 出题章节后面的下拉框里面选中的值,在其他的下拉列表中剔除 例如,在第一个select选中Java,其余的都不显示Java选项,包括新添加的部分 或者说在点击保存的时候校验一下select的选中值不能有重复的,如果有就提示用户哪几个重复 代码部分如下 ```vue <el-dialog :title="titleDialog" :visible="dialogFormSection" :before-close="cancelSection" width="1000px"> <el-form :model="formSection" :rules="sectionRules" ref="formSection"> <el-form-item label="选择题型:" :label-width="labelWidth" prop="questionType"> <el-select v-model="formSection.questionType" @change="selectQuestionType"> <el-option v-for="item in questionTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="部分名称:" :label-width="labelWidth" prop="sectionName"> <el-input v-model="formSection.sectionName" style="width: 500px"></el-input> </el-form-item> <el-form-item label="总题目数量:" :label-width="labelWidth" prop="questionScore" id="allQuestion-content"> <span>{{allQuestionNum}}</span> <span style="margin-left: 50px"> 每题分数 <el-input v-model="formSection.questionScore" style="width: 80px;margin-left: 10px"></el-input> 分 </span> <span style="margin-left: 50px">总分数:{{allScore}}分</span> <el-button type="text" style="float: right" @click="addProblemRules">添加出题章节</el-button> </el-form-item> <div v-for="(item,index) in sectionData" :key="item.id" class="addSection-content"> <div class="content"> <div style="margin-top: 10px"> {{index+1}}、出题章节(多选): </div> </div> <div class="content"> <el-select style="width: 170px" multiple collapse-tags v-model="item.repositorySectionIdList" @change="changeRepositorySectionId(item.repositorySectionIdList, index)"> <el-option v-for="item1 in courseChapterOptions" :key="item1.id" :value="item1.id" :label="item1.name"></el-option> </el-select> </div> <div class="content"><div style="margin-top: 10px">出题数量:{{item.partStrategyQuestionNum}}</div></div> <div class="content" v-for="(item2,index2) in item.automaticRuleDifficultList" :key="index2"> <span> {{item2.difficultName}} <el-input class="difficult-content" v-model.number="item2.difficultNum"></el-input>/ <span v-for="(item3,index3) in sectionQuestionArr[index]" :key="index3" >{{(item3.difficult === item2.diffcultType) ? item3.quantity : ''}}</span> </span> </div> <div class="content"><el-button type="text" @click="deleteChapter(item,index)">删除</el-button></div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitSection">保 存</el-button> <el-button @click="cancelSection">取 消</el-button> </div> </el-dialog> addProblemRules(){ this.$refs.formSection.validate((valid) => { if(valid){ //把请求回来的难度list放到sectionData中,用于显示 // for(let i=0,len=(this.sectionData.length)+1;i<len;i++){ this.automaticRuleDifficultList.forEach(e=>e.difficultNum = 0); this.sectionData.push({ //由于vue数据双向绑定问题,automaticRuleDifficultList会动态改变,不能区分数组项 //进行转换 automaticRuleDifficultList:JSON.parse(JSON.stringify(this.automaticRuleDifficultList)), }) let tempArr = new Array(); for(let i=1;i<6;i++){ let obj = Object({quantity: 0, difficult: i}); tempArr.push(obj); } this.sectionQuestionArr.push(tempArr); } }) }, ```
vue使用v-for循环直接使用方法获得的数组问题
vue使用v-for循环直接使用方法获得的数组,代码 ``` <div id="test"> <select placeholder="请选择"> <template v-for="(item,index) in getList('a')"> <option v-if="item" :label="item" :value="item"></option> </template> </select> <input v-model="str"/> </div> <script> var test = new Vue({ el:"#test", data:{ arr:{ a:[1,2,3,4], b:[5,6,7,8] }, str:"" }, methods:{ getList:function(name){ return this.arr[name] } } }) </script> ``` 像这样,只要整个test发生变化就会调用getList方法,就比如我在input输入也会调用getList,各位大神有解决方法吗
如何解决vue和iview组件库结合适合时在某些情况下的内存泄漏问题
demo如下 ``` <Button @click="toggle=!toggle">切换显示</Button> <div v-if="toggle"> //这个select是iview提供的组件,非原生select <Select> <Option :lable=“’apple‘” :value="apple"> <Option :lable=“’orange‘” :value="orange"> </Select> </div> ``` 上述代码片段,在多次点击button进行显示隐藏的切换后,页面内存急速升高,不会回落导致浏览器卡死崩溃。 vue官网解释这种情况下需要手动去destory这个组件,翻了下iview文档没有相关的destory方法,有大佬遇到过这样的情况,该怎么解决呢。 补充一下,单纯用上面的demo去试,可能内存升高的不是那么快那么明显,但是页面这样的节点特别多的时候就很明显了。
vue的vuescroll插件苹果手机滑动不了,安卓手机没有问题
大佬们救助啊!!! ```<template> <div style="margin-top:-80px;"> <div class="page__hd"> <div class="weui-form-preview__ft"> <label class="weui-form-preview__btn weui-form-preview__btn_default"> <span @click="toIndex" style="color:rgb(0, 0, 0);">&lt;返回</span> </label> <label type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:" style="color:rgb(0, 0, 0);" >{{this.zqName}}合同</label> <label type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" style="color:rgb(0, 0, 0);" @click="select" > 筛选 <img src="../assets/000.png" height="20px" width="20px" /> </label> </div> </div> <div class="pr-wrap_tra" style=" overflow-y: scroll;touch-action: pan-y;-webkit-overflow-scrolling: touch;"> <div class="wrap-part_tra first_tra" > <vuescroll ref="vs" :ops="ops" @refresh-start="handleRS" @load-before-deactivate="handleLBD" @refresh-before-deactivate="handleRBD" @load-start="handleLoadStart" > <div v-for="item in ContractList" :key="item.dictid"> <div class="contractList_css_tra"> <div class="list_css_tra" @click="jumppage(item.dictid)"> <span style="float:left;">{{item.farmername}}</span> <span style="float:right;" v-if=" item.isrecord=== 0">糖厂未上报</span> <span style="float:right;" v-if=" item.isrecord=== 1">乡政府退回</span> <span style="float:right;" v-if=" item.isrecord=== 2">县政府退回</span> <span style="float:right;" v-if=" item.isrecord=== 5">糖厂已上报</span> <span style="float:right;" v-if=" item.isrecord=== 6">乡政府已上报</span> <span style="float:right" v-if=" item.isrecord=== 7">县政府已备案</span> <br /> <span style="color:#4169E1;float:left;margin-top: -5px;">({{item.ocnum}})</span> <!-- <p style="float:left; font-size:15px; color:#C0C0C0; margin-top: 5px" >&nbsp;&nbsp;{{item.signdate}}</p> --> <br /> <hr style="width: 100%;" /> <div class="tr_css_tra"> <table class="table_css_tra"> <tr class="title_tra"> <td>种植面积</td> <td>种植产量</td> <td>风险值</td> </tr> <tr class="content_tra"> <td>{{item.area?item.area.toFixed(2):0}} <span style="font-weight:bold;font-size: 13px;">亩</span> </td> <td>{{item.yeild?item.yeild.toFixed(2):0}} <span style="font-weight:bold;font-size: 13px;">吨</span></td> <td v-if=" item.isrecord == 0"> <span style="font-weight:bold;font-size: 13px;">-</span></td> <td v-if=" item.isrecord > 0 && item.matchstate ==0"> <span style="font-weight:bold;font-size: 13px;">计算中</span></td> <td v-if=" item.isrecord > 0 && item.matchstate ==1"> {{item.riskevaluation}} <span style="font-weight:bold;font-size: 13px;">%</span></td> </tr> </table> </div> <hr style="width: 100%;" /> <span style="float:left; margin-top: 10px; ">{{item.departname?item.departname:''}}</span> <span style="float:right; margin-top: 10px;">详情></span> </div> </div> </div> <div id="nodata" style="display:none">{{this.context}}</div> </vuescroll> </div> </div> </div> </template> <script> import vuescroll from "vuescroll"; import farmers from "@/api/farmers"; import indexApi from "@/api/index"; import Vue from "vue"; import axios from "axios"; export default { name: "myvuescroll", props: { // 语言 lang: { default: "zh" // en }, // 距离底部触发自动加载的距离 autoLoadDistance: { default: 10 }, // 是否开启下拉刷新 isRefresh: { default: true }, // 是否开启上拉加载 isPushLoad: { default: true }, // 数据是否全部加载完成 true为全部加载完成 noData: { default: false }, // 下拉刷新开始 refreshStart: { default: () => {} }, // 下拉刷新完成之后 refreshDeactivate: { default: () => {} }, // 上拉开始 loadStart: { default: () => {} }, // 上拉完成之后 loadDeactivate: { default: () => {} } }, components: { vuescroll }, data() { const config = {}; const ops = { vuescroll: { mode: "slide", pullRefresh: { enable: this.isRefresh }, pushLoad: { enable: this.isPushLoad, auto: true, //是否自动触发加载 autoLoadDistance: this.autoLoadDistance } } }; if (this.lang == "zh") { ops.vuescroll.pullRefresh.tips = { deactive: "下拉刷新", active: "释放刷新", start: "刷新中...", beforeDeactive: "刷新成功!" }; ops.vuescroll.pushLoad.tips = { deactive: "上拉加载", active: "释放加载", start: "加载中...", beforeDeactive: "加载成功!" }; } return { ops, config, pageNo: 1, isfirstload: false, end: 0, is: true, ContractList: [], zqName: "", minrisk: 0, maxrisk: 0, farmersName: "", contractCode: "", record: "", data: {}, zqCode: "", departCode: "", xzCode:"", user:{}, sx:true, xl:true, presser:'', context:'', //, maxarea:0, // minarea:0, // isrecord:0, // ocnum:0, // farmername:'' }; }, // created: function() { // this.myInstalHomeFun(); // }, created:function(){ this.user = this.$route.params.user; this.zqCode = this.$route.params.zqCode; this.departCode = this.$route.params.departCode; this.xzCode=this.$route.params.xzCode; this.zqName = this.$route.params.zqName; this.presser = this.$route.params.presser; }, mounted: function() { this.minrisk = this.$route.params.minrisk; this.maxrisk = this.$route.params.maxrisk; this.farmersName = this.$route.params.farmersName; this.contractCode = this.$route.params.contractCode; this.record = this.$route.params.record; this.FarmersContractList(); //需要触发的函数 // alert(this.minrisk) // alert(this.maxrisk) // alert(this.farmersName) // alert(this.contractCode) // alert(this.record) }, methods: { // FarmersContractList() { // let _this = this; // axios({ // url: // "/api/cloudec/fo/order/OrderContractController/GetOrderContractPage", // method: "post", // data: { // pageNo: 1, // pageSize: 10 // this.data=this.$route.query; // // this.maxarea=this.$route.query.maxarea; // // this.minarea=this.$route.query.minarea; // // this.isrecord=this.$route.query.isrecord; // // this.ocnum=this.$route.query.ocnum; // // this.farmername=this.$route.query.farmername; // }, // 刷新开始 // vsInstance vm===this // refreshDom === 刷新dom handleRS(vsInstance, refreshDom, done) { if (this.refreshStart) { this.refreshStart(done); } else { //this.setDone1(done); done(); } }, // 刷新完之后 handleRBD(vm, loadDom, done) { if (this.refreshDeactivate) { this.refreshDeactivate(done); } else { setTimeout(() => { this.setDone1(done); }, 600); } }, // 上拉开始 handleLoadStart(vm, dom, done) { if (this.loadStart) { this.loadStart(done); } else { if (this.isfirstload) { //this.setDone(done); done(); } else { done(); this.isfirstload = true; } } }, // 上拉完成后 handleLBD(vm, loadDom, done) { if (!this.$parent.noData) { if (this.loadDeactivate) { this.loadDeactivate(done); } else { setTimeout(() => { this.setDone(done); //done(); }, 600); } } else { setTimeout(() => { this.setDone(done); //done(); }, 600); } }, // 手动触发 外部通过ref触发 // type load 为加载 refresh 为刷新 trigger(type = "load") { this.$refs["vs"].triggerRefreshOrLoad(type); }, setDone(done) { if(this.sx){ this.pageNo++; this.FarmersContractList(); } done(); }, setDone1(done) { if(this.xl){ this.xl=false; this.ContractList = []; this.is=true; this.pageNo = 1; this.FarmersContractList(); } done(); }, FarmersContractList(done) { let _this = this; if (_this.is) { indexApi.FarmersContractList(this.pageNo,this.maxrisk,this.minrisk,this.record,this.contractCode,this.farmersName,this.departCode, this.zqCode,this.presser,this.xzCode,this.zj) .then(function(response) { // response.data中获取ResponseData实体 // alert(response); if(response.data.pageSize==0){ _this.context="暂无数据"; } for (var i = 0; i < response.data.page.dataList.length; i++) { _this.sx=false; _this.xl=false; _this.ContractList.push(response.data.page.dataList[i]); } _this.sx=true; _this.xl=true; if (response.data.page.totalPage == _this.pageNo) { _this.is = false; _this.context="暂无更多数据"; } //_this.ContractList = response.data.page.dataList; }) .catch(function(error) { // 发生错误 }); } else { //document.getElementById("nodata").style.display = "block"; } }, select() { this.$router.replace({ name: "select", params: { user: this.user, departCode:this.departCode, zqCode:this.zqCode, xzCode:this.xzCode, zqName:this.zqName, presser:this.presser } }); }, jumppage(val) { this.$router.replace({name: "contractInfo", params: { user: this.user,dictid: val, departCode:this.departCode, zqCode:this.zqCode, xzCode:this.xzCode, zqName:this.zqName, presser:this.presser}}); }, toIndex(){ this.$router.replace({name: "index"+this.user.wxUserInfo.userType, params: { user: this.user}}); } } }; </script> <style> .pr-wrap_tra { display: flex; height: calc(93vh); justify-content: center; width: 100%; } .pr-wrap_tra .wrap-part_tra { height: 100%; width: 100%; } .pr-wrap_tra .wrap-part_tra .first_tra { width: 100%; width: 100%; } .contractList_css_tra { position: relative; margin: 0 auto; width: 90%; height: 170px; background-color: #ffffff; border-radius: 5px; padding: 10px 10px 10px 10px; box-shadow: 5px 5px 10px 2px#DCDCDC; margin-bottom: 20px; } .tr_css_tra { margin: 10px 10px 10px 10px; /* border: 1px solid red; */ } /* .table_tra { width: 100%; text-align: center; margin-top: 50px; position: relative; margin: 0 auto; } */ .content_tra { color: #045ce4; } .table_css_tra{ width: 100%; text-align: center; margin-top: 50px; position: relative; margin: 0 auto; } </style> ```
vue 修改的时候报undefind错误
<template> <el-container v-loading="loadingData" style="height: 100%" class="app-container calendar-list-container"> <el-header height="62px" class="filter-container"> <el-row> <el-col :span="21"> <el-form :inline="true" :model="formSearch" class="demo-form-inline"> <el-form-item> <el-input v-model="formSearch.value" placeholder="请输入水道名称" clearable></el-input> </el-form-item> <el-form-item> <el-select v-model="formSearch.type" filterable clearable placeholder="请选择水道类型"> <el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item> <el-select v-model="formSearch.official" placeholder="请选择水道性质" filterable clearable> <el-option key="true" label="正式水道" value="true"></el-option> <el-option key="false" label="测试水道" value="false"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="loadMain" size="small" icon="el-icon-search" round>搜索</el-button> </el-form-item> </el-form> </el-col> <el-col :span="3" style="text-align: right"> <el-button @click="handleAdd" v-show="visibleBtnAdd" type="success" size="small" icon="el-icon-plus" round>新增水道</el-button> </el-col> </el-row> </el-header> <el-main ref="layoutMain" class="table-container"> <el-table :data="dataMain" :height="heightMain" stripe highlight-current-row class="el-table-border"> <el-table-column prop="name" label="水道名称"></el-table-column> <el-table-column prop="swzName" label="水位站"></el-table-column> <el-table-column prop="typeName" label="水道类型" width="100"></el-table-column> <el-table-column prop="isOfficial" label="水道性质" align="center" width="100" :formatter="formatOfficial"></el-table-column> <el-table-column prop="startName" label="水道起点" width="100"></el-table-column> <el-table-column prop="endName" label="水道讫点" width="100"></el-table-column> <el-table-column label="里程" width="100"> <template slot-scope="scope">{{ Math.abs(scope.row.endMileage - scope.row.startMileage) + '公里' }}</template> </el-table-column> <el-table-column prop="remark" label="水道概况" width="200"></el-table-column> <el-table-column label="操作" align="center" fixed="right" width="150"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row)" v-show="visibleBtnEdit" type="primary" size="mini" round plain>编辑</el-button> <el-button @click="handleDelete(scope.row)" v-show="visibleBtnDelete" type="danger" size="mini" round plain>删除</el-button> </template> </el-table-column> </el-table> </el-main> <el-footer> <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" :current-page="dataPage" :page-sizes="[10, 20, 50, 100]" :page-size="dataSize" :total="dataTotal" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </el-footer> <el-dialog :title="dataRecordTitle[actionDialogRecord]" :visible.sync="visibleDialogRecord" :close-on-click-modal="false" :before-close="handleClose" > <el-form class="large-space" ref="formRecord" :model="formRecord" :rules="ruleRecord" label-position="left" label-width="90px"> <el-row :gutter="24"> <el-col :span="4"><strong>图片信息</strong></el-col> <el-col :span="20"> <el-upload :action="imageUpload" :headers="headers" :with-credentials="true" list-type="picture-card" :file-list="formRecord.waterInfomationPicDTO" :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" style="float: left; margin-bottom: 10px"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible" size="tiny"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-col> </el-row> <el-form-item label="水道名称" prop="name"> <el-input v-model="formRecord.name"></el-input> </el-form-item> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水道类型" prop="type"> <el-select v-model="formRecord.type" filterable placeholder="请选择水道类型" style="width: 100%"> <el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> </el-form-item></el-col> <el-col :span="12"><el-form-item label="水道性质" prop="official"> <el-switch v-model="formRecord.official" :disabled.sync="disabledSelOfficial" active-text="正式水道" inactive-text="测试水道" ></el-switch> </el-form-item></el-col> </el-row> <!-- <el-form-item label="位置" prop="waterway"> <map-box v-loading="loadingWaterway" @mapReady="handleMapReady" class="map-box"></map-box> </el-form-item> --> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水道起点" prop="start"> <el-select ref="selStart" v-model="formRecord.start" filterable placeholder="请选择水道起点" style="width: 100%"> <el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item></el-col> <el-col :span="12"><el-form-item label="水道讫点" prop="end"> <el-select ref="selEnd" v-model="formRecord.end" filterable placeholder="请选择水道讫点" style="width: 100%"> <el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item></el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"><el-form-item label="水位站" prop="swzId"> <el-select ref="selStation" v-model="formRecord.swzId" filterable placeholder="请选择关联水位站" style="width: 100%"> <el-option v-for="item in dataWaterStation" :key="item[0]" :label="item[1]" :value="item[0]"> </el-option> </el-select> </el-form-item></el-col> </el-row> <el-form-item label="水道概况" prop="remark"> <el-input type="textarea" v-model="formRecord.remark"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取消</el-button> <el-button @click="handleSave" type="primary">保存</el-button> </div> </el-dialog> </el-container> </template> <style rel="stylesheet/scss" lang="scss" scoped> .map-box { height: 200px; overflow: auto; border: 1px solid #ebeef5; } </style> <script> import $ from 'jquery' import waves from '@/directive/waves/index.js' import MapBox from '@/components/mapBox.vue' import { addGraphicsLayer, RAddListGraphic, RegClick } from '@/filters/RMapUitl.js' import { queryWaterwayList, queryWaterwayPointList, waterInfomationList } from '@/api/base/waterway' import { debounce, getTableHeight } from '@/utils' import { queryNodeList } from '@/api/base/node' import { queryChannelTypeList, queryChannelFullList, queryChannelAdd, queryChannelEdit, queryChannelDelete } from '@/api/base/channel' import { fetchSelectData, getCoordinate, addWaterStation, getWaterStation, updateWaterStation, getUpload, deletePicByid, fetchCjjmDetail } from '@/api/water/waterStation.js' import {getToken} from '@/utils/auth' // 验权 export default { name: 'channel_page', directives: { waves }, components: { MapBox }, data() { return { visibleBtnAdd: true, visibleBtnEdit: true, visibleBtnDelete: true, formSearch: { type: undefined, value: '', official: undefined }, formRecord: { id: null, name: '', type: null, official: false, waterway: null, startId: null, endId: null, start: null, end: null, swzId: null, remark: '', waterInfomationPicDTO: [] }, imageUpload: getUpload(), headers: {'X-Token': getToken()}, heightMain: getTableHeight(10), dataWaterway: [], dataWaterStation: [], dataType: [], dataNode: [], dataMain: [], dataTotal: 0, dataPage: 1, dataSize: 10, loadingData: false, loadingWaterway: false, visibleDialogRecord: false, disabledSelOfficial: false, actionDialogRecord: '', fullscreenLoading: false, dialogVisible: false, dialogImageUrl: '' } }, computed: { ruleRecord: () => { return { name: [ { required: true, message: '请输入水道名称', trigger: 'blur' }, { max: 30, message: '长度不得超过30个字符', trigger: 'blur' } ], type: [ { required: true, message: '请选择水道类型', trigger: 'blur' } ], waterway: [ { required: true, message: '请选择水道位置', trigger: 'blur' } ], start: [ { required: true, message: '请选择水道起点', trigger: 'blur' } ], end: [ { required: true, message: '请选择水道讫点', trigger: 'blur' } ], swzId: [ { required: true, message: '请选择水位站', trigger: 'blur' } ], remark: [ { max: 100, message: '长度不得超过100个字符', trigger: 'blur' } ] } }, dataRecordTitle: () => { return { add: '新增水道', edit: '编辑水道' } } }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHanlder) }, mounted() { this.__resizeHanlder = debounce(() => { this.heightMain = getTableHeight(10) }, 100) window.addEventListener('resize', this.__resizeHanlder) this.loadMain() queryChannelTypeList(null, result => { this.dataType = result }) this.dataWaterway = [] queryWaterwayList(null, result => { if (result) { for (const i in result) { const record = result[i] queryWaterwayPointList({ 'waterway': record.id }, ((me, polyline) => { return result => { if (result) { for (const i in result) { const record = result[i] if (polyline.geometry.length > 0) { polyline.geometry += '#' } polyline.geometry += record.long + ',' + record.lat } } me.dataWaterway.push(polyline) } })(this, { 'id': record.id, 'xtype': 'polyline', 'style': { 'stype': 'lineSymbol' }, 'geometry': '' })) } } }), // 新建水道->水位站选项数据获取 waterInfomationList(null, result => { if (result) { this.dataWaterStation = result } }) }, methods: { // 上传照片之前判断是否符合格式要求 beforeAvatarUpload(file) { // 照片格式 const picArr = ['image/jpeg', 'image/JPEG', 'image/png', 'image/PNG'] // 照片大小 const isLt2M = file.size / 1024 / 1024 < 2 // 一次上传照片数量 const maxLength = this.formRecord.waterInfomationPicDTO.length < 5 if (picArr.indexOf(file.type) < 0) { this.$message.error('上传图片只能是 JPG 或者 PNG 格式!') return false } if (!maxLength) { this.$message.error('图片最多只能上传五张!') return false } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return false } this.imgLoading = true }, // 上传照片成功 handleAvatarSuccess(res) { if (res.status) { const urlObj = {} urlObj.url = res.imageUrl this.formRecord.waterInfomationPicDTO.push(urlObj) this.imgLoading = false } }, // 删除照片 handleRemove(file, fileList) { deletePicByid(file.id).then(() => { }) this.formRecord.waterInfomationPicDTO = fileList }, // 放大图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible = true }, beforeClose() { this.$refs.formRecord.resetFields() this.actionDialogRecord = '' this.disabledSelOfficial = false this.formRecord.id = null this.formRecord.name = '' this.formRecord.type = null this.formRecord.official = false this.formRecord.waterway = null this.formRecord.startId = null this.formRecord.endId = null this.formRecord.swzId = null this.formRecord.remark = '' }, resetSearch() { this.formSearch.type = undefined this.formSearch.value = '' this.formSearch.official = undefined this.dataPage = 1 }, loadNode() { debugger const param = {} if (this.formRecord.waterway !== null) { param.waterway = this.formRecord.waterway } queryNodeList(param, result => { this.dataNode = result }, null, () => { if (this.formRecord.start) { this.formRecord.startId = this.formRecord.start } if (this.formRecord.end) { this.formRecord.endId = this.formRecord.end } this.formRecord.start = null this.formRecord.end = null for (const i in this.dataNode) { const node = this.dataNode[i] if (this.formRecord.startId && node.id === this.formRecord.startId) { this.formRecord.start = node.id } if (this.formRecord.endId && node.id === this.formRecord.endId) { this.formRecord.end = node.id } } }) }, loadMain() { this.loadingData = true const param = {} if (this.formSearch.type) { param.type = this.formSearch.type } if (this.formSearch.value) { param.value = this.formSearch.value } if (this.formSearch.official) { param.isOfficial = this.formSearch.official } queryChannelFullList(param, this.dataPage, this.dataSize, (data, total) => { if (data) { this.dataMain = data } else { this.dataMain = [] } if (total) { this.dataTotal = total } else { this.dataTotal = this.dataMain.length } }, null, () => { this.loadingData = false }) }, formatOfficial(row, column) { const value = row[column.property] if (value === undefined || value === null) { return '' } else { if (value === true || value === 'true' || value === '1') { return '正式水道' } else { return '测试水道' } } }, handleMapReady() { this.loadingWaterway = true addGraphicsLayer({ 'type': 'GraphicsLayer', 'layerid': 'WaterwayLayer' }, (me => { return layer => { RAddListGraphic(layer, me.dataWaterway) RegClick(layer, me.handleMapLineClick) } })(this)) this.loadingWaterway = false }, handleMapLineClick(evt) { this.formRecord.waterway = evt.graphic.attributes.id this.loadNode() }, handleAdd() { this.loadNode() this.actionDialogRecord = 'add' this.visibleDialogRecord = true }, handleEdit(r) { this.disabledSelOfficial = true this.formRecord.id = r.id this.formRecord.name = r.name this.formRecord.type = r.typeId this.formRecord.official = r.isOfficial //this.formRecord.waterway = r.waterwayId this.formRecord.startId = r.startId this.formRecord.endId = r.endId this.formRecord.remark = r.remark this.loadNode() this.actionDialogRecord = 'edit' this.visibleDialogRecord = true }, handleDelete(r) { this.$confirm('确认删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.fullscreenLoading = true queryChannelDelete({ 'id': r.id }, () => { this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) }, null, () => { this.fullscreenLoading = false }) }) }, handlePageSizeChange(v) { this.dataSize = v this.loadMain() }, handlePageCurrentChange(v) { this.dataPage = v this.loadMain() }, handleSave() { this.$refs.formRecord.validate((valid) => { if (valid) { const param = { 'name': this.formRecord.name, 'type': this.formRecord.type, 'waterway': this.formRecord.waterway, 'start': this.formRecord.start, 'end': this.formRecord.end, 'swzId': this.formRecord.swzId, 'sdzp': this.formRecord.waterInfomationPicDTO } if (this.formRecord.remark) { param['remark'] = this.formRecord.remark } const done = () => { this.handleCancel() this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) } const always = () => { this.fullscreenLoading = false } this.fullscreenLoading = true switch (this.actionDialogRecord) { case 'add': param['isOfficial'] = this.formRecord.official queryChannelAdd(param, done, null, always) break case 'edit': param['id'] = this.formRecord.id param['waterway'] = 0 queryChannelEdit(param, done, null, always) break default: always() } } else { return false } }) }, handleCancel() { this.beforeClose() this.visibleDialogRecord = false }, handleClose(done) { this.beforeClose() done() } } } </script>
vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。求助前端大神。
## # ## #vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。 网上百度的给下拉框加z-index和设置position:absolute都不好使,求助前端大神。 ``` <template> <!--添加数据 - 单次引入--> <div> <!--在这里指定目标列和tagging列 表单--> <div style="width: 90%; margin-left: 50px; margin-top: 10px; background-color: white;overflow: hidden;"> <Form :model="formItem" ref="formValidate" :rules="ruleValidate" :label-width="200" style="width: 70%;margin-top: 30px;"> <FormItem label="命名空间" prop="nameSpace"> <Select v-model="formItem.nameSpace" placeholder="输入命名空间,支持英文字母、数字、下划线和加减号"> <Option v-for="(item, index) in formItem.nameSpace" :key="index" :value="item.value"> <span>{{item.name}}</span> </Option> </Select> </FormItem> <FormItem label="导入数据组" prop="dataGroup"> <RadioGroup v-model="formItem.dataGroup"> <Radio label="not">不导入数据组</Radio> <Radio label="female">导入已有数据组</Radio> <Radio label="male">创建新数据组</Radio> </RadioGroup> </FormItem> <FormItem label="数据表名" prop="dataTableName"> <Input v-model="formItem.dataTableName" placeholder="输入数据表名,支持英文字母、数字、下划线和加减号"></Input> </FormItem> <FormItem label="类型异常行" prop="excepRow"> <RadioGroup v-model="formItem.excepRow"> <Radio label="not">设置为null</Radio> <Radio label="female">抛掉异常行</Radio> <Radio label="male">放弃本次引入</Radio> </RadioGroup> </FormItem> <FormItem label="与标准列数不一致" prop="excepCol"> <RadioGroup v-model="formItem.excepCol"> <Radio label="female">抛掉异常行</Radio> <Radio label="male">放弃本次引入</Radio> </RadioGroup> </FormItem> <FormItem label="高级参数" prop="seniorParam"> <RadioGroup v-model="formItem.seniorParam"> <Radio label="not">使用默认配置</Radio> <Radio label="female">自定义高级参数</Radio> </RadioGroup> </FormItem> </Form> </div> <!--编辑字段名、类型表格--> <div style="width: 90%; margin: 10px 0 0 50px; background-color: white;overflow: hidden;" align="center"> <Row style="width: 90%;"> <Col span="10"> <h2 align="left" style="margin: 20px 0 20px 0;">编辑字段</h2> </Col> <Col span="14"> <h2 align="right" style="margin: 20px 0 20px 0;">点击字段名或字段类型进入批量编辑模式</h2> </Col> </Row> <div style="width: 90%;"> <Table :columns="dataPreviewColumns" :data="dataPreviewData"></Table> <!--分页--> <div style="margin: 10px;overflow: hidden"> <div style="float: left;"> <Page :total="dataPreviewData.length" :current="1" prev-text="上一页" next-text="下一页" show-total show-sizer show-elevator></Page> </div> </div> </div> <Button @click="importData" type="primary" size="large" style="float: right;margin: 0 100px 30px 0;width: 150px;">下一步</Button> </div> </div> </template> <script> /* eslint-disable */ export default { name: 'once-import-next', data () { return { columnName: ['String', 'SmallInt', 'Int', 'BigInt', 'Float', 'Double', 'Date', 'TimeStamp'], formItem: { // 表单项集合 nameSpace: [{name:'data_test', value:'data_test'}], dataGroup: '', dataTableName: '', excepRow: '', excepCol: '', seniorParam: '' }, ruleValidate: { // 表单字段校验规则 nameSpace: [ { required: true, message: '请选择命名空间', trigger: 'change' } ], dataGroup: [ { required: true, message: '请选择数据组', trigger: 'change' } ], dataTableName: [ { required: true, message: '请输入数据表名', trigger: 'blur' } ] }, dataPreviewColumns: [ {type: 'selection', width: 100, align: 'center'}, {title: '字段名', key: 'nameSpace'}, { title: '字段类型', key: 'name', render: (h, params) => { return h('Select',{style: {width: '100px'}, attrs: {placeholder: params.row.name}}, this.columnName.map((column) => { return h('Option', {attrs: {value: column}}, [h('span',[column])]); }) ); } }, { title: '引入类型', key: 'type' }, { title: '引入完整性', key: 'integrity' }, { title: '占用存储', key: 'storage' }, { title: '创建时间', key: 'createTime', sortable: true}, { title: '修改时间', key: 'editTime', sortable: true} ], dataPreviewData: [ { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 12, editTime: 12 }, { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 11, editTime: 2 }, { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 1, editTime: 222 }, { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性', storage: '19 KB', createTime: 22, editTime: 12 } ] } }, methods: { importData(){ this.$emit('importStatus', true); const id = parseInt(Math.random() * 100000) const route = { name: 'import-status', params: { id }, meta: { title: `动态路由-${id}` } } this.$router.push(route) } }, mounted(){ } } </script> <style > .ivu-select-dropdown{ z-index: 99999; position: relative; } </style> ![图片说明](https://img-ask.csdn.net/upload/201909/02/1567420031_279292.png) ![图片说明](https://img-ask.csdn.net/upload/201909/02/1567420041_157300.png) ```
vue工程中$emit()无法调用
子组件代码 ``` <template> <div> <!--查询表单--> <el-form :model="params"> 标签: <el-input v-model="params.tag" style="width:160px"></el-input> 原始名称: <el-input v-model="params.fileName" style="width:160px"></el-input> 处理状态: <el-select v-model="params.processStatus" placeholder="请选择处理状态"> <el-option v-for="item in processStatusList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> <br/> <el-button type="primary" v-on:click="query" size="small">查询</el-button> <router-link class="mui-tab-item" :to="{path:'/upload'}"> <el-button type="primary" size="small" v-if="ischoose != true">上传文件</el-button> </router-link> </el-form> <!--列表--> <el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column type="index" width="30"> </el-table-column> <el-table-column prop="fileOriginalName" label="原始文件名称" width="220"> </el-table-column> <el-table-column prop="fileName" label="文件名称" width="220"> </el-table-column> <el-table-column prop="fileUrl" label="访问url" width="260"> </el-table-column> <el-table-column prop="tag" label="标签" width="100"> </el-table-column> <el-table-column prop="fileSize" label="文件大小" width="120"> </el-table-column> <el-table-column prop="processStatus" label="处理状态" width="100" :formatter="formatProcessStatus"> </el-table-column> <el-table-column prop="uploadTime" label="创建时间" width="110" :formatter="formatCreatetime"> </el-table-column> <el-table-column label="开始处理" width="100" v-if="ischoose == true"> <template slot-scope="scope"> <el-button size="small" type="primary" plain @click="process(scope.row.fileId)">开始处理 </el-button> </template> </el-table-column> <el-table-column label="选择" width="80" v-if="ischoose != true"> <template slot-scope="scope"> <el-button size="small" type="primary" plain @click="choose(scope.row)">选择</el-button> </template> </el-table-column> </el-table> <!--分页--> <el-col :span="24" class="toolbar"> <el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="this.params.size" :total="total" :current-page="this.params.page" style="float:right;"> </el-pagination> </el-col> </div> </template> <script> import * as mediaApi from '../api/media' import utilApi from '@/common/utils'; import * as courseApi from '../api/course' export default{ props: ['ischoose'], data(){ return { params:{ page:1,//页码 size:10,//每页显示个数 tag:'',//标签 fileName:'',//文件名称 processStatus:''//处理状态 }, listLoading:false, list:[], total:0, processStatusList:[] } }, methods:{ formatCreatetime(row, column){ var createTime = new Date(row.uploadTime); if (createTime) { return utilApi.formatDate(createTime, 'yyyy-MM-dd hh:mm:ss'); } }, formatProcessStatus(row,column){ var processStatus = row.processStatus; if (processStatus) { if(processStatus == '303001'){ return "处理中"; }else if(processStatus == '303002'){ return "处理成功"; }else if(processStatus == '303003'){ return "处理失败"; }else if(processStatus == '303004'){ return "无需处理"; } } }, choose(mediaFile){ if(mediaFile.processStatus !='303002' && mediaFile.processStatus !='303004'){ this.$message.error('该文件未处理,不允许选择'); return ; } if(!mediaFile.fileUrl){ this.$message.error('该文件的访问url为空,不允许选择'); return ; } /*let teachplanMedia ={} teachplanMedia.mediaId =mediaFile.fileId; teachplanMedia.mediaFileOriginalName =mediaFile.fileOriginalName; teachplanMedia.mediaUrl =mediaFile.fileUrl; teachplanMedia.courseId =this.courseid; //课程计划 teachplanMedia.teachplanId=this.teachplanId courseApi.savemedia(teachplanMedia).then(res=>{ if(res.success){ this.$message.success("选择视频成功") //查询课程计划 this.findTeachplan() }else{ this.$message.error(res.message) } })*/ //调用父组件的choosemedia方法 this.$emit('choosemedia',mediaFile.fileId,mediaFile.fileOriginalName,mediaFile.fileUrl); }, changePage(page){ this.params.page = page; this.query() }, process (id) { console.log(id) mediaApi.media_process(id).then((res)=>{ console.log(res) if(res.success){ this.$message.success('开始处理,请稍后查看处理结果'); }else{ this.$message.error('操作失败,请刷新页面重试'); } }) }, query(){ mediaApi.media_list(this.params.page,this.params.size,this.params).then((res)=>{ console.log(res) this.total = res.queryResult.total this.list = res.queryResult.list }) } }, created(){ //默认第一页 this.params.page = Number.parseInt(this.$route.query.page||1); }, mounted() { //默认查询页面 this.query() //初始化处理状态 this.processStatusList = [ { id:'', name:'全部' }, { id:'303001', name:'处理中' }, { id:'303002', name:'处理成功' }, { id:'303003', name:'处理失败' }, { id:'303004', name:'无需处理' } ] } } </script> <style> </style> ``` 父组件代码 ``` <template> <div> <el-button type="primary" @click="teachplayFormVisible = true">添加课程计划</el-button> <el-tree :data="teachplanList" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> <el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible" > <el-form ref="teachplanForm" :model="teachplanActive" label-width="140px" style="width:600px;" :rules="teachplanRules" > <el-form-item label="上级结点" > <el-select v-model="teachplanActive.parentid" placeholder="不填表示根结点"> <el-option v-for="item in teachplanList" :key="item.id" :label="item.pname" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="章节/课时名称" prop="pname"> <el-input v-model="teachplanActive.pname" auto-complete="off"></el-input> </el-form-item> <el-form-item label="课程类型" > <el-radio-group v-model="teachplanActive.ptype"> <el-radio class="radio" label='1'>视频</el-radio> <el-radio class="radio" label='2'>文档</el-radio> </el-radio-group> </el-form-item> <el-form-item label="学习时长(分钟) 请输入数字" > <el-input type="number" v-model="teachplanActive.timelength" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="排序字段" > <el-input v-model="teachplanActive.orderby" auto-complete="off" ></el-input> </el-form-item> <el-form-item label="章节/课时介绍" prop="description"> <el-input type="textarea" v-model="teachplanActive.description" ></el-input> </el-form-item> <el-form-item label="状态" prop="status"> <el-radio-group v-model="teachplanActive.status" > <el-radio class="radio" label="0" >未发布</el-radio> <el-radio class="radio" label='1'>已发布</el-radio> </el-radio-group> </el-form-item> <el-form-item > <el-button type="primary" v-on:click="addTeachplan">提交</el-button> <el-button type="primary" v-on:click="resetForm">重置</el-button> </el-form-item> </el-form> </el-dialog> <el-dialog title="选择媒资文件" :visible.sync="mediaFormVisible"> <media-list v-bind:ischoose="true" @choosemedia="choosemedia"></media-list> </el-dialog> </div> </template> <script> let id = 1000; import * as courseApi from '../../api/course'; import utilApi from '../../../../common/utils'; import * as systemApi from '../../../../base/api/system'; import mediaList from '@/module/media/page/media_list.vue'; export default { components:{ mediaList }, data() { return { mediaFormVisible:false, teachplayFormVisible:false,//控制添加窗口是否显示 teachplanList : [{ id: 1, pname: '一级 1', children: [{ id: 4, pname: '二级 1-1', children: [{ id: 9, pname: '三级 1-1-1' }, { id: 10, pname: '三级 1-1-2' }] }] }], defaultProps:{ children: 'children', label: 'pname' }, teachplanRules: { pname: [ {required: true, message: '请输入课程计划名称', trigger: 'blur'} ], status: [ {required: true, message: '请选择状态', trigger: 'blur'} ] }, teachplanActive:{}, teachplanId:'' } }, methods: { //选择视频,打开窗口 choosevideo(data){ //得到当前的课程计划 this.teachplanId = data.id // alert(this.teachplanId) this.mediaFormVisible = true;//打开窗口 }, //保存选择的视频 choosemedia(mediaId, fileOriginalName, mediaUrl){ alert(111) //保存视频到课程计划表中 let teachplanMedia ={} teachplanMedia.mediaId =mediaId; teachplanMedia.mediaFileOriginalName =fileOriginalName; teachplanMedia.mediaUrl =mediaUrl; teachplanMedia.courseId =this.courseid; //课程计划 teachplanMedia.teachplanId=this.teachplanId courseApi.savemedia(teachplanMedia).then(res=>{ if(res.success){ this.$message.success("选择视频成功") //查询课程计划 this.findTeachplan() }else{ this.$message.error(res.message) } }) }, //提交课程计划 addTeachplan(){ //校验表单 this.$refs.teachplanForm.validate((valid) => { if (valid) { //调用api方法 //将课程id设置到teachplanActive this.teachplanActive.courseid = this.courseid courseApi.addTeachplan(this.teachplanActive).then(res=>{ if(res.success){ this.$message.success("添加成功") //刷新树 this.findTeachplan() }else{ this.$message.error(res.message) } }) } }) }, //重置表单 resetForm(){ this.teachplanActive = {} }, append(data) { const newChild = { id: id++, label: 'testtest', children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); }, edit(data){ //alert(data.id); }, remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); }, renderContent(h, { node, data, store }) { return ( <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"> <span> <span>{node.label}</span> </span> <span> <el-button style="font-size: 12px;" type="text" on-click={ () => this.choosevideo(data) }>{data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(data) }>修改</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button> </span> </span>); }, findTeachplan(){ this.teachplanList = [] //查询课程计划 courseApi.findTeachplanList(this.courseid).then(res=>{ if(res && res.children){ this.teachplanList = res.children; } }) } }, mounted(){ //课程id this.courseid = this.$route.params.courseid; //查询课程计划 this.findTeachplan() } } </script> <style> </style> ``` 在子组件想用这个方法调用父组件中方法,但无法调用,控制台上也没提示.后来发现,在webstorm中按着Ctrl键追踪不到.鼠标放上去提示Unresolved function or method $emit()
vue项目,在切换路由时内存没有释放,再次切换回原路由或者是其他页面,为什么内存又被释放了?
先说一下环境:vue:2.5.2 vue-router:3.0.1 element-ui:2.13.0 最开始存在三个页面HelloWorld、foo和bar。 分别说一下这两个页面都有什么: HelloWorld页面,有一个请求(会请求一些数据),将请求回来的数据放到data中,并用element-ui的select组件进行展示,另外就是一个跳转至foo页面的按钮,代码如下: ``` <template> <div class="hello"> <el-button @click="getAccountListPage"> page获取科目列表 </el-button> <el-select v-model="activeAcc" placeholder="请选择"> <el-option v-for="item in accountPageList" :key="item.id" :label="item.codeAndName" :value="item.id"> </el-option> </el-select> <el-button @click="goToFoo"> go Foo </el-button> </div> </template> <script> export default { name: 'HelloWorld', data () { return { activeAcc: '', accountPageList: [] } }, methods: { getAccountListPage() { let xmlhttp, that = this; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { let res = JSON.parse(xmlhttp.response); if(res.result) { that.accountPageList = res.value; } } }; xmlhttp.open("POST","******这里是url*******",true); xmlhttp.setRequestHeader("Content-type","application/json"); xmlhttp.send('{}'); }, goToFoo() { this.$router.push({name: 'foo'}) } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` foo页面,很简单,有一个跳转至HelloWorld页面的按钮和一个跳转至bar页面的按钮,代码如下: ``` <template> <div class="foo"> 这是Foo页面 <el-button @click="goToHelloWorld"> go HelloWorld </el-button> <el-button @click="goToBar"> go Bar </el-button> </div> </template> <script> export default { name: 'Foo', data () { return {} }, computed: {}, methods: { goToHelloWorld() { this.$router.push({name: 'HelloWorld'}) }, goToBar() { this.$router.push({name: 'bar'}) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` bar页面和foo页面一样,有一个跳转至HelloWorld页面的按钮和一个跳转至foo页面的按钮,代码如下: ``` <template> <div class="bar"> 这是Bar页面 <el-button @click="goToHelloWorld"> go HelloWorld </el-button> <el-button @click="goToFoo"> go Foo </el-button> </div> </template> <script> export default { name: 'Bar', data () { return { } }, computed: {}, methods: { goToHelloWorld() { this.$router.push({name: 'HelloWorld'}) }, goToFoo() { this.$router.push({name: 'foo'}) } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` 操作步骤: 1.进入HelloWord页面,不做任何操作,利用chrome浏览器开发者工具中的Performance monitor工具,查看内存使用情况 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778311_366832.png) 2.点击按钮获取数据,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778454_982794.png) 可以看到,js、dom nodes、 js event,都有所增加。 3.跳转至foo页面,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778614_138117.png) 这时候发现内存占用情况并没有明显变化,也就是说跳转foo页面后,helloword页面的内存并未得到释放。这是问题一。 4.这时候跳转至bar页面,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778782_257327.png) 可以看到,刚刚存在的内存占用已经被释放了。这是问题二。 上面的截图都是我手动垃圾回收(collect garbage)后的截图。 对于上面出现的两个问题,还请各位大佬解答一下,万分感谢!!!
利用Props将表单中写的数据传入到一个组件中的数组中,点击提交没有反应,在线等,求救救孩子。
求大佬们帮忙看看,是哪儿出问题了 ``` <template> <div> <el-form ref="form" :model="form" label-width="80px" class="form-item-require-lable"> <el-form-item label="任务类型"> <el-select v-model="form.kind" placeholder="请选择您要新建的任务类型"> <el-option label="学习任务" value="xuexi"></el-option> <el-option label="工作任务" value="gongzuo"></el-option> <el-option label="生活任务" value="shenghuo"></el-option> </el-select> </el-form-item> <el-form-item label="任务主题"> <el-input type="textarea" v-model="form.name"></el-input> </el-form-item> <el-form-item label="任务时间"> <el-col :span="11"> <el-date-picker type="datetime" placeholder="选择任务开始日期时间" v-model="form.beginTime" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-date-picker type="datetime" placeholder="选择任务结束日期时间" v-model="form.endTime" style="width: 100%;"></el-date-picker> </el-col> </el-form-item> <el-form-item label="任务内容"> <el-input type="textarea" v-model="form.content"></el-input> </el-form-item> <el-form-item label="任务标记"> <el-radio-group v-model="form.biaoji"> <el-radio label="重要任务" name="type"></el-radio> <el-radio label="普通任务" name="type"></el-radio> </el-radio-group> </el-form-item> <el-form-item > <el-button type="primary" @click="resetForm(form)">取消</el-button> <el-button type="success" @onclick="submitForm(form)">提交</el-button> </el-form-item> </el-form> <el-dialog> </el-dialog> </div> </template> <script> import Sousuo from './Sousuo.vue' export default { name: 'Xinjian', components:{Sousuo}, props: ['value'], //xinjian_value data() { return { form: { //form要与前面的定义一样 kind: '', name: '', beginTime: '', endTime: '', content: '', biaoji: '', } } }, methods: { SubmitForm(form) { /*this.$api.SubmitForm(data =>{ window.location.reload(); },*/ //this.props.close(); this.xinjian0=false; var data={ kind:form.kind, name:form.name, beginTime:form.beginTime, endTime:form.endTime, content:form.content, biaoji:form.biaoji, } this.tableData.push(data) this.$emit('update',tableData); console.log('submit!'); }, } } </script> <style scoped> .form-item-require-label{ margin: center, } </style> ``` ``` <template> <div> <el-table :data="tabledata" stripe style="width: 100%;"> <el-table-column prop="kind" label="任务类型" width="160" style="height:30px" > </el-table-column> <el-table-column prop="name" label="任务标题" width="160" style="height:30px"> </el-table-column> <el-table-column prop="beginTime" label="起始时间" width="160" style="height:30px"> </el-table-column> <el-table-column prop="endTime" label="结束时间" width="160" style="height:30px"> </el-table-column> <el-table-column prop="content" label="任务内容" width="160" style="height:30px"> </el-table-column> <el-table-column prop="biaoji" label="任务标记" width="160" style="height:30px"> </el-table-column> <el-table-column prop="zhuangtai" label="任务状态" width="160" style="height:30px"> <template slot-scope="scope"> <el-progress :text-inside="false" :stroke-width="8" :percentage="scope.row.percentage" :color="green"> </el-progress> </template> <!--el-progress :percentage="percentage" status="exception"></el-progress--> </el-table-column> <el-table-column label="操作" style="height:30px"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> <el-button @click="handleDelete(scope.$index, tabledata)" size="small">移除 </el-button> <!--el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button><scope.row--> </template> </el-table-column> </el-table> <!--渲染v-for--> <el-dialog title="编辑任务" :visible.sync="bianji0" :append-to-body="true"> <Bianjiform :bianjiformData.sync="tabledata" v-bind="tabledata"></Bianjiform> </el-dialog> <el-dialog title="新建任务" :visible.sync="xinjian0" :append-to-body="true"> <Xinjian :xinjian_value="value"></Xinjian> </el-dialog> </div> </template> <script> import Bianjiform from './Bianjiform.vue' import Xinjian from './Xinjian.vue' export default { components: {Bianjiform,Xinjian}, name: 'Taskform', props:['message'], data() { return { tabledata: [{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 50, }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 2, }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', zhuangtai: '完成', }, { kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 50, },{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 100, },{ kind: '学习任务', name: 'vue', beginTime: '2016-05-02', endTime: '2016-05-03', content: '学习vue', biaoji: '重要任务', percentage: 90, }], form: { kind: '', name: '', beginTime: '', endTime: '', content: '', biaoji: '', }, bianji0: false, //xinjian0: false, } }, methods: { handleEdit(index,row){ this.form={ kind:row.kind, name:row.name, beginTime:row.beginTime, endTime:row.endTime, content:row.content, biaoji:row.biaoji, } this.bianji0=true; //this.xinjian0=true; }, handleDelete(index, row) { //console.log(index, row); this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!', }); row.splice(index,1); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, } } </script> <style scoped> </style> ```
需求就是要帮Enum里面的参数传到下拉框,前面做的是以单选按钮形式,现在需要做出的效果就像图二那样的下拉框,但是里面的参数是电压等级,我是新手,前面是大佬做出来叫我改成这样,望你大佬能帮帮忙
![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632653_248555.png) 图一 <div class="layui-form-item"> <div class="layui-col-xs14"> <label class="layui-form-label">电压等级<span style="color:red">*</span> </label> <div class="layui-input-block"> <c:forEach items="${voltageList}" var="v"> <input type="radio" name="voltage" value="${v.id}" title="${v.name}" lay-filter="voltage"> </c:forEach> </div> </div> </div> ``` ``` ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632740_42154.png) 图二 <div class="layui-col-xs4"> <label class="layui-form-label">电厂类型<span style="color:red">*</span> </label> <div class="layui-input-block"> <input type="text" name="dclx" id="dclx" class="layui-input" style="position:absolute;z-index:2;border-right: solid 0px;width: 90%" lay-verify="required" value="" autocomplete="off"> <select lay-filter="filter_fdsbycdclx" id="fdsbycdclx" style="width: 300px; display: none;" class="easyui-combobox combobox-f combo-f" name="dclx"> </select> </div> </div> ``` ``` ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632775_261101.png) Enum代码 ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632840_487922.png)电压jsp代码 ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576632921_950209.png)电厂类型代码
iview 左边菜单栏问题?
我点击菜单后会收缩, 点击店铺分类之后就会收缩 ![图片说明](https://img-ask.csdn.net/upload/201912/06/1575612547_524883.png) 点击之后 ![图片说明](https://img-ask.csdn.net/upload/201912/06/1575612562_484044.png) 代码: ``` <template> <div class="slide"> <Menu accordion theme="dark" :active-name="activeName" width="auto" @on-select="changeMenu"> <div v-for="(item, index) in menuList" :key="index"> <MenuItem v-if='item.id == 1' :name="item.name"> <i class="icon" :class="item.iconClass"></i>{{ item.menuName }} </MenuItem> <Submenu v-else :name="item.name"> <template slot="title"> <i class="icon" :class="item.iconClass"></i>{{ item.menuName }} </template> <MenuItem v-for="(item2, index2) in item.children" :key="index2" :name="item2.name">{{ item2.menuName }}</MenuItem> </Submenu> </div> </Menu> </div> </template> <script> import { pagesRouter } from '@/router/index' export default { name: 'slideMenu', data() { return { activeName: "", menuList: [], showMenu: this.menuFlag } }, props: ["menuFlag", "widthFlag"], created() { // 获取缓存中菜单信息 var data = JSON.parse(sessionStorage.getItem("menuData")); this.menuList = data; }, methods: { changeMenu(name){ // 修改菜单显示状态,并传值给 Main 组件 if (!this.widthFlag) { this.showMenu = false; this.$emit("changeMenuFlag", this.showMenu); } localStorage.setItem("menuName",name) this.$router.push({name}); } }, watch: { }, computed: { }, mounted() { this.activeName = this.$route.path;//用name = path; } }; </script> ```
element Form 表单在 el-tab-pane 下<重置/清空>操作时报错怎么解决?
问题描述: 只在el-tab-pane下有这样的提示.如果把代码提到外层就不会报错了?请问这个问题应该怎么解决呢? 错误提示: ![](https://segmentfault.com/img/bVbj5M6?w=777&h=223) 本地代码: <el-tab-pane v-for="item in TabType" :label="item.name" :name="item.id" :key="item.id"> <div v-show="true ? item.id == 1 || item.id == 2 || item.id == 3 : item.id == null"> {{item.name}} </div> <div v-show="true ? item.id == 4 : item.id = null"> <div class="fxn-search"> <el-form :inline="true" :model="SearchForm" :rules="SearchRules" ref="SearchForm"> <el-form-item label="状态" prop="bill_no"> <el-select v-model="SearchForm.status"> <el-option v-for="item in AvoidsStatus" :name="item.name" :key="item.id" :label="item.name" :value="item.name"></el-option> </el-select> </el-form-item> <el-button type="success">查询</el-button> <el-button type="warning" @click="resetForm('SearchForm')">清空</el-button> </el-form> </div> </div> </el-tab-pane> export default { data(){ return{ activeName: '1', //Tab类型 TabType: [ {id: '1',name: 'A栏目'}, {id: '2',name: 'B栏目'}, {id: '3',name: 'C栏目'}, {id: '4',name: 'D栏目'}, ], //申请状态 AvoidsStatus: [ {id: 1,name: '未处理'}, {id: 2,name: '同意'}, {id: 3,name: '拒绝'} ], //筛选 SearchForm: {}, SearchRules: {}, } }, methods:{ //Tab 切换 handleClick(tab, event) { console.log(tab, event); }, //清空筛选条件 resetForm(formName) { this.$refs[formName].resetFields(); } }, mounted(){ } }
多个form表单数据一修改全变了,求解
如图所示: ![图片说明](https://img-ask.csdn.net/upload/201904/01/1554113388_440283.png) ``` <div v-for="(item,index) in items" :key="index"> <el-form :inline="true" :model="formObj" class="demo-form-inline" size="mini" label-position="right" > <el-form-item label="名称1"> <el-select v-model="formObj.name" > <el-option label="A0001" ></el-option> <el-option label="A0002"></el-option> </el-select> </el-form-item> <el-form-item label="名称2"> <el-select v-model="formObj.name2"> <el-option label="0001"></el-option> <el-option label="0002" ></el-option> </el-select> </el-form-item> <el-form-item label="金额"> <el-input v-model="formObj.amount"></el-input> </el-form-item> <el-form-item label="座位"> <el-input v-model="formObj.seat"></el-input> </el-form-item> </el-form> </div> ``` 点击新增按钮,表单新增一行 ``` <el-button @click="add" >新增</el-button> ``` ``` data(){ return { formObj: { bondName: "", etName: "", purchaseAmount: "", seat: "" }, items: [], text: 0 } } ``` ``` methods:{ add: function() { this.items.push(this.text++); } } ``` 但是问题是,修改一行数据,所有的数据都变了,想着可以用作用域插槽,但是不知道怎么添加。。求解
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私有的数
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
此博客仅为我业余记录文章所用,发布到此,仅供网友阅读参考,如有侵权,请通知我,我会删掉。 补充 有不少读者留言说本文章没有用,因为天气预报直接打开手机就可以收到了,为何要多此一举发送到邮箱呢!!!那我在这里只能说:因为你没用,所以你没用!!! 这里主要介绍的是思路,不是天气预报!不是天气预报!!不是天气预报!!!天气预报只是用于举例。请各位不要再刚了!!! 下面是我会用到的两个场景: 每日下
Python 植物大战僵尸代码实现(2):植物卡片选择和种植
这篇文章要介绍的是: - 上方植物卡片栏的实现。 - 点击植物卡片,鼠标切换为植物图片。 - 鼠标移动时,判断当前在哪个方格中,并显示半透明的植物作为提示。
死磕YOLO系列,YOLOv1 的大脑、躯干和手脚
YOLO 是我非常喜欢的目标检测算法,堪称工业级的目标检测,能够达到实时的要求,它帮我解决了许多实际问题。 这就是 YOLO 的目标检测效果。它定位了图像中物体的位置,当然,也能预测物体的类别。 之前我有写博文介绍过它,但是每次重新读它的论文,我都有新的收获,为此我准备写一个系列的文章来详尽分析它。这是第一篇,从它的起始 YOLOv1 讲起。 YOLOv1 的论文地址:https://www.c
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的 回答 - Bravo Yeung,获得该问题下回答中得最高赞(236赞和1枚专业勋章),对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalk
记一次腾讯面试:进程之间究竟有哪些通信方式?如何通信? ---- 告别死记硬背
有一次面试的时候,被问到进程之间有哪些通信方式,不过由于之前没深入思考且整理过,说的并不好。想必大家也都知道进程有哪些通信方式,可是我猜很多人都是靠着”背“来记忆的,所以今天的这篇文章,讲给大家详细着讲解他们是如何通信的,让大家尽量能够理解他们之间的区别、优缺点等,这样的话,以后面试官让你举例子,你也能够顺手拈来。 1、管道 我们来看一条 Linux 的语句 netstat -tulnp | gr...
20行Python代码爬取王者荣耀全英雄皮肤
引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了。我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成。 准备工作 爬取皮肤本身并不难,难点在于分析,我们首先得得到皮肤图片的url地址,话不多说,我们马上来到王者荣耀的官网: 我们点击英雄资料,然后随意地选择一位英雄,接着F12打开调试台,找到英雄原皮肤的图片
网络(8)-HTTP、Socket、TCP、UDP的区别和联系
TCP/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据。 一、TCP与UDP的不同 1. 是否需要建立连接。 UDP在传送数据之前不需要先建立连接;TCP则提供面向连接的服务; 2. 是否需要给出确认 对方的传输层在收到UDP报文后,不需要给出任何确认,而 TCP需要给出确认报文,要提供可靠的、面向连接的传输服务。 3.虽然UDP不提供可靠交...
简明易理解的@SpringBootApplication注解源码解析(包含面试提问)
欢迎关注文章系列 ,关注我 《提升能力,涨薪可待》 《面试知识,工作可待》 《实战演练,拒绝996》 欢迎关注我博客,原创技术文章第一时间推出 也欢迎关注公 众 号【Ccww笔记】,同时推出 如果此文对你有帮助、喜欢的话,那就点个赞呗,点个关注呗! 《提升能力,涨薪可待篇》- @SpringBootApplication注解源码解析 一、@SpringBootApplication 的作用是什
防劝退!数据结构和算法难理解?可视化动画带你轻松透彻理解!
大家好,我是 Rocky0429,一个连数据结构和算法都不会的蒟蒻… 学过数据结构和算法的都知道这玩意儿不好学,没学过的经常听到这样的说法还没学就觉得难,其实难吗?真难! 难在哪呢?当年我还是个小蒟蒻,初学数据结构和算法的时候,在忍着枯燥看完定义原理,之后想实现的时候,觉得它们的过程真的是七拐八绕,及其难受。 在简单的链表、栈和队列这些我还能靠着在草稿上写写画画理解过程,但是到了数论、图...
西游记团队中如果需要裁掉一个人,会先裁掉谁?
2019年互联网寒冬,大批企业开始裁员,下图是网上流传的一张截图: 裁员不可避免,那如何才能做到不管大环境如何变化,自身不受影响呢? 我们先来看一个有意思的故事,如果西游记取经团队需要裁员一名,会裁掉谁呢,为什么? 西游记团队组成: 1.唐僧 作为团队teamleader,有很坚韧的品性和极高的原则性,不达目的不罢休,遇到任何问题,都没有退缩过,又很得上司支持和赏识(直接得到唐太宗的任命,既给
开挂的人生!那些当选院士,又是ACM/IEEE 双料Fellow的华人学者们
昨日,2019年两院院士正式官宣,一时间抢占了各大媒体头条。 朋友圈也是一片沸腾,奔走相告,赶脚比自己中了大奖还嗨皮! 谁叫咱家导师就是这么厉害呢!!! 而就在最近,新一年度的IEEE/ACM Fellow也将正式公布。 作为学术届的顶级荣誉,不自然地就会将院士与Fellow作比较,到底哪个含金量更高呢? 学术君认为,同样是专业机构对学者的认可,考量标准不一,自然不能一概而论。 但...
聊聊C语言和指针的本质
坐着绿皮车上海到杭州,24块钱,很宽敞,在火车上非正式地聊几句。 很多编程语言都以 “没有指针” 作为自己的优势来宣传,然而,对于C语言,指针却是与生俱来的。 那么,什么是指针,为什么大家都想避开指针。 很简单, 指针就是地址,当一个地址作为一个变量存在时,它就被叫做指针,该变量的类型,自然就是指针类型。 指针的作用就是,给出一个指针,取出该指针指向地址处的值。为了理解本质,我们从计算机模型说起...
Python语言高频重点汇总
Python语言高频重点汇总 GitHub面试宝典仓库——点这里跳转 文章目录Python语言高频重点汇总**GitHub面试宝典仓库——点这里跳转**1. 函数-传参2. 元类3. @staticmethod和@classmethod两个装饰器4. 类属性和实例属性5. Python的自省6. 列表、集合、字典推导式7. Python中单下划线和双下划线8. 格式化字符串中的%和format9.
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
代码详解:如何用Python快速制作美观、炫酷且有深度的图表
全文共12231字,预计学习时长35分钟生活阶梯(幸福指数)与人均GDP(金钱)正相关的正则图本文将探讨三种用Python可视化数据的不同方法。以可视化《2019年世界幸福报告》的数据为例,本文用Gapminder和Wikipedia的信息丰富了《世界幸福报告》数据,以探索新的数据关系和可视化方法。《世界幸福报告》试图回答世界范围内影响幸福的因素。报告根据对“坎特里尔阶梯问题”的回答来确定幸...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外
(经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
今年正式步入了大四,离毕业也只剩半年多的时间,回想一下大学四年,感觉自己走了不少弯路,今天就来分享一下自己大学的学习经历,也希望其他人能不要走我走错的路。 (一)初进校园 刚进入大学的时候自己完全就相信了高中老师的话:“进入大学你们就轻松了”。因此在大一的时候自己学习的激情早就被抛地一干二净,每天不是在寝室里玩游戏就是出门游玩,不过好在自己大学时买的第一台笔记本性能并不是很好,也没让我彻底沉...
如何写一篇技术博客,谈谈我的看法
前言 只有光头才能变强。 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 我一直推崇学技术可以写技术博客去沉淀自己的知识,因为知识点实在是太多太多了,通过自己的博客可以帮助自己快速回顾自己学过的东西。 我最开始的时候也是只记笔记,认为自己能看得懂就好。但如果想验证自己是不是懂了,可以写成技术博客。在写技术博客的...
字节跳动面试官这样问消息队列:分布式事务、重复消费、顺序消费,我整理了一下
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
面试还搞不懂redis,快看看这40道面试题(含答案和思维导图)
Redis 面试题 1、什么是 Redis?. 2、Redis 的数据类型? 3、使用 Redis 有哪些好处? 4、Redis 相比 Memcached 有哪些优势? 5、Memcache 与 Redis 的区别都有哪些? 6、Redis 是单进程单线程的? 7、一个字符串类型的值能存储最大容量是多少? 8、Redis 的持久化机制是什么?各自的优缺点? 9、Redis 常见性...
大学四年自学走来,这些珍藏的「实用工具/学习网站」我全贡献出来了
知乎高赞:文中列举了互联网一线大厂程序员都在用的工具集合,涉及面非常广,小白和老手都可以进来看看,或许有新收获。
互联网公司的裁员,能玩出多少种花样?
裁员,也是一门学问,可谓博大精深!以下,是互联网公司的裁员的多种方法:-正文开始-135岁+不予续签的理由:千禧一代网感更强。95后不予通过试用期的理由:已婚已育员工更有责任心。2通知接下来要过苦日子,让一部分不肯同甘共苦的员工自己走人,以“兄弟”和“非兄弟”来区别员工。3强制996。员工如果平衡不了工作和家庭,可在离婚或离职里二选一。4不布置任何工作,但下班前必须提交千字工作日报。5不给活干+...
【设计模式】单例模式的八种写法分析
网上泛滥流传单例模式的写法种类,有说7种的,也有说6种的,当然也不排除说5种的,他们说的有错吗?其实没有对与错,刨根问底,写法终究是写法,其本质精髓大体一致!因此完全没必要去追究写法的多少,有这个时间还不如跟着宜春去网吧偷耳机、去田里抓青蛙得了,一天天的....
《面试宝典》:检验是否为合格的初中级程序员的面试知识点,你都知道了吗?查漏补缺
欢迎关注文章系列,一起学习 《提升能力,涨薪可待篇》 《面试知识,工作可待篇》 《实战演练,拒绝996篇》 也欢迎关注公 众 号【Ccww笔记】,原创技术文章第一时间推出 如果此文对你有帮助、喜欢的话,那就点个赞呗,点个关注呗! 《面试知识,工作可待篇》-Java笔试面试基础知识大全 前言 是不是感觉找工作面试是那么难呢? 在找工作面试应在学习的基础进行总结面试知识点,工作也指日可待,欢...
关于研发效能提升的思考
研发效能提升是最近比较热门的一个话题,本人根据这几年的工作心得,做了一些思考总结,由于个人深度有限,暂且抛转引入。 三要素 任何生产力的提升都离不开这三个因素:人、流程和工具,少了其中任何一个因素都无法实现。 人,即思想,也就是古人说的“道”,道不同不相为谋,是制高点,也是高层建筑的基石。 流程,即方法,也是古人说的“法”。研发效能的提升,也就是要提高投入产出比,既要增加产出,也要减...
微博推荐算法简述
在介绍微博推荐算法之前,我们先聊一聊推荐系统和推荐算法。有这样一些问题:推荐系统适用哪些场景?用来解决什么问题、具有怎样的价值?效果如何衡量? 推荐系统诞生很早,但真正被大家所重视,缘起于以”facebook”为代表的社会化网络的兴起和以“淘宝“为代表的电商的繁荣,”选择“的时代已经来临,信息和物品的极大丰富,让用户如浩瀚宇宙中的小点,无所适从。推荐系统迎来爆发的机会,变得离用户更近: 快...
GitHub 标星 1.6w+,我发现了一个宝藏项目,作为编程新手有福了!
大家好,我是 Rocky0429,一个最近老在 GitHub 上闲逛的蒟蒻… 特别惭愧的是,虽然我很早就知道 GitHub,但是学会逛 GitHub 的时间特别晚。当时一方面是因为菜,看着这种全是英文的东西难受,不知道该怎么去玩,另一方面是一直在搞 ACM,没有做一些工程类的项目,所以想当然的以为和 GitHub 也没什么关系(当然这种想法是错误的)。 后来自己花了一个星期看完了 Pyt...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 前前言 为啥今天有个前前言呢? 因为你们的丙丙啊,昨天有牌面了哟,直接被微信官方推荐,知乎推荐,也就仅仅是还行吧(心里乐开花)
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
恕我直言,牛逼哄哄的MongoDB你可能只会30%
MongoDB 闪亮登场自我介绍MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于...
一文带你看清 HTTP 所有概念
上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性。我们接着上篇文章没有说完的 HTTP 标头继续来介绍(此篇文章会介绍所有标头的概念,但没有深入底层) HTTP 标头 先来回顾一下 HTTP1.1 标头都有哪几种 HTTP 1.1 的标头主要分为四种,通用标头、实体标头、请求标头、响应标头,现在我们来对这几种标头进行介绍 通用...
相关热词 c#时间格式化 不带- c#替换字符串中指定位置 c# rdlc 动态报表 c# 获取txt编码格式 c#事件主动调用 c#抽象工厂模式 c# 如何添加类注释 c# static块 c#处理浮点数 c# 生成字母数字随机数
立即提问