Vue
文章平均质量分 79
L_WalkingPig
这个作者很懒,什么都没留下…
展开
-
Vue中获取当前日期和操作。
设置定时器实现时间每秒走动:<div class="dateAndSelect" > <p>日期: {{yearMD}} {{Hms}}</p></div>data() { return{ yearMD:'', Hms:'', selectDate:'', }},mounted(){ let that = this; //定时器 setInte.原创 2020-11-02 09:22:12 · 2399 阅读 · 0 评论 -
vue中不使用组件,实现翻牌器功能。
vue本身由组件:vue-count-to使用和步骤:1,安装:npm install vue-count-to2,引入包:import countTo from 'vue-count-to'3,使用:<count-to :start-val="0" :end-val="81212" :duration="3000" :prefix="prefix" class="text-style"></count-to>以上没具体使用过~ 参考文档:https://w...原创 2020-10-19 09:45:47 · 851 阅读 · 0 评论 -
vue中数字转化为字符串,字符串转化为数组(split)
数字转化为字符串:参数末尾加 +' ' => var a =obj.countToadyTargetNum + '' 或者 val.toString();字符串转化为数组:val.split(''); 如:var val = '1289' => val = ['1','2','8','9'];引号里面可以写参数,比如split(' , ') ,这就是以 , 为界限切割成数组。个人记录,仅供参考~...原创 2020-10-16 17:32:35 · 6276 阅读 · 0 评论 -
echarts设置柱状图柱体渐变色
series中配置:series: [ // type:'bar', { type: 'bar', barWidth : 5, color:'#11b775', barGap:'200%', itemStyle:{ normal: { barBorderRadius: [7,7,0,0], offset:0, //设置柱体渐变色原创 2020-10-15 13:20:38 · 1765 阅读 · 0 评论 -
echarts隐藏右上角保存按钮(堆叠图为例)
修改属性:toolbox: { feature: { saveAsImage: { show:true,//控制保存按钮显示隐藏 } }},官方文档:https://echarts.apache.org/zh/option.html#toolbox.feature.saveAsImage.show个人纪录,仅供参考~~...原创 2020-10-14 16:29:05 · 2965 阅读 · 0 评论 -
echarts饼图显示百分比
如图:series : [{ name: '类型', type: 'pie', radius : '55%', center: ['50%', '60%'], data:valuearray, itemStyle: { emphasis: {原创 2020-10-13 16:29:06 · 17159 阅读 · 0 评论 -
vue中去除elementui组件自带的样式
以el-card卡片组件为例:总有个样式:padding:'20px'; 切样式来自于el-card__body的类名。解决:在引用该组件的页面中重写即可<style lang="scss" scoped> /deep/ .el-card__body{ padding: 0px 0px 10px 10px; }</style>...原创 2020-09-25 15:54:48 · 8709 阅读 · 0 评论 -
vue+elementui的form表单校验重置,非必填字段重置失败
给form表单每个字段加上prop="xxx" ,如下图:<el-form-item label="入库备注:" :label-width="formLabelWidth" prop="wareHousingRemark"> <el-input v-model="wareHousingInForm.wareHousingRemark" autocomplete="off"></el-input></el-form-item>表单校验部分待补原创 2020-09-02 14:29:00 · 649 阅读 · 0 评论 -
设置echarts柱状图柱体不同颜色
我的是在js中递归循环柱状图的配置数据(即option={})后设置的每个柱体颜色(设置颜色模块写法是类似的)。找到series:[]下的itemStyle:{}下的normal.colorif(h === 'itemStyle'){ var barColorData = []; //params=每个柱体 须一次性设置所有柱体的颜色 seriesData[h].normal.color = function(params) { //color为颜色数据原创 2020-09-01 10:10:45 · 1001 阅读 · 0 评论 -
vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和透明度<el-image :class="classRotation" v-if="imageData.src !== undefined" :src="imageData.src" :style="imageStyle"></el-image>//在data中声明 imageStyledata(){ return{ imageData:{}, imageStyle:{}, //样式.原创 2020-08-25 13:52:15 · 4972 阅读 · 1 评论 -
Vue中遍历不规律的json对象(递归)
如果是一个数组包含对象且每个都对象内部固定包含child子数组,命名规范的话,使用for in就行了,去判断每一集下面还有没有child: [ ],但是现在碰到不规则的json对象就很棘手,参数完全不确定,只能使用递归了,先贴代码:watch:{ colorData: { handler() { console.log("颜色变更========", this.componentList); function findColorText(obj)原创 2020-08-13 13:50:33 · 1974 阅读 · 0 评论 -
Vue中动态渲染颜色样式(基于后端返回的已经选择的颜色展示)
<el-form-item label="已选主题色"> <el-row :span="12" v-for="item in colorData"> <el-col :style="{'backgroundColor':item}">{{item}}</el-col> </el-row></el-form-item>colorData就是后端返回的已选择的颜色数据数组,循环后在样式中这样写::style=.原创 2020-08-12 15:57:43 · 4563 阅读 · 0 评论 -
Vue使用elementUi的el-image图片初始化加载失败!
问题如下图:原因是el-image的 :src=" " 在初始化时,图片路径由接口返回还未加载数据导致的问题,且第一次渲染失败不会再异步刷新。解决办法: 在el-image中加上 v-if="imageData.src !== undefined" 判断,不是后端返回的话直接 src 处路径写死。仅供参考~ : D...原创 2020-08-07 11:15:51 · 3073 阅读 · 1 评论 -
elementUi中根据选中的数据,取消勾选表格行数据。
首先前提是能获取当前表格的全部数据和要取消勾选的数据。默认选中和取消选中差不多,我这里的业务场景是删除选中数据。selectValueClose(data){ this.multipleSelection(data);//点击tags标签的X删除 // 取消表格的勾选 当前表格数据 =》tableArrayData this.tableArrayData.forEach(row => { // 可以从列表中找到需要选中的那个对象,置为false,反原创 2020-08-04 09:44:03 · 2266 阅读 · 0 评论 -
elementui中el-table表格封装成组件
子组件表格dialog封装结构如图:<el-dialog :title="propsSelectData.title" :visible.sync="propsSelectData.visibleMultiSelectDialog" width="40%" :showClose="false" :modal='false' :close-on-click-modal原创 2020-07-14 11:18:23 · 1121 阅读 · 0 评论 -
elementUI中去掉el-dialog右上角的 X
给el-dialog设置属性:showClose="false"即可。<el-dialog title="角色分配" :visible.sync="showChooseDialog" width="40%" :showClose="false"></el-dialog>感谢:https://segmentfault.com/q/1010000012175677原创 2020-07-09 18:29:10 · 10079 阅读 · 2 评论 -
Vue框架设置背景图后,四周有白边的问题(使用backgroundImage)
先说给登录页面设置背景图片login.vue:<template> <div :style="loginImageDiv"> <!--登录页的其他html部分--> </div></template><script> data(){ return{ loginImageD...原创 2020-04-21 15:11:25 · 7511 阅读 · 3 评论 -
Vue用elementui表单校验报错: Error in v-on handler: "TypeError: Cannot read property 'validate' of undefined
直接按照elementui官方的写法:submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); ...原创 2020-04-15 10:35:43 · 5026 阅读 · 0 评论 -
Vue路由vue-router使用this.$router.push();实现页面跳转以及传参。
首先请确保项目已经安装了vue-router:运行命令:npminstallvue-router--save (也可自行百度)安装后在项目package-lock.json 文件中查看版本信息:"vue-router": { "version": "3.1.6", "resolved": "https://..xxx.org/artifactory/a...原创 2020-04-08 11:32:14 · 3079 阅读 · 0 评论 -
Vue父组件调用子组件方法this.$refs(),也可以传值;
上一篇记录了子组件向父组件传值 this.$emit();下面说下 “父组件调用子组件中的方法”,并传值;父组件:<!--父组件中定义的简单的触发事件--><el-form-item> <el-button @click="testThisRefs">测试$refs访问子组件数据</el-button></el-fo...原创 2020-03-17 18:34:01 · 6524 阅读 · 3 评论 -
Vue子组件传值给父组件this.$emit();
上一篇博客记录了Vue父子组件传值使用props,这篇来说说子组件传值给父组件的 ——this.$emit('xxx属性',xxx参数);子组件://子组件自定义一个按钮触发onSubmit()方法;<el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-butt...原创 2020-03-16 17:19:34 · 2250 阅读 · 0 评论 -
Vue报错{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
我这里出现该问题的原因是demo想用webpack打包工具,执行了:npx webpack --config webpack.config.js命令然后报错的;{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.可以这么做找到:node_modules\vue-loader\lib\te...原创 2020-03-13 14:31:38 · 2844 阅读 · 0 评论 -
Vue中父组件向子组件传值props
父子组件传值:首先是数据传递是单向的,子组件要用props去接收父组件的数据。父组件:肯定要把子组件先import进父组件再用 或者你用其他的方式<el-main class="elMain"> <!--给子组件自定义一个属性 :propsData 子组件中用props去接收 --> <!--子组件中 props:['propsData'...原创 2020-03-11 15:47:45 · 429 阅读 · 0 评论 -
Vue中axios调用本地后端接口跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource
报错:No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9999' is therefore not allowed access本地前端框架 Vue、vue-cli、webpack先找到前端 /config/index.js 配置文...原创 2019-04-08 15:56:01 · 5411 阅读 · 0 评论 -
Vue+elementUi使用el-dialog弹框
使用elementUi组件库<el-dialog></el-dialog>首先将子组件引入父组件中并且下放也要import进来:还要在components中注册子组件,并且在props中添加如下图:新增watch方法监听;其中的restData(){}是自己定义的在每次关闭弹框时重置弹框中数据的方法,此外return中先将copyEmployee...原创 2019-03-22 17:25:39 · 13452 阅读 · 0 评论 -
vue+elementui中的el-table中拼接接口返回的两个字段的数据并展示
最近刚学Vue,使用的elementui组件库,用到了table表格组件<el-table></el-table>标签遇到个问题就是其中有个<el-table-column></el-table-column>要展示的数据来自接口返回的两个字段原用法是:<el-table :data="tableData(表格数据来源)" stri...原创 2019-03-21 20:33:19 · 16688 阅读 · 14 评论 -
Vue中使用axios(POST请求)调用后端接口时,后端接口接收不到前端参数的问题
最近在学习Vue,期间遇到个问题就是前端页面使用axios调用接口将页面数据存储到数据库中时,使用POST请求时后端Debug不出前端的参数,导致前端触发调用后端接口时后端会一直报错,之前前端这样写的:(接口调用方法单独提出来写在marketmanager的insertMarketManagerFill方法中,这边import引入后直接用就行了)但是问题来了,data中的各参数前端或者...原创 2019-02-25 10:27:59 · 8592 阅读 · 0 评论