今天分享一个表头的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太多根据需要显示和隐藏相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
vue + iview Table表头中插入图片
vue + iview Table表头中插入图片开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替正常代码中这样引入图片前端可以正常显示: <img styl ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
Bootstrap Table 表头和表格内容不对齐
Bootstrap Table 表头和表格内容不对齐前言原因解决方式思路一思路二思路三前言之前的一次开发中使用到了Bootstrap Table的组件,在使用过程中出现了表头与表格内容 ...
elementUI tab 切换 table表头消失
问题:利用elementUI tab 组件切换中,其中一个table表头消失解决:开始以为是table滚轮高度设置的不对,后来发现修改table高度后,第二个tab中表头依旧消失,最后查看样式,发 ...
头部固定悬浮table表头(thead)的方法 (实用、赞）
原文出处:https://www.cnblogs.com/circleline/p/7698249.html (思路见原文) 大概思路: 对页面滚动事件进行监听,当页面向上滚动,表头滚 ...
layui设置表格表头字体_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...

table表头th太多根据需要显示和隐藏

需求