关于 element table多选里面实现单选的偷懒做法

在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

3044 0 0
关于 element table多选里面实现单选的偷懒做法

关于element el-input 输入的值需要转number的问题

前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...

关于element table合并格子的思路

效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

1176 8 0
关于element table合并格子的思路

关于element侧边栏导航一些新想法

高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...

1529 0 0

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

问题当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...

2458 4 0
关于element  Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

element input异步校验+自定义错误提示

主要的效果就是用户注册时,输入的账号如果已经注册了,要提示已经注册,然后提供一个按钮,直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

4779 1 1
element input异步校验+自定义错误提示

element input表单验证数字类型方法大全

是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...

关于element el-checkbox组件click事件的一些想法

el-checkbox本身是没有click事件的,但是我们可以通过native的方式穿透下去,但是这样的话会有一个问题,我们先看下代码:<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出,你会发现,click实际上运行了两次,native本身是将事件绑定给了组件的根元素,这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果,因为stop只能防止根元素往上冒泡,并不能阻止他本身...

4779 0 0

vue 通过js触发element ui的图片预览组件

element ui的图片预览组件并没有单独提供出来,默认是在image组件里面一起使用,但是有的时候,我们需要点击某一个自定义按钮,然后弹出图片预览,但是,又不需要使用el-image组件,于是乎,有了这篇笔记。首先思路并不是我的,我也是看了下同事,他网上找的教程,然后我看了下,在掘金找到一篇文章:《Vue中使用element-ui的内置组件实现图片预览全局调用功能》;深受启发,于是也记下自己的笔记。首先思路是两个:element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来,new出来的这个构造器,他的属性为组件的属性以及其他(其他就...

vue 通过js触发element ui的图片预览组件

关于async-validator 表单重置后的初始值的问题

Element UI和iView 两个框架,他们表单验证使用的是async-validator,所他们的重置表单的方法是一样的。this.$refs[name].resetFields();使用该方法,会重置校验状态和表单值,表单的值会恢复成默认的值。那么,这个默认值的定义是什么?我今天就遇到了一个情况,就是我的表单绑定的对象,是一个空值,然后我在这个元素被创建时,拿到props传过来的值赋值给表单对象。当我再来改动表单内容后,进行表单重置时,发现,重置后表单显示的值居然是我从props中获取的那个。也就是说,重置表单,他并没有恢复我表单对象的空状态。所以我就在想,他的默认值是怎么判断的...

2567 9 0

关于element的dialog垂直居中的完美解决方案

element的dialog弹窗,默认不是垂直居中的,只是水平居中,但是他有一个很好的地方,就是当窗口的高度小于dialog的高度时,他会有滚动条,并且可以完整的显示dialog,算是一个非常不错的兼容方式。但是当我们对dialog进行css调整为垂直居中时,往往会使用下面两种样式:绝对定位:.el-dialog__wrapper { position: relative; .el-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -...

element table表格使用sortablejs插件进行拖拽

在表格里面进行拖拽,肯定没法用组件的形式,因为会破坏table的结构,所以只能从 dom上入手。安装插件yarn add sortablejs --dev中文说明站点:sortablejs中文网使用<template> <el-table :data="tbody" id="appTable" row-key="id"> ... </el-table> </template> <script> import Sortable from "so...

2831 1 0

解决element侧边栏导航只保持一个子菜单展开,点击无子菜单按钮并不会收缩的问题

饿了么的侧边栏菜单,官方就是这样,当一个子菜单展开后,点击另一个无子菜单按钮,并不会收缩已展开的子菜单。然后被强迫修改,好嗨哟!效果图不废话,上教程!教程[hide]element给el-menu提供了一个手动关闭和打开菜单的方法,但是需要通过ref获取vue组件实例,通过该实例触发方法。但是首先我们要明白要处理的问题:点击无子菜单按钮折叠已展开菜单,那么如何判断哪个菜单是展开的,是我们首先要解决的问题。判断哪个菜单是展开的在for循环遍历出这个菜单时,其实是有区分有无子菜单的。所以我们可以直接给有子菜单的元素添加click事件<template> <el-menu...

解决element侧边栏导航只保持一个子菜单展开,点击无子菜单按钮并不会收缩的问题

关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题

通过api获取的数据,往往不一定是布尔值,在后端存放的数据中,大部分是都是0和1,但是饿了么的 Checkbox 多选框 组件,v-modal绑定的,虽然他文档上显示可以是string,number,但是实际上v-modal只能布尔值。他还有一个属性checked,checked可以使用三元判断<el-checkbox :checked="status===1"></el-checkbox>但是,他有一个致命的缺陷,如果数据源更新了数据,他不会动态变化,可能是因为我把他丢在的table组件里面的原因,如果想让他变化,只能手动点击,或者重新渲染。...

1312 0 0

关于Element 表单验证数字类型不能为空字符的问题

今天写代码遇到一个问题,就是有一个输入框,他必须为整数,但是又不是必填的,默认的值是一个空字符,导致每次提交是都提示校验不通过。<template> <el-input v-model.number="sort" placeholder="请输入分类排序"></el-input> </template> <script> export default { data(){ return { sort:"", } ...

el-input 只能输入数字和小数

饿了么的input组件只是在v-modal绑定的时候有一个.number修饰符,使用这个修饰符确实可以只输入数字,但是输入的是整数,无法输入小数,而且字符串还是可以输入,还可以负数,很尴尬。如果只想让它输入数字,小数,甚至更复杂的判断,上面的方式是不行的。网上的处理方式<el-input-number v-model="num" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input> 大概就是给他添加一个老版本的事件,行内事件进行replace替换,这种方式可行,但...

2379 0 0

关于element 侧边栏导航高亮的思路

不久之前,我写了一篇《element ui 侧边栏导航刷新自动展开并高亮》的文章,里面主要讲了怎么对侧边栏导航进行高亮,刷新并依旧保持高亮展开的方法。但是后来我发现我之前的那种思路有些窄了。不太适合更大型的站点开发使用。之前的方法主要讲的是:每个网页对应一个导航栏菜单,此时导航栏菜单和网页是一一对应的,所以我可以使用当前路由的name值来进行高亮。但是,如果有更复杂的情况呢?比如:我的导航菜单只显示两级,剩下的级数不显示,点击三级及以上时怎么办?虽然两个页面在路由配置里是同级路由,但是a路由点击按钮跳转到b路由,b路由有前缀条件,所以不能直接出现在导航菜单里,那么应该已经保持a路由菜单高...

2896 0 0

element 上传文件组件-文件列表动画bug

今天想封装一个上传组件,用于本地选择文本文件后,前端直接将文本的内容给读取出来,然后提交这个拿到的文本内容。所以,组件的作用就只是将文件转为文本。bug封装中我发现了一个bug,由于上传组件是自动上传的,所以我使用自定义上传覆盖默认上传方法。然后再自定义上传方法中拿到文件,并读取到文本。但是饿了么组件会默认将你选择的文件显示到文件列表中,也就是上面图上那个样子。并且会有动画但是,如果我想要让它显示已上传,就是文件列表显示打勾,就需要对组件绑定的file-list数组push一个对象,对象里面有文件的name值,也就是如下:this.fileList.push({name:"文件...

2300 5 0
element 上传文件组件-文件列表动画bug

element 时间组件转时间戳

所有的时间组件,存服务器一般都是需要转时间戳的,并且由于位数问题,都是以秒为单位存储。<el-form> <el-form-item :label="label"> <el-date-picker :placeholder="placeholder" :value="value" :type="type" format="yyyy-MM-dd" value-fo...

3277 1 0

element 表单重置无效 resetForm resetFields

这个原因是因为没有设置prop,需要设置一个prop即可。个人测试,form的rules绑定一个空的{}对象,prop随便设置,也是可以使用的,表单重置正常。//重置表单 resetForm(formName) { this.$refs[formName].resetFields(); },

2421 0 0

element ui 自定义主题按需导入样式 yarn

最近发现了element主题的一个知识点,应该可以方便大家。前提项目里的组件都是按需导入,然后要求使用自定义主题,但是设计师只给了一个官方在线主题生成工具生成的主题zip包。这个主题压缩包打开发现只有一个index.css,一个font文件夹,一个config.json文件。css文件大概会有200kb以上。而我们的按需引入是引入一个组件,就会引入对应的样式文件,他不会一口气引入所有的样式,但是如果要使用自定义主题,index.css又不得不引入,导致按需引入达不到理想状态。我们现在就要解决这个css的问题。思路打开config.json文件,你可以看到一些键值对,仔细看一下,你可以发现...

element ui 自定义主题按需导入样式 yarn

element ui 侧边栏导航刷新自动展开并高亮

这个应该有点追求都想要做到的事情吧,都希望每次刷新页面,页面的导航栏能够自动高亮,二级菜单的话就自己展开。我想了好久,今天无意间测试到了,特此分享。[hide]思路首先我们要知道NavMenu 导航菜单他的选项菜单是有一个必填属性index的,这个index要求类型必须为string格式。然后根元素el-menu他有一个默认选中的属性default-active,而这个属性刚好要对应index。而el-menu的这个属性是可以自动展开菜单的,即便这个index可能是二级菜单的index。他依旧可以做到展开的效果,并且高亮对应的选项。所以,我们现在的重点就是这个index怎么设置,怎么获取...

element ui 侧边栏导航刷新自动展开并高亮
加载中