自己嘗試著封裝一個(gè)通用的table組件，里面有一個(gè)顯示、隱藏列的功能，如下圖：

可以通過點(diǎn)擊“顯示/隱藏列”下面的列名稱來顯示隱藏表格對(duì)應(yīng)的列，但是當(dāng)我多次（反復(fù)）點(diǎn)擊時(shí)，發(fā)現(xiàn)table里面的列顯示、隱藏的動(dòng)作非常非常慢（好像有延遲），有時(shí)候點(diǎn)擊后沒反應(yīng)，必須鼠標(biāo)移開（點(diǎn)擊的列名稱）后，table的顯示或隱藏才能完成，這是什么問題呢？

代碼如下：

注：不想復(fù)制的朋友可以直接 下載源碼 ，里面只有這個(gè)demo，npm install 后就可以查看了，謝謝！

myTable.vue組件

<template>
    <div class="tab-wrapper">
        <div class="tab-title-wrapper">
            <div class="tab-title">table測(cè)試組件</div>
            <div class="tab-actions" @mouseover="showTableAction = true" @mouseout="showTableAction = false">
                顯示/隱藏列
                <div class="tab-action-item-wrapper" v-show="showTableAction">
                    <div v-for="head in heades" :key="head.key" @click="showColumn(head)" :class="{'active': head.isShow != false}">{{ head.label }}</div>
                </div>
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th v-for="head in heades" v-show="head.isShow != false" :key="head.key">{{ head.label }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, idx) in tabDatas" :key="idx">
                    <td v-for="(head, idx2) in heades" v-show="head.isShow != false" :key="head.key + idx2">
                        {{ item[head.key] }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: 'table-component',
    props: {
        tabHeades: Array,
        tabDatas: Array
    },
    data() {
        return {
            showTableAction: false,
            heades: []
        }
    },
    methods: {
        showColumn(head) {
            head.isShow = !head.isShow
            console.log(JSON.stringify(head))
        }
    },
    mounted() {
        this.heades = this.tabHeades;
    }
}
</script>

<style scoped>

.tab-wrapper, table{
    width: 100%;
}

thead th{
    cursor: pointer;
}

.tab-title-wrapper {
    display: flex;
}

.tab-title-wrapper .tab-title{
    flex: 1;
    text-align: left;
}

.tab-title-wrapper .tab-actions{
    position: relative;
    cursor: pointer;
}

.tab-title-wrapper .tab-actions .tab-action-item-wrapper{
    position: absolute;
    text-align: left;
}

.tab-title-wrapper .tab-actions .tab-action-item-wrapper .active{
    background: #ccc
}
</style>

父組件：

<template>
    <div>
        <my-table :tabHeades='tabHeades' :tabDatas='tabDatas'></my-table>
    </div>
</template>

<script>
import MyTable from './myTable'
export default {
    name: 'table-use',
    data() {
        return {
            tabHeades: [
                {label: '編號(hào)', key: 'id'},
                {label: '訂單號(hào)', key: 'orderId', isShow: false},
                {label: '用戶名', key: 'username'}
            ],
            tabDatas: [
                {'id': 1, 'orderId': '10001', 'username': '小張'},
                {'id': 3, 'orderId': '10003', 'username': '小王'},
                {'id': 4, 'orderId': '10004', 'username': 'aaa'},
                {'id': 5, 'orderId': '10005', 'username': 'bbb'},
                
            ]
        }
    },
    components: {
        MyTable
    }
}
</script>