如果vue单页开发没有使用ui组件,table切换的功能还是比较烦人的。闲暇时间看书写了一个table切换的组件,和大家分享一下,效果图如下:
主要有两个组件页面,第一个是 tabs.vue,这个页面上会循环出table标签和每个标签对应的内容,大部分的事件处理也在这个页面上。代码如下:
<template>
<div class="tabs">
<div class="tabs-bar">
<div v-for="(item, index) in navList" @click="handleChange(index)" :class="tabCls(item)">
{
{item.label}}
</div>
</div>
<div class="tabs-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "tabs",
props: {
value: {
type: [String, Number]
}
},
data(){
return{
currentValue: this.value,
navList: []
}
},
methods: {
tabCls: function (item) {
return [
'tabs-tab',
{