![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element-ui
山海一哥
为者常成,行者常至
展开
-
el-date-picker禁用当月之前的月份
<el-date-picker value-format="yyyy-MM" type="month" v-model="date" placeholder="请选择" :picker-options="endDateOptMonth"></el-date-picker>在data中增加一个属性 endDateOptMonth: { disabledDate: (time) => { return time.getT...原创 2021-08-04 10:13:47 · 1573 阅读 · 0 评论 -
侧边栏组件(elementUI)
参考其他资料进行修改。hidden当菜单不出现在侧边栏时设置isNest是否嵌套,是的话里面的el-submenu不在生成图标,即只有最外层的才会生成。<template><div v-if="!item.hidden"> <template v-if="hasNoChild(item)"> <el-menu-item :index="item.menuUrl" :class="{'submenu-title-noDropdown':!isNes原创 2021-07-16 11:04:59 · 843 阅读 · 0 评论 -
文件上传组件(elementUI)
elementUI提供了长传的组件,然而项目中可能多次用到,每次都用官网的修改,过于繁琐,封装成组件。<template><el-upload class="upload-demo" :action="uploadPath" :headers="fileHeaders" :data='uploadData' :show-file-list="false" :accept="accept" :on-success="handleSuccess" :on-error="handleErro原创 2021-07-16 10:46:37 · 1353 阅读 · 0 评论 -
远程搜索组件(elementUI)
<template><el-select v-model="selectVal" filterable remote :placeholder="placeholder" :remote-method="remoteMethod" :loading="loading" :disabled="disabled" @focus="clearPreList" @change="selectChange"> <el-option v-for="item in list" :k原创 2021-07-16 10:24:25 · 683 阅读 · 0 评论 -
element通过el-color-picker换肤
定义vue文件,结构如上图,index内容如下:<template> <el-color-picker v-model="theme" class="theme-picker" popper-class="theme-picker-dropdown" size="small"/></template><script>const version = require('element-ui/package.json').v.原创 2020-09-11 13:45:56 · 1889 阅读 · 0 评论 -
关于vue响应式3级联动,iview选择组件问题的心得
最近做一个3级联动,考虑复用问题,将新建与编辑共用了很多的代码。但问题产生了,哪怕是此刻也有些不明白。弹框如下图所示假设一级为oneList =[1,2,3,4,5],二级为根据一级选中的值去跟新列表twoList=[],代码如下这便是选中一级之后,根据change事件去请求二级列表,初次写法仅在首航进行了数组清空的操作,没有this.editStatus代码块的判断,这种写法在创建时完美,...原创 2019-05-24 17:22:15 · 2470 阅读 · 1 评论 -
v-infinite-scroll无限滚动
网上搜索了很多,基本上都是指'vue-infinite-scroll'组件,其实如果你是elementUI项目的话,你可以直接使用v-infinite-scroll示例: <div style="height:100px;overflow: auto;" v-infinite-scroll="test"> <div style="height:200px">滚动...原创 2020-04-24 18:18:44 · 13568 阅读 · 0 评论 -
element table跨分页多选
参考了很多资料,最简单的方式是使用element自带的属性,官网介绍如下: <el-table :data="tableData" @selection-change="handleSelectionChange" :row-key="uniqueKey" ref="multipleTable" > <el-...原创 2020-04-10 16:30:52 · 5761 阅读 · 1 评论 -
elementUI input组件模拟数字数字及保留几位小数
该方法的好处是虽然保留2位小数,但以下方式的书写同时支持,跟iunput-number组件相比0,不必显示为’‘0.00’,可以灵活的为’0.0’或者’0’示例如下 <el-form-item label="" prop="name"> <el-input placeholder="" v-model="name" @input="name = checkNum...原创 2020-04-01 17:59:57 · 2409 阅读 · 1 评论 -
elementUI重置表单时发送额外请求
避免额外请求的方式是在el-form上添加onsubmit="return fasle"<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" onsubmit="return fasle"> <el-form-item label=...原创 2020-03-29 12:13:49 · 263 阅读 · 0 评论 -
框架中自定义字体库使用说明以及用其他库修改框架的icon或者扩展icon
字体库相对来说比较简单,只是不常用可能会忘记,这里记录下步奏,以方便以后使用。一,去网上下载字体库,比如阿里图标库。二,将字体库放入本地的静态文件夹中。三,在本地的css中将文件夹中的css导入。该css文件是核心,定义了图标,四,参考字体库文件demo使用。使用时只需要把calss放到你想要的地方就可以啦。...原创 2019-08-02 10:36:14 · 762 阅读 · 0 评论 -
两级视图多层次面包屑展示
如图所示现在大部分项目都是左边是菜单栏,右边是视图,定义路由的时候就成了2级视图路由,如果在某一个菜单中有多个层级,比如一个列表菜单中查看详情这种3级的面包屑,甚至像楼主这样的5级层次的深度该如果展示面包屑呢?这里的做法是通过路由的方式,我们通过path的值用/切割后形成一个数组,每一个值代表了一个路径,那么我们怎么知道该值代表了那个路径呢?这里就是name属性的作用了,让name(值最...原创 2019-06-28 16:25:13 · 1015 阅读 · 0 评论 -
框架中侧边菜单所关联路由在进入其他路径时丢掉选中的问题
框架中侧边菜单被选中时,会跳转到该菜单所绑定的路由,如果恰好该路由没有和任何一个菜单绑定,那么该菜单就会丢掉选中项。那么如何自定义选中项呢,每个框架都提供了一种默认选中的方式,这就为我们设置选中提供了解决办法,这里说明一个问题,设置选中和点击后跳转到对应路由不是一个概念,不要误认为设置了选中,就会跳转到对应路由,我们设置的home页或者默认打开的路由只所以让菜单显示了高亮,不是因为打开了路由,而是...原创 2019-06-27 15:52:42 · 287 阅读 · 0 评论 -
element-Ui分页跳转后返回当前页(iview相同)
如果缓存较多内容请使用keep-alive,本文仅针对个别需要缓存的页面。由于每次打开都会重新加载页面的数据,因此在第二页(非第一页)的table中跳转后又从下一页返回,该页面会重新为第一页,解决方式有二种第一是使用keep-alive,配合v-router的导航钩子beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confir......原创 2019-01-16 14:21:12 · 6860 阅读 · 0 评论