vue
文章平均质量分 50
Jonhos
happyBoy
展开
-
el-table父节点击button按钮新增子节点并展开子节点树
el-table父节点击button按钮新增子节点并展开子节点树element el-table自带属性和自定义处理方法默认方式自定义写法自定义优缺点element el-table自带属性和自定义处理方法element默认属性只能是在初始化加载时展开或点**>时进行展开树节点,但是如果实际项目需求是初始化加载的时候树节点是收起状态,然而点击展开并不是只能点击>,这样操作很不友好。初始化点击展开树节点,默认是通过懒加载lazy配合:load**进行,而自定义方法需要抛弃这样的操作,父节点击b原创 2021-06-18 15:19:50 · 2614 阅读 · 2 评论 -
vue项目实现百度离线地图开发
vue+百度离线地图开发(布标记点,标记点聚合,标记点详情,标记点轨迹)原创 2022-10-26 17:04:33 · 10963 阅读 · 37 评论 -
vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)
vue项目开发 实现自定义Transfer穿梭框效果(结合el-tree)原创 2022-09-02 14:12:29 · 3091 阅读 · 0 评论 -
vue 自定义tag封装组件,可左右切换直接调用可用
自定义封装tabs实现左右切换原创 2022-08-30 15:49:17 · 1219 阅读 · 0 评论 -
element-UI Table el-table树形数据选择高亮,多项选择checkbox选中父级节点和子节点,行高亮的问题处理
el-table实现父节点和子节点选择后背景颜色高亮项目客户要求点击多选的时候,需要对选中的行都进行高亮,通过了很多方法尝试,最后简单实现,下面直接上代码:html主要代码 <el-table ref="multipleTable" v-loading="listLoading" :data="list" size="small" style="width: 100%"..原创 2021-06-08 00:31:21 · 2116 阅读 · 0 评论 -
vue项目开发自定义步骤条,自定义高亮
项目开发过程中很多时候element的UI组件和实际项目的需求有一样,不能直接服用,我这里是自定义实现步骤条方式下面直接展示代码(代码已经有所修改,但是结构没变)<template> <div class="ul_box"> <ul class="timeline" ref="mytimeline" style="margin-left: 10px;"> <li class="tim.原创 2020-12-30 17:44:56 · 1383 阅读 · 1 评论 -
vue+element开发使用el-select不能回显处理
下拉框选择的时候,选不上下拉框的值,element提供了@change事件使用vm.$forceUpdate() 方法进行强制刷新,就可以把值渲染上去。 <el-select v-model="price" clearable placeholder="请选择" @change="$forceUpdate()"> <el-option v-for="(item, ..原创 2020-12-22 10:32:22 · 2643 阅读 · 2 评论 -
vue 实现父子组件之间的传值
vue项目开发过程中,封装公共部分的代码进行多页面调用是很经常的事,实际开发过遇到太多,也总结记录下自己的方式。目录结构:父组件调用并传值给子组件:(直接下代码)父组件给之组件传值通过 :+自定义名 (必须和子组件props定义的字段名一致)父组件给之组件传方法 @+自定义方法名子组件传值给父组件:(直接下代码)子组件接收父组件通过 props进行接收,并且子组件接收需要定义变量的数据类型子组件通过this.$emit调用给父组件回传值父组件:...原创 2020-12-04 16:14:39 · 308 阅读 · 0 评论 -
vue项目开发--使用三元表达式动态改变样式效果
项目开发js经常会使用到三元表达式判断,css也不例外,使用三元表达式可以轻松解决。使用style动态改变样式的写法:<!-- 这里是改变字体的颜色 --> <p :style="{'color': (item.pqtjzt=='20' ? '#00ffff': item.pqtjzt=='11'?'#00ff00' : item.pqtjzt=='10'?'#fdb14b' :'#ff0000')}">调解状态: {{ item.pqtjztmc }}</p>原创 2020-10-28 10:38:07 · 5850 阅读 · 0 评论 -
vue实现点击当前栏目高亮效果
vue实现点击当前栏目高亮效果下面的栏目是通过矢量字体图标遍历出来的首先在data定义一个数组 data() { return { columnBtn: [ { name: 'el-icon-back' }, { name: 'el-icon-s-home' }, { name: 'el-icon-menu' }, { name: 'el-icon-user-solid' }, { nam原创 2020-09-10 16:39:34 · 539 阅读 · 0 评论 -
vue项目开发:element的el-form表单rules如何对input和select添加号码校验
在项目开发的时候,一般表单检验都是做非空检验即可,但是难免会遇到证件号码或者手机号校验,通常我们都要调用公共js进行实现,input校验较为简单,但是select如果没有用过的还是会有点头疼。下面我将对我在项目开发的一部分校验跟大家分享一下。首先肯定要准备好公共js(validate.js)基本结构是必要的:rules="formRules" 和prop="dsrmc" <el-form ref="editAdminForm" ..原创 2020-08-22 19:24:38 · 5209 阅读 · 4 评论 -
vue项目依赖包加载问题:Run `npm rebuild node-sass` to download the binding for your current environment.
error in ./src/views/createResume.vue?vue&type=style&index=0&lang=scss&Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Error: Missing binding c:\Users\Administrator\Desktop\vue-study-master\vue-study-master\node_mod...原创 2020-08-20 17:39:25 · 5778 阅读 · 0 评论 -
vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法
vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法项目开发时遇到form结构是动态遍历出来的,但是每个遍历出来的表单都需要做相对应的检验处理,ele提供的办法只能对单个表单有效,mou度很多方法都试了,但是都没有说出重点和要注意的地方!!!下面贴出我实现的代码: <el-form label-width="200px" class="dlrMode" ref="addInfo" :rules="DLRRules" :model="add原创 2020-08-08 16:15:36 · 3193 阅读 · 2 评论 -
(vue+element)解决两个表单通过if判断切换 表单验证发生冲突的问题
(vue+element)解决两个表单通过if判断切换 表单验证发生冲突的问题需求:根据不同的类型进行form切换,以及要实现表单校验失败尝试:再每个不一样的form里每个子元素加了key不行(错误示范)可能造成的原因:即使两个表单绑定的值不同,但是浏览器在解析时,先解析第一个表单,此时表单上是有绑定ref,之后再解析第二个表单时,浏览器发现这它的prop和第一个表单的prop一样,所以就认为这两个表单是同一个表单,就没有重新渲染,而ref本身是作为渲染结果被创建的,所以第二个表单没能.原创 2020-07-29 18:26:34 · 2242 阅读 · 2 评论 -
element-ui 表单清空 resetField()方法报错Cannot read property ‘indexOf‘ of undefined
在使用resetField 报错Cannot read property 'indexOf' of undefinedelement-ui 表单清空 resetField()方法在项目应用的时候,报错具体代码如下(真实开发场景)这样很明显报错了,应该是数据挂载顺序得问题导致。尝试修改(失败)然后试了我就把v-if改为了v-show,好像是可以实现关闭弹窗,但是我点击保存form表单数据的校验还是会走我隐藏掉的那一模块进行数据校验,所以果断放弃。尝试修改(成功...原创 2020-07-28 16:05:46 · 4043 阅读 · 9 评论 -
vue使用element中的input组件实现传多个值和input回显强制刷新
vue使用element中的input组件实现传多个值和input回显强制刷新 在项目开发过程使用input遇到的小问题,直接从element拿取过来的input组件是没问题的,但是存在着如果给input的value设置默认值,再次进行操作的时候就会获取不到value回显,无用你怎么用$set()都无济于事,后来经过查询 vue中的$forceUpdate可以强制更新表单,使用了果真奏效。 顺带引出一下input的@input或@change事件如何传递多个值进行相关操作...原创 2020-06-20 18:10:41 · 6493 阅读 · 0 评论 -
vue--前端接收后台传过来的excel文件数据
vue--前端接收后台传过来的excel文件数据最近项目要实现把前端展示的列表导出功能,但是接口是post请求,无奈之前做的get请求不能复用。上网开了一下帖子基本是用blob实现下载,以下是我的代码:index.vue api.pageCzZlxx(params).then((res) => { var blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // type这里表示x原创 2020-05-20 19:04:18 · 4960 阅读 · 2 评论 -
vue项目 onresize() 监听窗口实现echarts地图自适应
window.onresize() 监听窗口实现echarts地图自适应项目需求变动,之前是做大屏的尺寸没考虑周全,echarts地图没有随大小变化而变化,现在要实现自适应只需要小改动即可。修改前:修改的代码: <div class="g-h100 g-w100" ref="map" style="position:relative;z-index: 1;"> </div>原创 2020-05-13 12:47:54 · 2334 阅读 · 0 评论 -
vue项目 关于Elemet-ui组件Cascader中proper的配置问题和获取value和lable的值以及清空Cascader的值
关于Elemet-ui组件Cascader中proper的配置问题最近项目需要做一个多联动的select,但是后台返回来的数据和ele参考的结果有些不一样ele提供参考的结构,例子没有 具体说明那个如何去传写数据,具体要看props配置文件这是后台返回来的结构,我现在就不用真实数据进行展示结构代码: <el-cascader placeholder...原创 2020-04-14 16:11:10 · 734 阅读 · 0 评论 -
vue--Element-UI Table 表格指定列添加点击事件
Element-UI Table 表格指定列添加点击事件最近使用了Element-UI中的Table表格,因为需求需要在指定的列点击跳转,所以必须添加个点击事件,我这里是弹框展示table再点击跳转的,如图所示:下面是我实现具体的代码(只是代码的一部分,我删减出来的)<template> <el-dialog custom-class="m-dial...原创 2020-04-11 16:30:20 · 19925 阅读 · 13 评论 -
vue--this.$set()数据回显
vue数据回显 最近在修改别人的一个bug,数据回显效果出不来的bug。开始的时候没头绪,经过百度一脑子查询和本地调试,终于解决。我用到vue的this.$set()来进行强制更新实现的,但是有一点需要注意的,对象操作的方法:三个参数:this.$set("改变的对象","改变的对象属性","值") 数组操作的方法: 三个参数:this.$set("数组","下标","值"...原创 2020-03-11 10:20:21 · 1569 阅读 · 0 评论 -
在Ant Design (VUE)中使用ECharts
1.安装echarts依赖 npm install echarts --save安装完依赖后在package.json文件看到echarts相对应的版本号2.在main.js中全局中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts3.在你需要用到echart的地方先设置一个div的...原创 2020-03-09 14:31:28 · 12240 阅读 · 5 评论