Vue中的table表单切换实现效果

Tani ·

更新时间:2024-09-20

· 136 次阅读

Vue表单切换实现效果

首先给两个链接定义一个num

Vue table切换组件

Vue表单切换实现效果

点击第一个链接出现以下数据

点击第二个链接 ,我没有写后台所以没有数据, 可以自己写方法去获取数据复制给v-model 绑定的数组

首先给两个链接定义一个num

点击第一个按钮时设置num等于1 , 这样在table列表处定义 v-show ="num==1 ",当等于1 时显示第一个table 当等于num 等于 2时等于第二个table 这样就能实现 table 的转换

table代码在这里插入代码片

<el-table v-show="num==1" :data="applicationList" border v-loading="dataListLoading" style="width: 100%"
                @selection-change="selectionChangeHandle">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          :index="indexMethod"
          :resizable="false"
          type="index" label="序号" align="center" width="60px"></el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <div slot-scope="scope" class="g-operation-column">
            <el-link type="primary" size="mini" @click="show(scope.row)">编辑</el-link>
            &nbsp
            <el-link type="danger" size="mini" @click="del(scope.row)">删除</el-link>
          </div>
        </el-table-column>
      </el-table>

Data处定义 num

num 默认值设定为1 这样默认就打开第一个table 设置为0 就是都不打开

Vue table切换组件

如果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',
                    {
                        'tabs-tab-active': item.name === this.currentValue
                    }
                ]
            },
            getTabs: function () {
                return this.$children.filter(function (item) {
                    return item.$options.name === 'pane';
                })
            },
            updateNav: function () {
                this.navList = [];
                let _this = this;
                this.getTabs().forEach(function (pane, index) {
                    _this.navList.push({
                        label: pane.label,
                        name: pane.name || index
                    });
                    if(!pane.name){
                        pane.name = index;
                    }
                    if(index === 0){
                        if(!_this.currentValue){
                            _this.currentValue = pane.name || index;
                        }
                    }
                });
                this.updateStatus();
            },
            updateStatus: function () {
                let tabs = this.getTabs();
                let _this = this;
                tabs.forEach(function (tab) {
                    return tab.show = tab.name === _this.currentValue;
                })
            },
            handleChange: function (index) {
                let nav = this.navList[index];
                let name = nav.name;
                this.currentValue = name;
                this.$emit('input', name);
                this.$emit('on-click', name);
            }
        },
        watch: {
            value: function (val) {
                this.currentValue = val;
            },
            currentValue: function () {
                this.updateStatus();
            }
        }
    }
</script>
<style scoped>
</style>

第二个组件页面是 pane.vue ，这个页面主要是渲染和控制标签所对应的内容。代码如下：

<template>
    <div class="pane" v-show="show">
        <slot></slot>
    </div>
</template>


<script>
    export default {
        name: "pane",
        props:{
            name:{
                type: String
            },
            label:{
                type: String,
                default: ''
            }
        },
        data(){
            return {
                show: true
            }
        },
        mounted(){
            this.updateNav();
        },
        methods: {
            updateNav: function () {
                this.$parent.updateNav();
            }
        },
        watch: {
            label: function () {
                this.updateNav();
            }
        }
    }
</script>
<style scoped>
</style>

使用这两个页面就很简单了，在页面上引入这两个组件，如下：

<template>
    <div>
        <tabs v-model="activeKey">
            <pane label="标签一" name="1">
                标签一的内容
            </pane>
            <pane label="标签二" name="2">
                标签二的内容
            </pane>
            <pane label="标签三" name="3">
                标签三的内容
            </pane>
        </tabs>
    </div>
</template>

<script>
    import Tabs from "../components/table/tabs";
    import Pane from "../components/table/pane";
    export default {
        name: "tableIndex",
        components: {Tabs,Pane},
        data(){
            return {
                activeKey: '1'
            }
        }
    }
</script>

<style>
    .tabs{
        font-size: 14px;
        color: #657180;
    }
    .tabs-bar:after{
        content:'';
        display: block;
        width: 100%;
        height:1px;
        background: #d7dde4;
        margin-top:-1px;
    }
    .tabs-tab{
        display: inline-block;
        padding: 4px 16px;
        margin-right: 6px;
        background: #fff;
        border: 1px solid #d7dde4;
        cursor: pointer;
        position: relative;
    }
    .tabs-tab-active{
        color: #3399ff;
        border-top: 1px solid #3399ff;
        border-bottom: 1px solid #fff;
    }
    .tabs-tab-active:before{
        content: '';
        display: block;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    .tabs-content{
        padding: 8px 0;
    }
</style>

页面上<tabs>标签定义了一个初始值“activeKey”，这是页面初始时显示的内容，通常都是“1”，<pane>标签有个两个属性，一个是label，一个是name，主要是控制table标签主题的。每个table标签对应的内容直接写在<pane></pane>标签里面就好了。组件虽然复杂了点，但是复用起来还是可以的。

页面的样式我是写在全局里面的（最后一个引入组件的页面），没有写在组件页面里面，使用的时候请多多注意

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE table

1024 个赞