m0_47733490的博客

原创 el-radio 选中后点击可取消

实现el-radio选中后再次点击可取消选中

原创 el-select同时获取label和value，value值绑定对象报错

同时获取label和value且值有唯一的键值对应

原创 整个表单设置disable禁用，单独某个功能设置不禁用

disable属性运用

原创 el-cascader级联选择器，展开项内容过长，鼠标悬浮展示

如图，级联选择器，展开项内容过长，溢出部分...展示，但其内容要鼠标悬浮展示全部在el-cascader组件里用插槽再写一层el-tooltip组件，注意插槽的数据要加{}

原创 ant-design 数据更新Dom不更新问题

需求是当选中第一题的选项1，则直接回答第三题，选中第一题的选项二，正常回答问题1,2,3，其实就是问题的跳转，这里遇到的bug是，我每次选择新的选项都会与后端进行交互，后端把表单的数据，和答案的数据两组值传回给我进行新的赋值，但是当我选中第一题的选项2，正常回答123题，再选中第一题的选项1，回答1,3题，此时应该只有问题1和问题3当我再点回问题1的选项2时，就出现了bug，问题2的答案没有渲染上，但是后端传过来的数据是有问题2的答案的，所以此时为dom没有更新这里支撑问题和答案回显...

原创 el-tree树形组件拿到所有复选框选中的值

根据需求，在交互时要将树形组件中所有勾选的值一起进行传值官方文档里有很多事件，都只能拿到点击单条的数据，这里用到check事件，是点击复选框的事件，可以拿到复选框的值在事件中，不需要拿到形参里的值，需要先绑定ref节点，通过节点的getCheckedNodes()方法，拿到选中的值，然后将选中的值（所需要的字段）push进一个新的数组里，需要注意的是，子节点有交互所需的数据，父节点没有，所以当选中父节点下的全部数据后，会将父节点也push进新的数组里，但是父节点里没有所...

原创 路由返回上一级的两种写法

原创 dom原生富文本编辑器

在理需求的时候发现一个难点，后端是返回整段代码，然后前端进行编辑后保存，但问题是，不是所有的内容都要编辑，有些特定的标签，按钮时不允许修改的，然后查资料发现了一个原生的方法，contenteditable="true" 在标签里写入这个属性以后，文本就可以被编辑，修改完以后再进行保存交互就可以了...

原创 操作dom元素修改文本属性

根据需求，后端将整段html代码传给前端，前端通过一些属性侧边栏来配置其中的内容这里前端我用ref节点来渲染整段代码，然后根据后端返回的代码中每一个标签有自己的id，用html原生的方法来获取dom节点，然后拿到dom节点的属性再进行赋值，这里我用watch监听，当某个属性发生变化的时候再重新给标签赋值最后就获取最外层div的dom节点，然后将他的outerHTML代码再与后端交互将后端库里的替换掉就可以了...

原创 让overfolw：auto的滚动条在上方显示

页面内容过多，溢出部分要滚动显示，上下滚动，左右滚动，但是页面盒子是内容默认撑开，左右滚动就要滑到最下面才能见到滚动条，所以想将滚动条放到最上面，这里用到了css的transform属性先将父容器的内容翻转，就可以实现让滚动条在最上方再将子容器的内容翻转，最终实现效果实现代码：父容器：子容器：主要用到css的 transform ：scaleY(-1)属性...

原创 provide，inject响应式用法

正常的provide和inject的传输中，inject只能接收到第一次provide传过来的旧值，如果provide中的值改变也不能接收到新的，所以要将传输写成响应式的首先Provide将provide中的值用箭头函数的写法（注：provide中的值正常只接收string类型和object类型）Inject：↓inject接收参数↓↓在计算属性中返回接收的参数↓↓在页面中渲染参数用到的是计算属性中的方法名而不是inject中的参数↓...

原创 页面异步调用问题

首先由于业务需求，页面是基于父页面的站开页，将子组件都封装成k-form-build组件，通过json来渲染数据，所以页面内的很多参数，要放到流程中去请求，如图红框是整个流程的父组件，先简称页面A，蓝色框是流程中每一步的子页面，简称页面B，黄色框是流程按钮，控制流程的进度，和下一步A应该展示哪个页面，简称页面C。问题是用户在页面B中的所有操作，要将值带到页面c的流程按钮中去提交，此处用的递归调用方式，现阶段问题是，当我点击提交时，要请求两个接口，一个是页面接口，一个是流程接口，且流程接口需要等页

