今天分享一個表頭的th很多，用戶可根據需要顯示和隱藏相應th

需求

效果如動圖：

需求描述：因為表格頭部的菜單可能會很多，后期可能有更多的添加，所以產品加了一個可以根據用戶的需要顯示和隱藏的功能，最多顯示10個，當然也可以換成其他數字，這個都是做了適配的。

關鍵點1：進入頁面就獲取多選框的數據，這個需要和后臺進行溝通，后臺需要保存所有的菜單選項，并進行排序。是否勾選的顯示則需要根據后臺返回之前定義好的數據進行判斷是否勾選。

關鍵點2：拿到數據后進行渲染和交互處理，主要就是用戶勾選超出10個后，我這里用的是splice(0,1)，清除掉已選10個的第一個數據。還有就是列表的顯示和隱藏，我這里用的是v-if去做的判斷。

ps：這里用v-if而不用v-show，是因為在element ui中table的v-show失效，v-show起作用的本質是display:none,而td的display: table-cell;權限高于display:none,所以v-show失效。

關鍵點3：在用戶勾選完后，利用el-popover組件的hide（隱藏時觸發）事件，調用后臺接口傳當前用戶所選的數據進行保存。

HTML結構

<el-table-column label="任務名稱" show-overflow-tooltip v-if="isShowTableCell.indexOf(1)>-1"><template slot-scope="{row}"><span v-if="row.status != 1" class="colorB" finger @click="showDetail(row,props.row)">{{row.name}}</span><span v-else>{{row.name}}</span></template> </el-table-column><el-table-column label="任務名稱" v-if="isShowTableCell.indexOf(1)>-1"> </el-table-column>

ps：因為我是嵌套的element， 所以要寫兩個判斷v-if=“isShowTableCell.indexOf(1)>-1”，這個1就是和后端定義好的值，每一個列表名稱都會對應一個值。（只舉了任務名稱一個，其他的名稱類似）

<template slot="header"><div style=" width: 100%;">操作<el-popover placement="left-start" trigger="click" @hide="saveShowTool" width="280"><div class="showCell tableInside"><el-checkbox-group @change="limitLengthHander(isShowTableCell, 10)" v-model="isShowTableCell"><span class="span" v-for="(item, index) in ifShowTableCell" :key="index"><el-checkbox :label="item.value">{{item.text}}</el-checkbox></span></el-checkbox-group><div>最多勾選10個，已選<span class="colorB">{{ isShowTableCell.length }}</span>個</div></div><i finger slot="reference" style="float: right;margin-right: 20px;" class="iconfont icon-Category"></i></el-popover></div> </template>

isShowTableCell數組為多選是否勾選以及列表是否顯示數組，ifShowTableCell為多選的全部數據數組。

篩選器返回數據格式：isShowTableCell就是arr，ifShowTableCell就是selectorSetList，arr剛開始會默認返回定義好的10個數值，而selectorSetList會返回所有的列表名稱數據。

功能代碼

// 獲取篩選器數據getshowTool() {this.axios({method: 'post',url: "/callCenter/commSelector/find",data: {pageUrl: 'taskManage'}}).then(res => {let data = res.data;if (data.code == '1') {this.isShowTableCell = data.data.arr;this.ifShowTableCell = data.data.selectorSetList;}})},// 篩選器limitLengthHander(arr, num) {if (arr.length > num) {arr.splice(0, 1); // 這里就是關鍵點2所說的超出10個后的處理方法}},// 保存用戶選擇器的選擇saveShowTool() {let arr = this.ifShowTableCell.filter(item => {return this.isShowTableCell.indexOf(item.value) > -1});this.axios({method: 'post',url: "/callCenter/commSelector/save/taskManage",data: arr}).then(res => {let data = res.data;if (data.code == '1') {} else {this.MixerrorMes(data.message)}})},

saveShowTool方法就是關鍵點3所說的通過@hide=“saveShowTool”，來保存用戶最后編輯的數據。

結束語：前段時間工作比較忙，所以沒有分享，后面會陸續補上的，我分享的都是一些自認為在工作中能夠遇到的且比較有趣的小功能，代碼如果有錯誤的或更精簡的還希望各位大神指教一下，感謝各位大佬。

總結

以上是生活随笔為你收集整理的table表头th太多根据需要显示和隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。