最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！ 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ，基于此封装了一些 可复用的代码。 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 。双剑合璧 天下无...
1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中，然后点击更多项目中的编辑项目2.修改前缀为el-icon-xxx，xxx自定义，然后将项目下载自本地3.将这5个文件放入到项目文件中，将iconfont.css引入到Vue项目中， 然后修改iconfont.css的.iconfont处，将其修改为下图所示4.修改iconfont.css后，大致如下图所示5.最后就可以采用icon相同方式引入图标，如下图方式引用即可注意：如果修改前缀为el-icon引入，可能会导致与...
在我们引入elementUI的时候，一般是两种方式：npm安装或者在script直接引入；当然，在script直接引入的时候，我们也可以通过直接指定版本的方式，达到锁定版本的效果。 <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>直接引入是从外网引入，每次加载都是读取外部网站，我们大部分开发者可能使用的是npm安装的方式，采用这种方式引入的时候，elementUI会保存在vue项目下的node_modules文件夹中，找到element-u...
前言 公司系统在用elementui做后台开发，不免遇到一些需要自己去根据原有的功能上，加一些交互的功能。 今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程，东西听上去很简单，但就是越简单的东西越容易出一些问题。官方tag文档：elementUi-tag标签 效果图：思路 一、多选框勾选，出现对应的tag:1.利用watch监听多选框绑定的值A(数组)的变化； 2.根据A的变化,循环拿到勾选多选框的id对应的name，将id以及对应的name组成新...
首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行TreeStore.prototype.getCheckedNodes = function getCheckedNodes() {var leafOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;var checkedNodes = [];var traverse = function traver...
vue的render函数在日常开发中被广泛应用，今天以ElementUI中的table表头重构为引，实际应用一下借助render函数实现表头搜索，不足之处请多多指教！ 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"><el-table-column prop="date" label="日期" min-width="20%" align="center"></el-table-column><el-table-column prop="name" label="姓名" min-width="60%" align="center"></el-table-column>...
在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下:<!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"><el-table-column type="index" label="序号" width="70"></el-table-column><el-table-column prop="status" label="状态"></el-table-column><el-table-c...
本文主要参考： http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现，能够展开的导航栏是不能展开的，效果这里先不演示了。可以在上边的网站上看到。 现在有这样的需求，就是说，默认的时候需要展开这些导航，就是一打开界面的时候就能够显示导航里面的菜单内容。 具体操作是这样的： <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@1.4.1/lib/index.js"></sc...
前言 有ABCD四个表单，提交的时候同时校验(是的，后台管理系统的需求就是这样)，巧用new promise。 实现的方法有很多种，我讲下自己觉得比较优雅的方式，欢迎各位大大的指正哈。 代码 let formArr=[formA,formB,formC,formD]//假设这是四个form表单的ref var resultArr=[]//用来接受返回结果的数组 var _self=thisfunction checkForm(formName) { //封装验证表单的函数var result = new Promise(function(resolve, reject) {_self....
使用vue开发项目，用到elementUI，根据官网的写法，我们可以自定义主题来适应我们的项目要求，下面来介绍一下两种方法实现的具体步骤，（可以参考官方文档自定义主题官方文档），先说项目中没有使用scss编写，用主题工具的方法（使用的较多） 第一种方法：使用命令行主题工具 使用vue-cli安装完项目并引入element-ui（具体可参考第二种方法中的介绍） 一、安装工具 1，安装主题工具 npm i element-theme -g2，安装chalk主题，可以从...
Main.js var routeList = []; router.beforeEach((to, from, next) => {var index = -1;for(var i = 0; i < routeList.length; i++) {if(routeList[i].name == to.name) {index = i;break;}}if (index !== -1) { //如果存在路由列表，则把之后的路由都删掉routeList.splice(index + 1, routeList.length - index - 1);} else if(to.name != 登录){routeList.push({"name":to.name,"path":to.fullPath});}to.meta.routeList = route...
在每个项目中路由是不可或缺的，最近学习vue-router和ElementUI配合使用实现导航栏，在学习的过程中遇到一个问题：点击浏览器的刷新之后页面停留在原来的位置，但是导航却是默认第一个。 由于接触前端时间不长，对于路由的概念不是特别清楚，按照文档写了之后完全不知道怎么下手了，请教了同事，同事的解决办法是利用vuex管理，但是vuex这块还没有接触过，所以这个问题就一直搁置了，今天周末自己在家学习偶然直到了可以使用$route...
前提：已经安装好Vue初始化vuevue init webpack itemname运行初始化demo运行一下初始后的demo，如果没有问题则进行安装elementUI npm run dev安装 elementUInpm i element-ui -S引入elementUI在main.js中引入elementUI import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI)测试下面我们来测试一下 在创建header.vue文件，复制一段elementUI的代码 <template><el-menu:default-active...
首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调，比如这个slider滑块elementUI中的API是没办法改变这个slider的颜色的，可是老板喜欢很黄，非要用yellow色。没办法。拿人钱财替人消灾。 我试着在写的组件中直接去更改这个slider的颜色，发现根本不能直接改。有意思。 我们分析一下：当我们想要更改某个元素的css样式时，只要找到元素具体的class去更改样式的思路肯定是没问题，既然不生效，那么肯定...
前言 vue.js的UI组件库，在git上有多个项目，我见的使用者比较多的是iView和Element.两个组件库，组件都很丰富。 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。两者各有优缺点，不多评论，根据自己的需求，我最后使用了Element。因为最近公司开发一个很小的后台项目，所以考虑部分引入element的组件，因...