原创 promise 使用

同一个事件请求两个接口，A接口必须要再B接口前调用，A比B先执行，这时候可以用到promise方法，先new 一个promise，括号里是resvole方法，箭头函数里面是先执行的方法，然后执行完后调用resvole，然后.then里箭头函数写后执行的方法，原理还没深究，先照葫芦画瓢，需要注意的是如果用async await请求接口的话，需要在.then后面加上async...

原创 递归取值总结

蓝色组件为组件A，红色组件为组件B，B组件要作为A组件展开页中的一项来进行渲染，如图B组件是表单页面，要作为A组件展开页中的一项进行展示遇到的问题：A组件和B组件有各自的逻辑和事件，都在页面刷新的时候触发，获取数据，但B组件需要在A组件刷新时的某个接口中取值，在B组件中作为参数请求B组件的接口，两个页面响应时间相同，而且作为兄弟组件，一开始打算使用eventBus进行传参，但每次取值之后在B页面中都会调用两次接口，且需要销毁，而且渲染过程中存在bug，A页面每次刷新，默认展开最下面的站开页，..

原创 兄弟组件通讯eventbus

需求要把B组件的值传给D组件，可以用父子组件通信，先将B的值传给A，再由A传给C，C再传给D，比较繁琐复杂，这个时候用到了一个兄弟组件传参EventBus使用步骤：先创建一个js文件，引入vue然后再发送和接收数据的页面都引入这个文件然后在发送数据的页面里，在事件中写法和子传父类似在数据接收页面，必须要在mounted里面接收数据这样就能接收到对应的值了...

原创 vue父子组件通信

子组件传父组件：子组件中：在子组件的触发事件中加入 this.$emit('自己定义一个参数名称'，要传的值)父组件中：在父组件中，找到子组件的标签，加一个自定义监听事件，需要注意的是，事件名和子组件传过来的自定义参数名称是一致...

原创 vue 根据id进行锚点跳转

页面有一个需求，点击左侧目录可以跳转到右侧对应的问题处，研究半天发现是一个锚点跳转的功能实现思路，在左侧目录标签处添加一个点击事件，给右侧每一个问题的标签加一个单独的id标识，利用点击事件获取到对应id的位置就可以实现锚点跳转，下面上代码左侧目录标签代码：右侧添加id标签代码：实现方法：...

原创 vue加载动画element ui V-loading属性 踩坑记录

根据需求，由预览按钮打开弹窗，且弹窗需要渲染的数据较多，渲染的速度比较慢，所以要加一个加载中的效果，element ui的 v-loading属性就正好可以解决这一需求，但是当加入这一属性之后发现，是实现了加载功能，但是加载并不能自己判断何时停下，又不像其他页面需要页面刷新的时候出现加载动画效果，所以给diglog弹窗一个加载动画，但如何判断他何时停下呢想了好几种办法最后想通了，在点击弹窗的时候先给一个加载属性为true，让他加载，然后等请求接口赋值以后，再给他一个属性为false关掉加载，..

原创 element ui 纵向表格+自定义表头+行内class回调+插槽

根据需求，需要写一个可批量操作的纵向表格，用户可在表头选中复选框进行操作，最大的问题是表单中的标题如何展示，一开始的方案是使用element的展开行组件，但该组件只能向下展开，标题则是在内容上面的，思来想去和在同事的帮助下，将标题数据和内容数据一起展示，只不过标题是只有左侧第一格的数据，其他格内均为空数据，然后利用表格的行内class属性，给标题单独设置一个class，将边框隐藏掉，给背景颜色，就成了，下面上代码数据格式如下ok...

原创 Unexpected token o in JSON at position 1 报错问题

由于近期项目频繁使用form组件，均是以json形式传参，所以频繁的使用JSON.stringify（）和JSON.parse()方法，将数据转换为字符串和转换为对象，但是经常遇到一种报错发现貌似是数据转换的问题，尝试了几次发现了一个貌似可以解决报错的方法JSON.parse(JSON.stringify(XXX)),将数据进行深拷贝就不再报错了...

原创 路由带参数跳转，页面刷新丢失数据问题

