**:**
:20181018
1. :JSON.parse(JSON.stringify(xxxobj))Object.assign[Object.assign][1]
try to encapsulate a general table component with a function of showing and hiding columns, as shown below:
can show the corresponding column of the hidden table by clicking the column name under "Show / hide column", but when I click many times (repeatedly), I find that the action of showing and hiding the column in table is very slow (as if there is a delay). Sometimes there is no response after clicking. It is necessary to move the mouse away (the name of the column that is clicked) before the show or hide of table can be completed, what is the problem?
the code is as follows:
Note: friends who do not want to copy can directly download the source code , in which only this demo, npm install can be checked, thank you!
myTable.vue components
<template>
<div class="tab-wrapper">
<div class="tab-title-wrapper">
<div class="tab-title">table</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: -sharpccc
}
</style>
parent component:
<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: "", key: "id"},
{label: "", 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>