vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知 使用element-ui中的Notification，只有一个message属性是有很大的操作空间，其余的都是写死的，无法进行扩展，达不到想要的效果。所以只能在message上下功夫。 在element-ui官方文档中可以看到Notification中的message属性是可以处理VNode的所以我们可以使用VNode来达到我们需要的效果。 如何关闭通知呢？ 当创建通知的时候，会返回该通知的实例，通...
表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容： <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"><el-table-column type="index" align="center" fixed></el-table-column><el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column><el-table-colu...
使用方法： 在配合 Element-UI 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字 关于第一个问题，可以在初始化VueI18n实例时，通过 localStorage 来为 locale 对象赋值 在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale 的属性值 const i18n = new VueI...
为什么要进行组件封装？ 封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件（component）是vue的最强大功能之一，组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中，我们难免会写很多类似的、重复的代码，有时候两个业务模块有相似的功能，采用复制粘贴已经很省事，但如果涉及的字段或有一些小差别，你也会觉得很烦，毕竟你要从头到尾瞅着去改动。这时候如果把那些相同的功能，抽象出来抽离成组件，...
现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue，axios，element-ui开发一个省市区三级联动的组件。 1.准备工作，首先我们需要全中国的省市区资源的json数据（科普一下：前六位数字是身份证前六位） 2.搭建vue-cli,安装axios,element-ui,创建vue，webpack项目 1). 在控制台或者终端执行以下代码，其中只需要路由（y），其他e2e，eslint这些不需要(y) vue init webpack ...
以下是组件代码： <template><div class="navMenu"><label v-for="navMenu in navMenus"><el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state===ENABLE":key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value"disabled=""><i :class="navMenu.entity.icon"></i><span slot="title">{{navMenu.entity.alias}}</span></el-menu-item><el-submenu v-if=...
最近要写个弹框，发现element-ui弹框样式还可以，就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来message文件夹src文件夹 index.jsimport Message from ./src/main.js; export default Message;mian.jsimport Vue from vue; import Main from ./main.vue; let MessageConstructor = Vue.extend(Main); let instance; let instances = []; let seed = 1;...
前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查，利用以上技术我们会搭建一个vue案例，效果展示图：以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json-server搭建，在本次博客中，不会讲解，如果想看的话，在小编的博客中，也有讲解关于脚手架搭建和json-ser...
这一篇主要是创建一个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/ 我的...
背景介绍 最近比较空闲，公司的后台就想着把现在的后台管理系统给改版一下，说是以前的太难看了，用着也不好用，然后给我甩过来一个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...
最近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...
一、问题描述： 我们在输入银行账号会设置每四位添加一个空格，输入金额，每三位添加一个空格。那么，在vue，element-ui 组件中，如何实现呢？ 二、效果图：三、实现代码： <el-table-column prop="account" label="银行账号"><template slot-scope="scope"><el-input type="text" maxlength="23" v-model="scope.row.account" placeholder="请输入银行账号" @change="validateNum(scope.$index)"></el-input></template> </...
1、首先我们在cli中引入element-ui 2、然后在具体的代码中放入uoload组件 <el-upload class="upload-demo" action="" :auto-upload=false :on-change=changeUpload><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> 3、使用element-ui的upload组件中提供的接口：on-change回调函数,然后在回调函数中写入如下代码： ch...
我要实现的功能是在上传文件之前校验是否表格中存在重复的数据，有的话，需要弹窗提示是否覆盖，确认之后继续上传，取消之后，就不再上传。项目中用的element-ui是V1.4.3 <el-uploadclass="upload-demo" dragref="fileUpload":action="urls.fileUpload":on-success="handleUploadSuccess":on-error="handleUploadError":on-progress="progressUpload":before-upload="beforeUpload"show-file-listmultiple><i class="el-icon-uploa...