根据需求，我需要再父级页面的导入按钮处，跳转的时候请求接口，然后将参数通过路由带给下一个页面跳转之后，从路由拿到下拉框的数据但是在调试过程中发现了一个bug，当我跳转之后控制台打印我拿到的对象时，打印结果是正常的但是！！！！！！！！！！！！！！前方雷区当我页面刷新的时候，下拉框数据为空，控制台打印路由的数据为object只传过来了类型，无法展开，没有具体数据，经查发现，原因是在路由带参的过程中不能直接带对象，要先转成字符串，再接受页面再转回对象，下面上代码...

原创 前端上传文件操作

根据需求，上传文件的功能并不能用element ui 的上传组件，所以用原生方法需要注意的是，方法中存在this指向问题，如果单纯的用return中的创建对象进行赋值，只在方法局部打印的到，所以将this进行赋值...

原创 前端下载文件踩坑

根据需求，当点击下载按钮时，判断状态，可有两种情况，下载空模板和下载有数据的模板当点击某一按钮时，下载对应的模板当打开时，始终出现无法打开的问题调试了一个下午，用同样的方法放到别的页面就可以，在这个页面就不行前方雷区！！！！！！！！！！！！！先上代码由于下载是请求接口，用后端的返回值进行blob转码，所以在这个过程中需要在网络请求处加上数据类型的限制在加上网络请求的数据类型限制后，就可以正常进行下载操作了，相当于将后端的返回值以blob的形式返回，前端再以...

原创 k-form-build组件默认值与表单数据渲染冲突

页面问卷功能使用k-form-build组件，组件有初始api属性，:value为渲染表单的json数据，：defaultValue为表单选项的默认值根据需求需要让答题者在答题过程中，答题操作能实时的进行前后端交互，则需要两个属性来解决这个功能，一个是渲染表单的json数据（:value属性）另一功能为用户答题中，如果退出页面，重新进入的话，需要回显之前已经做过的答题操作，需要（:defaultValue）属性遇到的问题：！！！！！！！！！！！！！！！！！！！！！！！！！！！！！..

原创 将字段动态push进新的数组形成新的数据格式供级联框使用，以及父组件调用子组件的方法

根据需求，当我选中问卷中的某一问题时，右侧可以编辑问题分支，我需要写一个可多选的级联选择器，所以要将数据处理成对应的格式我拿到的data数据是这样的由于是list里面套list，所以需要双层循环，我需要将list中的label和key字段push进一个新的数组里，形成级联框能用的数据，先将数据第一层循环，用数剧和下标，拿到外层list的label和key，然后第二层循环，加一个chidren子集在第一层数据里，得到第二层list1的label和key，最终得到的数据格...

原创 echarts柱图两组数据不同，处理数据

根据需求，该柱状图为阶梯图需要两组data数据，一组为最高点的值，一组为最低点的值，但后端只返还给我一组数据，所以我要将这组数据深拷贝出来一份作为第二组data使用，但柱图x轴最后一项为总数，低点只能为0，所以要将复制出来的第二组data进行处理首先调用接口，拿到接口数据，然后将数据循环拿到我想要的name字段作为x轴数据，count作为y轴数据，然后将y轴数据深拷贝一份，得到一个新的数组，然后利用splice方法，找到数组中的下标最后一个数据将他替换成0，就得到了最低点为0的总数效果，spl...

原创 Echarts异步渲染动态数据不显示

发现获取处理完数据，页面不显示，找了半天原因，最后发现是处理数据的时候，函数调用顺序出了问题，粗心大意函数调用写早了，数据处理还没执行完，就先执行图标渲染了，肯定没数据，傻逼了处理完后：...

原创 根据对应的id进行路由跳转

依旧是v-for循环渲染，需求是要id为8的模板才有点击跳转的路由，其他均没有，本应是根据id来进行相应的路由跳转，但当前只写了id为8的部分，其他均没有，所以先写一个本来是循环遍历数组，拿到下标，然后判断data[i].id=8的时候才可以跳转，但是for循环遍历拿到下标以后，点击每一个都可以跳转，否则就是点击每一个都不能跳转，后来发现问题想复杂了，直接在点击事件里面用形参就可以了，传入一个row，等于8的时候跳转就可以了...

原创 V-for 标签循环里处理时间戳

