Vue+ElementUI实现tab选卡式后台Admin

在以往管理系统开发，相对比较大型的后台都会做成tab选卡式、即左边手风琴列表导航菜单，右边一个tab选卡容器。点击左边的菜单在右边打开一个选卡，选卡中内容是独立的，选卡可以任意切换和关闭。

在组件化开发之前的普遍做法是为tab内嵌入iframe，但现在既然用上vue组件开发我们就不能走老路了。我们使用elementui的tabs组件和menuNav来实现这个效果，我们希望点击menuNav中的item，之后在tabs中会新开一个选卡，选卡中内嵌一个对应的组件，为了减少首屏加载我们希望这个组件异步加载,预览地址: >

原生JS有3种方式来获取元素:

getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }

这样就能处理一个元素含有多个classname的情况了

比如table1中第一个列表是多选，table2中第一个列表是名称，但是使用v-if在切换到第二个table中时第一个列表显示的是多选

解决办法：把v-if换成v-show

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留

标签页请求，切换进去会请求该页的数据

如果页面一加载就请求出所有的数据，会造成数据堵塞，对性能有很大的影响

所以要在tabs标签页点击切换 的时候发起相应的网络请求，用到的是 tab-click 事件。

1渲染出页面时默认显示第一页

2切换tab时，加载此页数据

tab-click标签事件：tab 被选中时触发，他的返回值是被选中的标签 tab 实例

tab 和 event两个参数打印一下显示如下：

tab 的参数里有个 index 值，可以作为标签页切换的索引

tab 的参数里有个label，也可以作为切换标签的判断条件

也可以使用activeName。

通过上述明确事件，参数后，修改如下进行实例 *** 作

elementUI官网

参考

1，先请求一个接口，获取级联选择器的第一层数据

2，根据点击的第一层数据中的某一条获取的id获取后台数据，渲染级联选择器的第二层数据

element cascader的例子中数据都是在data中一次性写好的，即都有children属性，渲染第二层第三层等

这个牵涉到 Render Function 的使用，所以会比较复杂点，可以看下官方文档了解下：Render 函数

看完其实你大概也知道要怎麼做了， element 文档没写特别清楚，不过文档写不清楚去看下源码就一切明瞭了：

Tab Code

可以看到如果有设置 labelContent 属性，就会使用其来渲染标题部分，并传递两个参数给我们使用

h => 其实就是 render 函数里面的 createElement ，所以可以调用其来渲染组件

tab => 当前的 tab 实体

先搞个下拉式选单出来：

var select = Vueextend({

template: `

<el-select @change="(v) => $emit('change', v)" v-model="value" placeholder="请选择">

<el-option

v-for="item in options"

:label="itemlabel"

:value="itemvalue">

</el-option>

</el-select>

`,

data() {

return {

options: [{

value: '选项1',

label: '黄金糕'

}, {

value: '选项2',

label: '双皮奶'

}, {

value: '选项3',

label: '蚵仔煎'

}, {

value: '选项4',

label: '龙须面'

}, {

value: '选项5',

label: '北京烤鸭'

}],

value: ''

}

}

})

没啥好讲的，最重要的是记得要把事件继续 emit 出来 : @change="(v) => $emit('change', v)"

那 tab 部分就可以这样做 (懒得打直接 copy 官网的例子）

<el-tabs :active-name="activeName">

<el-tab-pane label="用户管理" :label-content="render" name="first">{{selected}}</el-tab-pane>

<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

</el-tabs>

new Vue({

el: '#app',

data() {

return {

activeName: 'first',

selected: "",

}

},

methods: {

onTabSelected(value) {

thisselected = value

},

render(h, tabInstance) {

// h = createElement，上面有讲过罗～

// select = 就是一开始定义的下拉式选单

return h(select, {

// 监听事件 change

on: {

change: thisonTabSelected

}

})

}

},

})

需求：点击当前页面的按钮跳转到首页，给menu中绑定的default-active赋值

问题：页面已经跳转过去，可menu选中项根本没有发生变化

解决办法： 直接将当前页面的路由绑定到default-active上，同时将index改为当前路由，这样在通过非点击导航菜单跳转页面时就不需要再来手动改变导航菜单的选中项了，它会自己选中当前页面的tab项，完美解决！

说明：router属性很重要，default-active="this$routepath"也很重要。

在public文件夹里面，新建mock文件夹，在里面建一个menujson文件模拟后台数据

以上就是关于Vue+ElementUI实现tab选卡式后台Admin全部的内容，包括:Vue+ElementUI实现tab选卡式后台Admin、js实现获取父元素下的子元素，如下的代码，我想通过getElementByClassName获取到标签table，、getelementbytagname("div")方法可以获取所有的DIV元素，但是获取到集合后，如何进一步获取class属性为特等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！