lchmyhua88的博客

elementui表单动态添加校验规则

在一些场景下面，我们需要对table来进行编辑，就像表单一样使用，可能还会带验证。本文vue+elementui实现动态添加行/可编辑的table，文中示例代码介绍的非常详细，大家也可以参照一下：

官网也给出来了建议，把权限放在vuex里面，通过角色来访问。在实际的使用过程中，我们的数据是从后台获取的，用户在登录的时候，根据用户的角色，动态获取了权限，前端在格式化路由进行展示。实现思路就是从后台根据用户查询用户所分配的所有按钮权限 每一个按钮都有标识，然后前端来控制

​项目是gitee下载的 地址 https://gitee.com/panjiachen/vue-element-admin由于分支较多,最初我下载的master版本的 ,但是权限版本比较老了，权限这块我使用的是vue-element-admin权限验证: vue-element-admin权限验证，根据不同角色动态生成路由渲染侧边栏https://gitee.com/gsx1992/vue-element-admin.git这个里面的， 修改最大的地方就是 src/store/modules

最近在使用vue-element-admin版本开发项目，由于新旧交替历史原因，不得不使用iframe嵌套旧版本的页面，这么一来旧版本里面比如某个页面会有新开页面，那么我们需要动态监听这个新开的页面，把它添加到tagView上面：

element ui table封装组件，render 函数动态事件设置，这样就实现了render 里面props来自定义style，动态绑定多个事件，值得注意的是自定义style一定要驼峰命名，否则是不会生效的。

封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下，这样就可以定义化了，多数用于一些转换，或者操作列场景下，自行考虑即可，我们粉转成一个组件，那么不用每个table页面按照官方的这种el-table-column写法...

VUE ElementUI Admin使用table时，选中某行或者鼠标移入某行时添加背景色

在element ui后台tagview 我们希望在body中上下滚动的时候固定下来不动， 就是标签栏和顶部设置栏保持不动

el-select多选以tag展示时，超过显示长度以...省略号显示，问题描述注意：① 一个tag文字过长需要溢出隐藏，超出部分… 显示② 多个tag卡片溢出隐藏，超出部分…显示

在开发过程中偶尔遇到el-table嵌套el-form，而且还需要表单验证的需求，但是这种都是官方的组件就可以实现，但是有时候我们需要表格的这种形式，那么使用原生的就不行了，下面我们来看一下这种的form table使用：

element admin 使用VueTreeselect 树多选

element admin 中动态设置快捷导航(标签栏导航)meta标签和title标签

有时候我们需要让Table组件不显示某行，如何实现？（基于iview），我们可以在初始化的时候把列全部取出来，在具体使用的时候在根据逻辑来处理，直接上代码：<template> <div style="width:600px;margin:0 auto"> <Tabs value="normal" @on-click="changeTab"> <TabPane label="查询" name="normal"> &

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。iview里面我们可以来自定义tabs切换的样式。默认的就是这种;<template> <Tabs type="card" closable @on-tab-remove="handleTabRemove"> <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane> <TabPane label="标.

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。比如我们现在有这样一个页面：这个页面是没有设置自定义样式之前的页面我们可以根据自己的分割设计表头，表体样式：背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行，当前行背景颜色更换为红色 奇数偶数行变色比如上图这样的样式。/*底色*/.ivu-table td{ background-color: #182328; color: #fff;}/*头部th*/ .i..

iview 菜单页面我们可以做一个浮动层，通过拖放按钮来实现菜单隐藏或者展示。在进入页面的时候菜单式隐藏的：双击按钮菜单展示： 下面我们先来看菜单的处理：菜单使用element ui主键做横向菜单,菜单是三级菜单，服务端通过接口生成，iview 获取路由：<template> <div class="menu-list"> <div v-show="showGroup"> <el-menu :de.