由于需求，后端的数据结构特殊，不能直接用java实体逐个渲染，包括栅格在内的数据都由后端传给前端，所以只能从标签循环渲染，这样就导致了后端传给前端什么，页面就直接渲染什么，正常页面的表单内时间戳都在插槽里进行转换，本页面不能采取这种方式，但数据只在一个标签里进行渲染没法进行插槽处理，所以要先处理数据，再进行渲染，上代码：先处理数据，判断后端返回的每一条value字段的数据是否为字符串，同时如果是字符串的话判断他是否为13位（因为时间戳是13位），都进行处理后，将符合标准的时间戳数据放到转..

原创 echarts柱状图重叠样式

在同一个echarts的柱状图里要同时显示两组柱图，包含关系，颜色不同便于区分对比直接在series值域里加两个对象第一个对象里不需要写data，第一个作用为确定两组图形是包换关系第二个对象里写相关的配置参数最终样式展示可以柱图重叠可以折线重叠...

原创 页面触发表单校验

先给元素绑定ref节点事件触发的时候，将ref节点用.validate方法校验，然后根据状态判断

原创 vue路由带参

写个query，把参数带到路由跳转下面就ok了

原创 v-for 循环数据中拿出变化的值

在事件方法中携带下标参数能拿到对应变化的值

原创 vuex的传参使用

项目用到过好几次vuex，有的参数复用率较高，且不是父子组件，需要服用，所以考虑用vuex来进行传参每一个模板都有自己的templateid后端要求，在用户操作的时候每一步都请求接口，且要携带该模块的templateid参数首先在user.js文件构造mutations实例对象 在页面内，找到能拿到templateid参数的页面先引入mapMutations接着在methods方法中，写入该方法需要一个...

原创 echarts柱详图动态渲染单一字段

想把接口数据里的name字段渲染到echarts柱状图的X轴接口数据↓接口数据里两个字段，我只想渲染name，如果直接让echarts配置项里的x轴data=我赋值的数据，会默认渲染数组最后一个字段，所以要把赋值后的接口数据里name的字段单独摘出来，建一个新的数组，然后push进去，具体代码如下：这样我就得到了一个新的数组，数组里面只有name字段的数据，然后把他赋值给echarts对应的配置项就可以了...

原创 修改组件el-select默认展示id不展示label

项目中有修改组件，点击获取到表单的数据，但是有一个下拉框展示的是id而不是name看了半天代码，双向绑定和传值都没问题，查了半天资料最后发现是后端传给我的id字段和前端的id类型不同，一个是字符串一个是number，返回的数字和el-option选框里的value值类型对应不上解决办法：将v-for遍历的数组中id字段都改成number类型修改前：修改后：修改后页面正常显示：...

原创 修改组件el-dialog点击取消数据无法销毁

修改弹窗点开，随意输入修改内容后，点击取消不刷新页面的情况下，再点开编辑弹窗，之前修改的内容还在，弹窗关闭的时候并不会销毁页面的元素解决思路（不生效）：elementui有 destroy-on-close 属性，但在本页面不生效，还需其他解决办法解决方法：给el-dialog标签加一个@open事件，打开的回调具体代码：问题解决...

原创 vue无缝滚动效果

项目加了个功能，有一个模块比较单调想加一些效果，于是就想加一个各个公司和自己公司的对比效果，把这些公司的图标都放在一起滚动播放，加上排名的效果展示，于是我开始着手完成这部分内容，起初方向错了，我以为像轮播图那种，于是找了几个开源的代码写出来效果不对，不是延时器的轮播图，是无缝滚动效果，查了资料以后才发现效果实现要比我想象的简单，具体代码如下：使用之前需要先进行安装注册：vue有自己封装好的轮播效果组件 <vue-seamless-scroll>，链接如下:https://c.

原创 Cannot read property ‘XXX‘ of undefined报错解决

点击展开获得更多数据，在项目中会遇到点击展开无数据，空白报红，应该是组件传参的问题，vue是单向数据流传输，这一步操作相当于想要点击展开的时候修改数据，所以会报红，解决方法就是在每一个字段渲染之前加一个v-if判断，判断他是否有这个值，再去渲染加了判断的字段就不会报错，只会显示空白...

原创 按钮控制组件名传参

同一个按钮要展示出两种不同的组件效果，在按钮的点击事件里通过判断组件名称来进行展示在组件传参的过程中，props总是接收不到这个参数，原因是按钮事件下面要再写一个组件用来把参数抛出去...