最近接触的商户后台项目居多，自然而然就涉及到了大量的表单验证，也就对一些常用的el-form表单验证和问题进行下梳理。 当我们添加required验证后，输入一些数据后再删除完时，会出现xxx is required，如下图所示你可能很纳闷，已经为form表单传入了rules了啊，在不全部删除时，验证规则都没问题。这个问题是因为在html中使用了required字段，而在rules的规则没有设置required为true， // html <el-form-item label="角色名称" req...
这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目，我准备把项目放在e盘下：E:\Work\RegisterProject；命令行进入这个目录：创建一个基于 webpack 模板的新项目 （1）vue init webpack register(项目名)需要yes按Enter健就可以了，不需要输入n,然后按Enter健。创建完成：在目录中可看到运行：命令行进入到刚创建好的目录：cd register运行：npm run dev成功：在浏览器输入：http://localhost:8080/ 我的...
前段时间，在实现带输入建议并且支持模糊查询输入框的时候，发现了两个值得注意的小地方。整理出来，以供借鉴。 废话不多说，直接来解决问题。 踩坑问题描述： 问题一： 获取到后端返回的数组，并将数组传入作为 results 传入 callback 后，焦点放在 输入框 上的时候，并未出现任何内容，只出现了一个不完整的空白框。 问题解决方案： 这个问题开始我以为是传进 callback 的 data 格式不对。Element官网上是这么写的：我传入的是...
需求：选择日期范围，但是选择范围需要在一周以内。举个栗子：假设选第一个日期为1月17日，那么1月11日以前、1月23号以后的日期都需要设为禁选状态。 方法：考虑到有两种设计方式：1、用两个独立时间选择器控制，实现起来比较混乱。 2、用日期范围选择器。第一种方式没有做demo，有特殊需求的小伙伴请留言。这里选择使用日期范围选择器，使用起来可以预见代码会清爽很多。 效果图：代码： <el-date-pickerv-model="datePick"type="...
背景介绍 最近比较空闲，公司的后台就想着把现在的后台管理系统给改版一下，说是以前的太难看了，用着也不好用，然后给我甩过来一个ant-design-pro的链接，说是他看这个就挺不错的。 我当时心里就想着，之前的那个项目混合在你们的java项目里，跟普通的jsp页面差不多，一下就是一大堆的css和js文件，看着我都害怕（好吧，我承认其实我都不敢看），这能加载的快了就奇了怪了。ant-design最初是为react设计的，ant-design-pro自然也是...
具体代码如下所示：<template><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;"></el-pagination> </template> <script type="text/ecmascript-6"> export default {components: {},data() {return {}},props: {pageSize: {type: Number,defa...
前言 在用户使用过程中提出一键导入的功能，需求如下:点击导入按钮显示提示框，然后是单选框以及上传按钮。pc端常使用element-ui组件，但是这个项目是vue1的老项目，并且没有element-ui组件。所以需要自己动手实现单选功能和上传功能。 radio 属性及方法 name： 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现) id： 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radiovalue：单选按钮的...
本文主要介绍怎么在el-tree组件中通过render函数来生成el-button。 这是element-ui中el-tree树：这是需要实现的效果：tree.vue文件中，具体实现的代码如下： <template><el-tree:data="treeData":props="defaultProps"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false":render-content="renderContent"></el-tree> </template> <script>export default {name: tree,data:function(){return {treeData: [...
使用element-ui table组件的筛选功能的一个小坑使用自定义模板和筛选功能，一开始的代码<el-table-column v-if="key===isShow" label="是否在发现页展示" :filters="[{text:已展示,value: true},{text: 未展示, value: false}]" :filter-method="filterShow"><template slot-scope="scope"><el-tag type="success" v-if="scope.row.isShow">显示</el-tag><el-tag type="danger" v-else>不显示</el-tag></template></el-table-colum...
先说结论：在改变pageSize时，若当前的currentPage超过了最大有效值，就会修改为最大有效值。 一般Pagination组件的声明如下： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :current-page="currentPage":total="total":page-sizes="[10, 20, 50, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>数据都是异步获取的，...
我使用的element-ui的版本是V1.4.13。如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。 现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示：为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。 1、在element-...
做轮播的时候想用这个change回调函数，但是官方文档上竟然就只列了这么一行东西，完全没有示例代码（也可能我没找到哈）鼓捣了半天，东拼西凑终于找到了靠谱的使用方法，其实很简单 在轮播组件上加上@change=“XXX” 比如 <el-carousel indicator-position="none" arrow="never" height="550px" style="width:1300px" @change="carouselChange">@change就是官方定义的事件名称，XXX就是你自己定义的方法名，触发change事件时就会调...
之前有一篇写的如何同时传递form表单及upload组件文件，如果有多个upload文件该如何传递呢 上代码 html <el-form ref="newform" :model="newform" :rules="rules"><el-form-item prop="expName" label=""><el-input v-model="newform.expName" placeholder="" style="width:75%"></el-input></el-form-item><el-form-item prop="expSn" label=""><el-input v-model="newform.expSn" placeholder="" style="width:75%"></el-input><...
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。 效果图预览：首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"><div class="table-head"><div class="selection"><el-checkbox :indeterminate="indeterminate" v-model="ische...
工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~ <template><div class="sortDiv"><el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-on-click-node="false" :render-content="renderContent" :allow-drop="allowDrop"></el-tree><el-button @click="getData">获取数据</el-button></div> </template> <scr...