yehaocheng520的博客

VUE2.0 elementUI el-input-number 数据更新，视图不更新——基础积累

el-table组件选中后使用toggleRowSelection无法取消已选中的数据——bug记录-骚操作解决

vue——zm-tree-org 组织架构图实现层级展示+编辑功能——技能提升

elementUi——实现手写日程界面——基础积累

element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升

elementUI——表格单元格合并——技能提升

vue+elementUi——实现层叠轮播图——技能提升

for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效

Element UI 中el-input 框回车触发页面刷新问题及解决方案——基础积累

elementUi——select选择框的下拉框样式调整

要求在table表格中的字段内容超过2行时，省略号展示，鼠标移入到此单元格时，内容展示完整。不超过两行不处理。超过两行再显示全部。

最近在做后台管理系统时，遇到table表格的展开和折叠，点击expand的小箭头，默认只能当点击小箭头附近的区域时，才可以触发。为了放大点击区域，则需要通过设置style来实现点击区域的放大。.el-table td.el-table__expand-column { padding: 0px !important;}.el-table__expand-column .cell { padding: 0px !important;}.el-table__expand-icon

最近在做后台管理系统，遇到一个需求就是：单元格的合并，具体功能如下：左侧是个expand的展开和折叠功能，展开行后，需要取消单元格的合并功能。1.处理table表格的数据——将相邻且相同的单元格合并成数组data(){ return{ serialArr: [], materialTypeArr: [], tagNumberArr: [], objectSpanFlag:true,//是否开始单元格的合并 expandedRow

之前写过一篇文章，是关于文件上传的。最终上传到保存接口中，都是文档流的形式。基本操作是：var formData = new FormData();formData.append('file',xxx);上面代码中的xxx就是文件的内容，也就是上传成功后回调返回的内容。上面的形式也是可以改为下面的：var formdata = new FormData();formdata.append("StreamContent", new Blob([xxx]))但是一定要注意：xxx的格式，下面

最近在做后台管理系统时，遇到了一个问题，就是关于表单校验的问题。根据上图，明明已经选择了供应商名称字段，但是点击保存按钮时，还是会有校验问题，提示请选择供应商。导致无法进行表单的提交。出现此问题的原因就是：校验的字段有被删除过。比如上面的字段是：this.form.supplierId,在进行一些表单的清空操作时，如果直接使用了this.form={}，则会导致this.form.supplierId的双向数据绑定功能失效，进而无法进行正确的表单校验。例如：下面的代码，在创建vue的时候，给thi

最近遇到一个需求，就是图片的上传，效果图如下：需要实现的功能有：1. 多选上传图片2. 预览已上传的图片3. 删除图片4. 图片回显下面将通过两种方式来实现：1.使用默认的action实现图片的上传2.使用自定义的http-request实现图片的上传下面分别介绍：1.使用默认的action实现图片的上传1.html部分代码<el-upload action="/file/Upload?module=EQ" accept="image/jpeg,image/jpg,image

今天写前台页面时，遇到一个需求，效果图如下：使用的是elementUi中的el-table表格组件，需要在特定的行下面添加一行查看替代产品，点击查看替代产品后，可以通过调接口的方式获取替代产品，然后渲染到页面上。此时可以点击收起替代产品,进行替代产品的隐藏。1.elementUi官网上关于el-table的部分有个展开行的功能此时可以通过这个展开行的功能来渲染查看替代产品的部分：<el-table-column type="expand" width="1"> <temp

最近在开发后台管理系统时，遇到一个需求：效果图如上：原库位字段内容相同时，实现单元格合并。前提是必须是相邻的数据。不相邻的数据没有合并的必要。后端返回的数据格式如下：elementUi官网上也给了合并单元格的方法：1.需要一个span-method单元格合并的方法官网上给出的代码如下：objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowInde

最近在写apicloud的项目，在页面切换时，发现了一个报错：ResizeObserver loop limit exceeded，经过排查，发现是el-table组件报的错误。也就是elementUI中的table组件。网上百度后发现，也有其他人遇到跟我同样的问题。网上给出的答案是：el-table表格的宽度问题导致的报错。因此我也从相同的角度去处理：我将某一列设置width的一项中的width取消，给表格最后一列添加上width（之前的最后一列是没有设置宽度的）,不设置宽度的列自适应宽度。

最近在写一个apicloud框架开发的安卓程序，由于是个后台管理系统的页面，所以我首先要引入的是vue+elementUi。cdn引入vue.js是简单的，直接从网上找到vue.js的链接或者将内容下载到本地，通过相对路径引入都是可以的。一定要注意：在cdn引入elementUi之前，一定要先引入vue.js才可以cdn引入elementUi，可以查看官网上提供的cdn引入的方法elementUi提供的样式中，默认的主题色是一种蓝色，但是我们公司现在的主题色是#f90，所以需要更改主题色：cdn

最近在做后台管理系统，遇到一个需求，就是根据下拉选择框多选，选中的内容在表格中展示，每一行都可以添加多个分类标签。效果图如上：分析需求：1.select组件多选功能实现<el-select v-model="checks" multiple placeholder="请选择物料分类" @change="checkChange" size="mini" @remove-tag="removeTag"> <el-option v-for="(cate) in productCa

今天在做后台管理系统时，需要用到select组件的远程搜索功能：element-ui官网上是有相应的远程搜索的功能的：具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。但是在单选时，就出现了问题：上图中拿到关键字的

今天在看后台管理系统时，领导发现表格中的横向和纵向的滚动条宽度不一致，导致页面看上去很不协调：如下：根据上图效果：会发现：横向滚动条的高度与纵向滚动条的宽度不一致：修改页面滚动条的宽高可以通过如下的css样式来处理：::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent;}只要将上面css中的width和height设置成一个数值，就可以保证横向滚动条的高度与纵向滚动条的

工作中在做后台管理系统时，经常用到的是vue2.x适用的element-ui框架，最近看到同事用支持vue3.x的element-plus，感觉同事真的是与时俱进，今天就来看看element-plus框架如何使用。1.安装element-plus框架npm install element-plus2.main.js中全局引入element-plus引入element-plus分为全局引入和局部引入，但是为了简单，一般都是全局引入，这样也有弊端，比如下载的组件太多，导致打包速度缓慢等。但是引入只需要一

昨天在做后台管理系统时，遇到一个需求，就是有一个el-table的表格，当扫描指定条码时，可以根据条码的值比对表格的数据，如果能够找到对应的数据，就将页面滚动到此行的位置，实现自动定位功能。如下效果：1.加扫描框——input组件<el-input v-model="scanData" ref="scanDataRef" style="width:200px;margin-left:10px" placeholder="请扫描条码数据" size="mini" @keyup.enter.na

最近在做后台管理系统时，用到的是MVC的模式，因此vue和elementUi都是使用的cdn引入的方式来处理的，并配合着jq来进行数据处理的。在工作中，由于我没有进行组件和函数的封装，导致了大量的重复代码，在遇到统一的问题时，改动量巨大而且极易出现纰漏。因此封装函数和组件，是非常有必要的，也是一个前端程序员提升自我的一种表现。学会封装函数和组件是一个程序员提升的必经之路由于我在通过ajax调取接口时，都是用的$.ajax({})的方式来处理的，因此当后端同事要求我在请求时把页面中的cookie也传递过

今天在做后台管理系统时，遇到一个需求，就是根据表格中每行数据的状态，来渲染背景颜色。如下图所示：满足一定条件时，背景颜色要改为绿色。row-style的使用1.在el-table上添加row-style，指定一个函数<el-table ref="multipleTable" :data="tableData" border :row-style="tableRowStyle">....</el-table>2.函数参数为{row,rowIndex}，根据row判断

最近看到同事在问图片预览的问题，希望可以预览图片，还要实现放大缩小旋转等功能。之前用elementUI时，是有个图片组件的，这个图片组件中有个大图预览的功能，是可以满足图片预览功能的。但是如果对方并没有使用elementUi的话，单独引入图片组件也可以，但是还有个vue的图片预览插件可以实现此功能v-viewer图片预览插件1.v-viewer插件简介基于 viewer.js 插件，用于 Vue 的图像查看器组件官网地址：https://mirari.cc/v-viewer/2.npm安

最近在做电商页面时，遇到一个需求，就是要进行页面的检索，检索时，要将匹配到的内容高亮展示，效果图如下：如果要显示上面的效果需要用到正则表达式正则表达式去匹配想要匹配的字段，如果是要同时匹配多个，则需要用|进行分割，匹配到内容后，通过replace来将匹配到的内容转化为一个background:yellow的div元素即可。渲染数据时，用v-html进行渲染就可以了。检索时，接口返回要匹配的字段比如我输入的内容是：0603,此时调取接口，接口返回给我要匹配的字段，是一个数组，则就是多个字段同时匹配，

最近在写后台管理系统时，遇到一个需求，就是上传图片，有且仅能上传一张。效果图如下：功能描述：上传图片时，仅支持单选，如果上传图片成功后，展示图片，并隐藏添加图片的按钮。删除图片后，上传按钮展示。html部分代码 <el-upload action="/file/Upload?module=EQ" accept="image/jpeg,image/jpg,image/png" :limit="1" :on-change="handleLimit" :class="{disabled:eqOb

今天做了一个图表页面，效果图如下：上图红框中的部分，是指的table表格中，鼠标移入某行后，出现的背景颜色。默认的背景颜色是一种灰色。鼠标移入后的行背景颜色修改通过css即可实现：.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #ff99004a;}完成！！！去掉每行的border边框.el-table { border: none !important;}.

最近在看同事代码时，发现同事使用了一个表格自动滚动加载数据的功能。这个功能适用于：表格中内容过多，需要分页展示，但是又不想使用分页组件，此时可以只展示一页的数据，然后当表格滚动到底部时，再加载下一页的数据。参看大神链接：element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）：https://blog.csdn.net/baidu_27769027/article/details/101924676elementUi官网上是有无限滚动加载功能的。

最近在做超市系统，框架还是用的elementUi,在展示表格数据时，有时要求要展示合计功能。其实elementUi中的table表格中是有合计功能的，但是这个合计不太好。这个合计是每列数据都进行统计。显示不符合我现在的要求。此时可以使用插槽功能，使用方法如下：以上图为例：在金额一列后面下下面的代码：<div slot="append" style="display:flex;"> <div class="sum_footer"> <div class=

最近在开发工业品超市的后台系统，遇到一个需求，就是实现在一个table表格中多选数据，由于table表格中的数据较多，所以要分页获取，因此现在的需求变为：如果在跨页的table表格中跨页选择数据我一直以为elementUi中的table是不能实现此功能的，结果百度后发现，竟然是支持的。效果图：表格第一页选中2条数据：表格第二页选中1条数据这样返回到第一页的时候，第一页选中的两条数据还是勾选的状态的。点击表格底部的完成选择订单按钮，可以拿到选中的三条数据。跨页多选功能实现给table添加r

今天在做后台管理系统时，遇到一个需求，在表格中有个img的字段，可能有多张图片，在表格中只展示一张，当点击此图片时，展示所有图片的预览大图效果。遇到这种问题，我的第一反应就是使用走马灯效果：1.走马灯实现预览大图效果<el-dialog title="证明图片" :visible.sync="dialogImgs" width="550" :before-close="closeImg"> <el-carousel height

今天在写后台管理系统时，用到了表单校验，为了能够校验必填项和类型等，需要用到表单中的 rule校验规则。最终效果如下：由于在此页面上，禁用和删除两个功能基本类似，因此我是共用的一个弹窗展示。所以导致，在禁用页面表单校验完成后，再进入删除页面时，在没有点击提交按钮时，就直接进行了表单校验，提示了校验报错信息。这样并不影响使用，但是页面美观度会差很多。因此需要在进入此弹窗页面时，清除表单校验。clearValidate的用法我从网上找到的校验方法是：this.$refs[formName].cle

在做后台管理系统时，最常见的系统布局就是：左右布局。左侧是菜单栏，右侧是内容区，内容区又分为头部和展示区。如下：因此分析一下这个页面的结构：1.html部分<template> <div class="app-wrapper"> <div class="layout-aside" :class="{collapse:isCollapse}"> <div class="layout-logo"> <router-link to=

今天后端同事要求实现如下的效果：参考的elementUi中的table中的树形数据结构：支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。通过上面的介绍，我们发现

我不得不吐槽一下，我的js水平，真的是烂。哎，学吧。前几天写了一个关于竖向轮播的功能，链接如下：实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)效果如下：代码如下：<el-carousel height="26px" direction="vertical" indicator-position="none" :autoplay="autoplay"> <el-carousel-item v-for="(items, indexs) in carouselL

最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播：很早之前，我是有用过js或者jq写轮播图的，但是现在有了vue+elementUi之后，则想当然的想用elementUi中的走马灯组件。elementUi官网中提供的都是一屏一个元素的滚动，此时要实现的效果是一屏两个元素的滚动html部分代码<el-carousel direction="vertical" v-if="carouselArr.length"> <el-carousel-item v-fo