最近接触的商户后台项目居多,自然而然就涉及到了大量的表单验证,也就对一些常用的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...