ElementUI

问题描述今天做项目的时候要做一个折叠左侧导航栏的功能。准备使用这个饿了么UI自带的折叠图标。图标长这样的：但是引入了以后，发现图标不生效。在页面中没有显示出来。控制台审查一下元素发现，i标签倒是有..

对于后台管理系统，比较常见的功能就是增删改查。对于“查”而言，筛选数据以查看是比较常见的。饿了么ui中自带的有筛选功能。不过官方文档所给到的例子是“前端筛选”，意思就是写死的数据，前端过滤出来以呈现。官方效果图如下： 开启筛选其实很简单，只需要给对应列添加filters属性即可…

饿了么ui中使用el-upload上传文件，如果失败了。我们需要获取上传失败后端返回的数据。饿了么组件中有对应上传失败的钩子函数。这里有一个小细节需要注意一下。在上传失败的钩子函数中，有三个参数，第一个是错误对象（后面两个欢迎大家看文档，嘿嘿）。直接没法取到错误对象里面的信息，…

这两天产品新加了这样的一个需求：因为el-table的列挺多的，就想加一个配置列的功能，就是在配置面板里面里面有很多复选框，一个复选框对应一个列的名字。勾选复选框，对应列出现，取消勾选，对应列隐藏。点击保存列配置，就会记住用户想要显示的列和想要隐藏的列，下次再进来页面的时候，用…

比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是正常的状态，允许点击。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；如果是正常状态，当鼠标悬浮的时候就不出现任何变化。好像挺简单的，不过里…

假设有这样一个需求，就是我们有数据表格，用来记录学生是否处于上学和辍学的状态。辍学的状态加上个背景色，作为提醒。最终效果如下图

饿了么ui中的下拉菜单组件，如果某个下拉菜单被我们禁用了以后，颜色会置灰，点击也没反应了。但是存在的问题就是，当鼠标悬浮到对应的禁用项上面的时候，我们会神奇的发现，居然没出现鼠标禁用的样式，官方给出的竟然还是一个箭头的样式。问题图如下： 其实并不影响产品的使用，但是有的时候我们…

在我们做项目中，会遇到这样的问题，就是在某个页面有一个form表单供用户输入填写，需求是：如果用户在表单中输入了内容，但是没有点击保存，而突然想离开这个页面了，就要提示询问是否保存，这个时候就要判断表单内容是否发生变化，并做相应的逻辑控制。本篇文章分两种情况去简述如何判断for…

关于输入框校验这个问题，其实是老生常谈的问题。相关的工具包有很多，如果我们使用饿了么UI，也可以用el-form中的简单的校验。一般来说如果使用elementui的话，就大概率是做后台管理系统的，说道后台管理系统，就要说道权限问题。即：不同的用户看到的、可操作的不同。后台管理系…

前段时间项目中有一个小功能，就是上面一排复选框，下面是一个表格，点击对应复选框，发请求获取对应的内容，呈现到页面上。其实很简单，但是因为临近过年，后端的同事要提前回家相亲（大龄剩男的悲伤），所以后端同事就说，要不我把所有的数据都给你，你自己做存储，点那个复选框，就呈现那个对应内…

饿了么UI自带的有分页组件，功能基本上挺完全的，不过没有第几分之几页的效果。如果想实现这种效果怎么办？先看一下，效果图吧 如果只使用一个分页组件示没法实现这种效果的。所以换个思路，一个分页组件不行，那就用两个

elementui提供的el-table其实挺不错，不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性，方便我们去修改对应的样式，但是有的时候可能会少了点什么。 比如：想要把表格的高度都尽可能设置小点，这样的话，页面就可以展示更多行更多条数据了。但是单单使用下图…

咋办呢？可以通过js的方式获取对应的DOM元素，然后修改其对应的值。我们先审查一下元素 这样的话，我们就可以在页面初始化渲染的时候，去修改其内容。代码如下： 当遇到组件解决不了的问题的时候，可以考虑使用原生js去实现对应的效果。

目前企业开发项目，比较常用的UI框架大致有三个，elementUI、IView、AntD。当然还有别的UI框架，不过有的可能要收费。其实每个框架在使用的过程中，都会有对应的“坑”，其实所谓的“坑”就是官方文档写的不够详细，导致用户在使用的过程中的细节和官方文档定义的细节不一致。…

上一篇文章中讲述了模糊查询关联搜索，不过模糊查询关联搜索一般来说都是用户输入某个关键字以后，关联相关的数据呈现，并供用户选择一条（当然el-select中也自带多选功能，见下图，不过有些场景不太适用），用户选择了某一条以后，展示这一条数据展示给用户看；但是有些情况就是用户想直接…

在我们使用饿了么UI框架做项目时，el-table的自带的表格边框颜色有时候需要修改一下。本文简述一下修改el-table边框样式的注意事项。 控制饿了么el-table的边框的样式有三种方式，单元格的回调、表头的回调、还有单独设置样式。三种方式灵活结合使用即可。

在饿了么ui的框架中，输入数据el-form，输出数据el-table。有时候产品想让枯燥的表格来点动态的样式，比如不同的内容展示不同的样式，对于这个需求，其实方式有很多种，本文列举两种，以供参考。 这个第一种方式，虽然能实现效果，但是代码都写在el-table里面了，看起来比…

我们前端搭建好一个项目的基本架子以后，就要开始开发页面了。为了看着高大上一些，产品大佬说，加上一个敲击回车键就能登录的效果。好嘞，话不多少，代码为证：