1.最近在做的erp项目，有一个需求是同一个客户下的同种订单，需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo，做的很直白，不过不太符合业务。在网上找了篇文章参考了一下2.效果图如下：在动态处理从后端拿回来的数据的时候，是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。3.代码：//合并单元格 二维数组-> 根据“标识...
本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考，具体如下： 最终实现需求如下图： form表单内容与重点人员图片同时上传且图片为必填项分析弹框页需要解决的问题有： 1、表单内容的验证及必填项 2、新增和编辑用同一个组件如何处理数据 3、图片需要和信息一起传递（即不允许自动上传） 4、图片必填的验证问题 针对上述问题作出方案： 1、el-form的表单验证需要注意几个地方： a：el-form-item的p...
一个具有基本增删改查功能的通讯录，数据保存在本地的localStorage中。 demo地址: https://junjunhuahua.github.io 1. 所用技术 js框架: vue2 https://cn.vuejs.org/ ui框架: elementUI http://element.eleme.io/#/zh-CN 脚手架: vue-cli 单页: vue-router https://router.vuejs.org/zh-cn/ 模块打包: webpack 2. 脚手架搭建 # 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpac...
绑定一个 [12.34,-45.67] (东经西经，南纬北纬 正负表示) 形式的经纬度数组，能够按度分秒进行编辑，效果如下所示，点击东经，北纬可切换。 经纬度的 度转度分秒 能够获取度分秒格式数据 Coordinates组件实现 模板 一个span显示东经西经，三个输入框输入度分秒 <template><div class="coordinates"><!-- 经度 --><div class="item"><span class="itude"@click="itudeChange(true)">{{ longFlag | longitudeName }}</span><el-inpu...
VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。其中ElementUI，就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境： NodeJS（npm）Webstorm （前端IDE）Nginx（后期用来转发请求到后台服务器） 由于我们需要使用npm的包管理器，所以首先得先安装nodejs, 直接...
使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。 验证规则分析规则一般验证规则，主要是是否必填，不为空，以及参数类型的验证。 基于这个条件，我们开始找找思路, 单个字段的验证是这样的： name: {required: 是否必填,validator: 自定义规则,message: 失败提示消息(非自定义时触发),trigger: 触发方式 }循环实现固定的规则。当一个东西固定之后，那必然...
Tree 树形控件---官方文档地址 用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script>export default {data() {return {data: [{label: 一级 1,children: [{label: 二级 1-1,children: [{label: 三级 1-1-1}]}]}, {label: 一级 2,children: [{label: 二级 2-1,children: [{label: 三级 2-1-1}]}, {label: 二级 2...
使用组件就像流水线上的工人；设计组件就像设计流水线的人，设计好了给工人使用。 完整项目地址：仿 ElementtUI 实现一个 Form 表单 一. 目标 仿 ElementUI 实现一个简单的 Form 表单，主要实现以下四点： FormFormItemInput表单验证我们先看一下 ElementUI 中 Form 表单的基本用法 <el-form :model="ruleForm" :rules="rules" ref="loginForm"><el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name"></el-...
这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。#如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Project description #回车，也可以写点项...
1：安装node前端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。2：查看node的版本号 输入命令：node -v;3：安装淘宝npm镜像由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可...
由于ElementUI目前还未开发树形表格组件，也参阅了网络上部分基于ElementUI表格封装的开源树形组件，如果想进行二次开发的话都不太理想，所以就萌生了自行开发树形表格。本示例提供开发思路，移除了多余的样式，比较适合新手入门学习，如果应用于实际项目还请自行封装。 目前还仅仅实现了视觉的树结构的层级效果和控制结构的显示隐藏，后续还会进行不断的完善和优化，有必要的话会对组件进行二次封装，有点在重复造论的感觉哈。 效...
前言 开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. ..思考几个问题 1.整个表单是可新增的，所以要遍历生成；2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性...
使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。 验证规则 分析规则 一般验证规则，主要是是否必填，不为空，以及参数类型的验证。 基于这个条件，我们开始找找思路, 单个字段的验证是这样的： name: {required: 是否必填,validator: 自定义规则,message: 失败提示消息(非自定义时触发),trigger: 触发方式 }循环实现 固定的规则。当一个东西固定之后，那...
这是一个简单的点击图片预览的组件顺便记录一下写组件期间踩的vue中scope的坑~从注册全局组件开始叭！ 项目目录：模仿elementUI目录结构，目录名是组件名，src中是组件源文件（或者js服务文件），文件目录下还有一个index.js用于同一管理src中的所有文件，导出并注册，这个组件我们只有一个vue文件件 先看index.js文件里有什么： //引入了src下的vue组件文件 import starPicList from ./src/star-pic-list;/* istanbul ignore next...
最近有一个需求，点击添加按钮，弹出窗口（窗口显示多选、可翻页、可检索列表），选中多条信息，当我点击确定按钮，把选中信息显示在页面上；点击取消，选中信息不显示在页面上。再次打开，把在页面上的信息显示选中状态。 思路：一开始选用elementUI官网例子,使用selection-change，但是它只显示当前改变的选择，不能满足我翻页及检索后还能选中数据的问题 toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.mu...