vue table切换组件

最新推荐文章于 2024-09-02 10:59:54 发布

小雷雷哥哥

最新推荐文章于 2024-09-02 10:59:54 发布

阅读量5.3k

点赞数 2

分类专栏： vue学习组件开发文章标签： vue组件开发 table切换组件

本文链接：https://blog.csdn.net/leileibrother/article/details/81030561

版权

本文分享了一种在Vue单页应用中自定义实现table切换功能的方法，通过编写tabs.vue和pane.vue两个组件，实现了标签与表格内容的联动。在tabs.vue中处理大部分事件，pane.vue负责内容渲染和控制。在实际使用时需注意样式导入和组件间的配合。

摘要由CSDN通过智能技术生成

如果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',
                    {