Vue中的table表單切換實現(xiàn)效果

更新時間：2022年08月10日 09:45:22 作者：今天我又來了

這篇文章主要介紹了Vue中的table表單切換實現(xiàn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue表單切換實現(xiàn)效果

點擊第一個鏈接出現(xiàn)以下數(shù)據(jù)

點擊第一個鏈接的出現(xiàn)的表格

點擊第二個鏈接 ,我沒有寫后臺所以沒有數(shù)據(jù), 可以自己寫方法去獲取數(shù)據(jù)復制給v-model 綁定的數(shù)組

首先給兩個鏈接定義一個num

點擊第一個按鈕時設(shè)置num等于1 , 這樣在table列表處定義 v-show ="num==1 ",當?shù)扔? 時顯示第一個table 當?shù)扔趎um 等于 2時等于第二個table 這樣就能實現(xiàn) table 的轉(zhuǎn)換

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 默認值設(shè)定為1 這樣默認就打開第一個table 設(shè)置為0 就是都不打開

Vue table切換組件

如果vue單頁開發(fā)沒有使用ui組件，table切換的功能還是比較煩人的。閑暇時間看書寫了一個table切換的組件，和大家分享一下，效果圖如下：

主要有兩個組件頁面，第一個是 tabs.vue，這個頁面上會循環(huán)出table標簽和每個標簽對應的內(nèi)容，大部分的事件處理也在這個頁面上。代碼如下：

<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 ，這個頁面主要是渲染和控制標簽所對應的內(nèi)容。代碼如下：

<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">
? ? ? ? ? ? ? ? 標簽一的內(nèi)容
? ? ? ? ? ? </pane>
? ? ? ? ? ? <pane label="標簽二" name="2">
? ? ? ? ? ? ? ? 標簽二的內(nèi)容
? ? ? ? ? ? </pane>
? ? ? ? ? ? <pane label="標簽三" name="3">
? ? ? ? ? ? ? ? 標簽三的內(nèi)容
? ? ? ? ? ? </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”，這是頁面初始時顯示的內(nèi)容，通常都是“1”，<pane>標簽有個兩個屬性，一個是label，一個是name，主要是控制table標簽主題的。每個table標簽對應的內(nèi)容直接寫在<pane></pane>標簽里面就好了。組件雖然復雜了點，但是復用起來還是可以的。

頁面的樣式我是寫在全局里面的（最后一個引入組件的頁面），沒有寫在組件頁面里面，使用的時候請多多注意

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: