以select为例，如果select写在循环里，触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。 下面这样写是无效的： @change="changeStatus(val, index)"<div v-for="(item,index) in itemList"><el-select v-model="item.value" @change="changeStatus(val, index)"><el-option v-for="op in options" :key="op.key"::label="op.label":value="op.label"></el-option></el-selec...
element-ui上传一张图片后隐藏上传按钮 el-upload里面绑定一个占位class：:class="{hide:hideUpload}" data里面初始值：hideUpload: false, limitCount:1 onChange里面（添加文件、上传成功和上传失败时都会被调用的那个）：this.hideUpload = fileList.length >= this.limitCount; handleRemove里面（删除文件被调用的那个）：this.hideUpload = fileList.length >= this.limitCount; style，把scoped去掉（或者外部引入样式文件，...
使用方法： 在配合 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;...
在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是如此。 自然，后端就做了一项非常“漂亮”的交互体验数据——分页 这不分页还好，一分页对超过10条数据之后的本来也不多，就20条，偏偏还得做个分页器。（假设为10条） 此时，如果能够像购物商城那样拖拽到底部自动加载新数据就好了。 于是《在...
render-header render-header在官方文档中的介绍是这样的：参数说明类型可选值默认值render-header列标题 Label 区域渲染使用的 FunctionFunction(h, { column, $index })—— 修改列标题样式 1.在列标题后面加一个图标。 以element-ui官方文档一个table表格为例，我们在地址的后面加一个定位标志的图标，代码如下： <template><el-table:data="tableData2"style="width: 100%":row-class-name="tableRowClassName"><el-table-colu...
上传方案一：先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器 <div class="upload-music-container"><el-uploadclass="upload-music"ref="upload"action="http://up-z2.qiniup.com/":data="{token:uploadToken}"multipleaccept=".mp3":before-upload="uploadBefore":on-change="uploadChange":on-success="uploadSuccess":on-error="uploadError"><el-button size="small" type="primary">选取文件</el-button><d...
最近在做vue+element-ui的后台管理页面，其中用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，在此记录一下解决方案，以免日后再次遇到。前端页面 前端代码 submitForm(formName) {this.$refs[formName].validate((valid) => {let url = http://localhost:8088/pethospital/order-recordlet data = qs.stringify({title: this.orderForm.title,hospitalId: this.orderForm.hospitalId...
背景做管理平台的项目,用到了element-ui，需要通过监听el-table滚动的位置来获取最新的数据，那么怎么样监听el-table的滚动呢？准备我们默认的技术栈是 vue+element-uitemplate代码：<el-table :data="logList" :show-header="false" row-class-name="table-row-class" height="700" ref="table" @row-click="rowClick"><el-table-column type="expand"><el-table-columnlabel="log信息"prop="message"></el-table-column> </el-ta...
element-ui默认的table组件支持的表头筛选（过滤）是比较简单的，只支持数组的方式，单选或多选的形式，但有时候我们喜欢支持输入框形式（其实感觉有点扯淡，一般列表页上面都有搜索条件）。 注意：里面用到的jsx语法，可能需要安装一些插件。 准备工作：1.安装babel-plugin-jsx-v-model插件 npm i babel-plugin-jsx-v-model -D或者 yarn add babel-plugin-jsx-v-model -D2..babelrc: {"presets": ["es2015"],"plugins": ["jsx-v-m...
问题讲解： 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后...
前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查，利用以上技术我们会搭建一个vue案例，效果展示图：以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json-server搭建，在本次博客中，不会讲解，如果想看的话，在小编的博客中，也有讲解关于脚手架搭建和json-ser...