前言 公司系统在用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的组件，因...
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。在这个月的 NingJS 上我们开源了这个项目，当时它的文档还没有准备好。今天，经过两周多的完善， Element UI 的文档正式上线啦！目前它处于 rc 阶段，正式版将于 Vue 2.0 发布后第一时间跟进。 欢迎大家来使用和完善，一起把它做成 Vue 最好的企业级组件库。 ElementUI的表格要求的数...
ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端，那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。 前端放置Pagination 分页器，我这里直接采用了完整功能的分页器。 <el-pagination@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes=...
首先说一下 我在form表单里面遇见的坑： 1.例如我要给后台传的不是对象，而是一个数组，怎么写验证？ 2.比如我有四个弹出框，都要做验证，这个时候就要注意了，每一个弹出框的ref都不能给的一样，并且一定要与当前弹框的确定或者保存按钮一一对应，例如：第一个弹框的ref=number,按钮的click比如为xxxxxx(number),第二个弹出框的ref=‘number2，对应的按钮>>xxxxxx(number2)。如果ref用的都一样，就会出现，点击下一步我没有去做验...