今天分享一個表頭的th很多，用戶可根據(jù)需要顯示和隱藏相應(yīng)th

需求

效果如動圖：

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

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

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

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

關(guān)鍵點3：在用戶勾選完后，利用el-popover組件的hide（隱藏時觸發(fā)）事件，調(diào)用后臺接口傳當前用戶所選的數(shù)據(jù)進行保存。

HTML結(jié)構(gòu)

<el-table-column label="任務(wù)名稱" 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="任務(wù)名稱" v-if="isShowTableCell.indexOf(1)>-1"> </el-table-column>

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

<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數(shù)組為多選是否勾選以及列表是否顯示數(shù)組，ifShowTableCell為多選的全部數(shù)據(jù)數(shù)組。

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

功能代碼

// 獲取篩選器數(shù)據(jù)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); // 這里就是關(guān)鍵點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方法就是關(guān)鍵點3所說的通過@hide=“saveShowTool”，來保存用戶最后編輯的數(shù)據(jù)。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。