CuiCui_web的博客

1、 季度组件封装，创建一个 quarterDate.vue文件<!-- 季度组件 --><template> <div> <el-popover placement="bottom" width="270" trigger="click"> <div class="el-date-picker__header"> <button

效果图如下：咋们可以借用样式将合计行置顶// 表格合计行放顶部.summaryMethodTop.el-table { display: flex; flex-direction: column; .el-table__body-wrapper { order: 1; }}让后端将合计行的数据返回一个obj，字段跟表格数据字段保持一致，然后再合计方法getSummariesMethod中进行渲染 sums[index] = isNaN(this.sumObj[colum

表格再编辑状态，需要获取到哪一行数据被修改了，面对这样一个场景，我们可以结合element的row-click事件以及动态的监听$watch来实现。tableList，代表表格的数据， rowIds代表需要记录的id数组的集合 /** 编辑状态下，监听行数据是否变化 */ rowClick(row, column, event) { // 编辑状态下对修改过得行数据的id进行保存 if (this.isUpdateTableList) { const ro

elementUI表格中插入气泡，会出现bug"来回切换tab页气泡会乱串"，导致这个问题的原因是，elementUI底层是通过js绘制的气泡，挂在到body中，通过display：none来控制显隐；当我们来回切换tab页的时候，时而出现display:block;的情况，这时候上一个界面的气泡就再新界面出现，导致气泡乱串了。为了解决这个问题，尝试过好几种方式，目的就是让气泡隐藏成功或者销毁成功，但是发现这种思路只会让气泡乱串出现的频率降低，并不能从根本上解决问题，而且还会带来新的界面bug。下面先介绍

https://blog.youkuaiyun.com/CuiCui_web/article/details/107225702之前这边文章中的方式是利用js来进行控制的，然后有一个局限，不支持适应最大宽度；另外如果强行设置宽度比较大，会被左侧菜单遮挡，即使给z-index:9999,也没用。看下图展示，2种方式解决之前的不足。（后续可能会更新elementUI表格种气泡乱串问题解决方案）公共部分数据定义：data(){ return{ business: { id

如图： 点击删除按钮，关闭当前tab页签在vuex的js文件中写如下方法：（如果没有vuex的js文件，可以自己写一个，参考另外一篇文章，讲解vuex的）/** * @class closeNow * @description 关闭当前界面页签（如在工作项详情界面，点击删除按钮，关闭当前这个页签） * @param {Object} state vuex state * @param {Object} param { tagName: 要关闭的标签名字, vm:.

从详情页跳转显示其它页面，再跳转回来时，最好能保留原来的位置原理就是通过document.getElementById("businessDetails").scrollTop = 位置值， 来设置滚动条的位置的本文是有一个功能，界面进行缓存，基于keep-alive缓存界面基础上实现的1 、有其他界面跳转进入的详情界面第一步：在点击跳转界面，跳转代码哪里统一加一个路由携带参数params: {clickEvent:'tableList' }this.$router.push({ name:

首先看一下效果图：这个场景是非常常见的，而大多数的方法，就是通过字数来控制，v-if= word.length>20 就显示elementUI中的气泡；这种做法，我们会发现它有弊端，部分分辨率下，一行文本展示的字数是不同的，这就会导致大屏幕下，字数没有超出就显示了气跑了； 小屏幕下，字数超出了，却没有气泡。下面介绍一种方法，目前发现的最佳方案。通过css解决这个问题，这种场景下我们可以不用elementUI中的气泡，我们可以自己用css实现，然后样式上与项目中其他使用过elementUI气泡的

1、 引入组件，并编写代码const h = this.$createElement; this.$msgbox({ title: '绑定邮箱', message: h('email'), showCancelButton: false, showConfirmButton: false, }).then(value => { console.log(value,'g

现在有这样一个变态的需求吧，在elementUI表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验；也就是说，必填项为空，我失去焦点，是不能给出提示的，表单也不能标红；失去焦点只能校验其他规则，比如邮箱格式，手机号格式等；当我点击提交或确定按钮，所有的为空的表单给出提示，且标红。下图为效果图：如果你看过elementUI底层源码，你就知道这个校验规则是用的第三方开源库，async-validator当你在规则中写入{ required: true,

在上图中，我们可以看到elementUI中表格的cell设置固定高度为40后，再设置垂直居样式后，不起作用。当你改变display的属性值后，你会发现设置的高度40就没用，他会随着内容的高度而去撑开。这样也不满足需求。这个需求是继上一篇博客https://blog.youkuaiyun.com/CuiCui_web/article/details/106531997设置固定高度，根据高度超出显示气泡之后，新增加了需要垂直居中显示。下面介绍一下如何显示垂直居中：利用插槽的方式进行设置：<templat.

elementUI底层只做了根据根据表格中单元格的宽度来控制是否显示气泡，加一个show-overflow-tooltip属性，当内容超出就显示气泡。传统的，如果我们要自定义一个气泡，这时候可能不太好精确的判断什么时候就内容超出了设置的minWidth，就显示气泡。现在有一个需求，可以实现表格行固定高度，当超出高度，就显示气泡；并且气泡、单元格要保留原始格式。（出现气泡的方法，也适用于自定义气泡，超出宽度，恰到好处的显示气泡。）先看一下效果图：实现的代码：结构部分：<div style="

elementUI步骤条可以自定义显示的内容，如下图：自定义显示内容主要是借用插槽的方式进行实现结构部分：<div style="width: 40%;background: #fff;padding:20px; "> <el-steps direction="vertical" :space="80" :active="1"> <el-step v-for="(value, key) in list"> <t

常我们在做项目时会遇到后端接口还没有完成的情况，这个时候我们可以使用mock 实现本地模拟后端接口来测试前端代码效果1、安装mocknpm install mockjs2、 创建一个mock.js文件下面编写两个接口，一个是get请求，一个是post请求带分页// 引入mockjsconst Mock = require('mockjs')// 获取 mock.Random 对象...

本文的主要是针对“在某一个点击消息列表时，跳转至新界面，菜单栏未读消息数据时刻发生变化，进行的例子”因为我们知道，我们没办法监听缓存中的数据，所以这里需要用vuex进行数据处理。1、 我们创建一个js文件 getAccount.js```javascriptexport default { namespaced: true, state: { accoun...

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" > <el-form-item label="项目来源" prop="projectSource" :rules="projectSourceIsMust?rules.projectSou...

elementUI增加部门本部节点，且滑动过程中本部需要吸顶，具体实现效果图如下：实现代码分享：html部分：<div class="researchWork first"> <!-- 左边树，固定定位 --> <div class="left-tree-box"> <el-scrollbar ref="listbo...

项目中遇到这样一个需求，需要tab切换，对数据进行缓存，这个时候，我们会想到vue自带的keep-alive进行缓存；但是此时，点击左侧菜单，界面依然是上一次缓存的数据，这就不满足需求了。下面讲解下如果利用vuex来解决这个问题。1、在左侧菜单点击方法模块，增加如下代码import{mapMutations}from'vuex'export default { metho...

1、 生命周期函数失效 界面进行跳转的时候，跳转界面首次执行mounted方法，之后跳转进入，界面数据不刷新。解决方法：即/** 使用路由钩子函数进行执行 */beforeRouteEnter (to, from, next) { next(vm => { // 这里的vm指的就是vue实例，可以用来当做this使用 })},bef...

在之前的一篇博客中针对这个问题，写了解决方法。现在是加了新需求，发现之前的算法有一些不足之处，现在进行纠正。目前表格的需求是： 评估人/评估分数/加减分说明，这个组合，根据评估人相同，就列合并；指标项目，评估人是为空的，这个组合都不合并； 处理人/处理分数/加减分说明，这个组合，是动态表头，有可能只有一个组合，也有可能有2个组合，也有可能是3个组合；处理人是全合并...

现在有这样的一个需求，需要选中父，子全部勾选，且显示的是勾选中的所有值；如果只勾选子，父不关联在内；如果勾选了所有的子节点，且父节点不选中，默认每个节点下都有人，所以，勾选所有的子，不代表就是选中了父下的直接人员。实现的效果动图如下：1、创建一个vue文件（包含新增，修改是的回显），如myCascader.vue<!-- 改装后的级联选择器，父关联子，子不关联父-->...

1、新建一个js文件preventReClick.js， export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick', { inserted (el, binding) { console.log(el, binding) ...

有tab栏切换通常都是会直接刷新界面，现在有一个需求就是说当我点击tab切换或者菜单切换的时候，原本写的查询不变。1、在layout中加入keep-alive,进行缓存这时候，当你输入查询条件，进行切换的时候，你会发现， 效果达到了。但是如果你够细心，你会发现，如果有联动的界面，从a界面点击一条数据进入b界面，数据不再更新，一直保持着第一次的那条数据。为什么会这样呢？原因是...

3、新增、编辑弹窗出现的问题编辑弹窗修改数据后，点击取消，表格数据变化；编辑弹窗修改后，不做任何操作，点击下一条数据进行编辑，取消，数据被上一条覆盖，需要刷新页面才能还原；新增和修改弹窗的数据发生紊乱等等问题的解决方法1、组件弹窗中的props定义props: { ObjectData: { require: true, type: Object, def...

generateId() { const s = []; const hexDigits = '0123456789abcdef'; for (let i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } // bits 12-15 of the...

后台返回的图片信息为base64格式，前端进行渲染<el-button @click="scBtnImageClick">生成</el-button><img :src="scBtnImageUrl" class="avatar-uploader-icon">请求接口成功进行渲染this.scBtnImageUrl ='data:image...

项目中出现一个接口不同界面反复调用的情况时候，通常呢都会去做一步分装，直接调用。在这个过程中，就会出现一个坑，调用及执行了，导致封装方法中return的数据还没拿到，就已经执行。下面看一下问题出现时的写法去相应界面进行调用此时的结果是拿不到值。那么改如何解决这个问题，下面提供了两种方式进行封装代码。去相应界面调用的方法是一样的。方式一： 用Promiseexp...

首先返回首页不选中问题，这个时候我们需要查看elementUI的版本r如果是低版本的，需要进行修改版本，重新运行npm install。在这里2.9.2这个版本是支持$route监听的。watch: { '$route'(to, from) { },},如果上面两步完成，返回首页，菜单不选中问题还没解决，那么恭喜你，你成功踩进了另一个坑里。当我们对:d...

修改的效果图如上。下面详细介绍修改的步骤。（通过动态添加类名的方式改进样式）结构部分<el-steps :active="milepostActive" > <el-step v-for="(value, key) in milepost" :class="milepostActive== key+1 ? stepActive: '' "...

首先看一下效果图，再做讲解在el-table中插入某个标签，我们通常是采用插槽的方式进行插入，但是实现图片中的功能的时候，你会发现，步骤条插入就显示出来了，但是用echarts绘制的燃尽图却出不来。打开控制台，你会发现报错了。现在我们来分析一下，报错的原因。因为我们用echart绘制图表的时候，第一行代码首先写的是var myChart = echarts.init(docu...

本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存（确定）按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c...

此篇为第一版，写法有问题，最终版请查看https://blog.youkuaiyun.com/CuiCui_web/article/details/103767614首先看一下效果图，根据评估人来进行合并（有相同内容的列都可以通过这种方式进行合并列）<el-table :data="tableData" ref="tableDialog" ...

自适应屏幕缩放pie.setOption(option);window.addEventListener("resize", () => { pie.resize();});环形图模块增加点击事件pie.setOption(option);// 点击事件pie.on('click', function (params) { if(params){ that...

实现左边一棵树(树可以进行搜索)，右边一个穿梭框功能（穿梭框数据自定义）。1、html部分左边盒子里放入input以及tree的结构。其中treeList为树的数据；filter-node-method属性进行设置可以进行模糊查询树节点；default-expand-all属性，默认展开所有的树节点；highlight-current属性，当前选中节点高亮显示；node-click点击树，...