该博客介绍了如何在Vue.js中实现表格的列显示和隐藏功能。通过点击表格右上方的设置按钮，弹出菜单栏，用户可以选择显示或隐藏特定列，如日期、姓名、省份等。使用v-if指令动态控制表格列的显示状态，并且提供了保存列配置的功能，实现用户自定义列展示的持久化。同时，当列配置改变时，通过$nextTick更新表格布局以避免固定列错位问题。
摘要由CSDN通过智能技术生成
<div id="app">
<el-table :data="tableData" border style="width: 100%" ref="table">
<el-table-column
fixed
prop="date"
label="日期"
width="150"
v-if="showColumn.date"
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
v-if="showColumn.name"
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120"
v-if="showColumn.provinces"
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120"
v-if="showColumn.city"
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300"
v-if="showColumn.adreess"
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120"
v-if="showColumn.zipCode"
</el-table-column>
<el-table-column fixed="right" width="100" align="center">
<template slot="header">
class="el-icon-setting"
style="font-size: 22px; cursor: pointer"
@click="showColumnOption"
</template>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"
>查看</el-button
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 配置列面板 -->
<transition name="fade">
<div class="columnOption" v-show="isShowColumn">
<div class="content">
<div class="head">选择显示字段</div>
<div class="body">
<el-checkbox v-model="checkList.date" disabled>日期</el-checkbox>
<el-checkbox v-model="checkList.name">姓名</el-checkbox>
<el-checkbox v-model="checkList.provinces">省份</el-checkbox>
<el-checkbox v-model="checkList.city">市区</el-checkbox>
<el-checkbox v-model="checkList.adreess">地址</el-checkbox>
<el-checkbox v-model="checkList.zipCode">邮编</el-checkbox>
<div class="footer">
<el-button size="small" type="primary" plain @click="saveColumn"
>保存列配置</el-button
</transition>
</template>
通过
v-if="showColumn.date"
来判断表格对应列的状态
2.javascript部分
<script>
export default {
data() {
return {
isShowColumn: false,
tableData: [
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1517 弄",
zip: 200333,
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1519 弄",
zip: 200333,
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1516 弄",
zip: 200333,
// 列的配置化对象，存储配置信息
checkList: {},
showColumn: {
date: true,
name: true,
provinces: true,
city: true,
adreess: true,
zipCode: true,
watch: {
// 监听复选框配置列所有的变化
checkList: {
handler: function (newnew, oldold) {
// console.log(newnew);
this.showColumn = newnew;
// 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
this.$nextTick(() => {
this.$refs.table.doLayout();
deep: true,
immediate: true
mounted() {
// 发请求得到checkListInitData的列的名字
if(localStorage.getItem("columnSet")){
this.checkList = JSON.parse(localStorage.getItem("columnSet"))
}else{
this.checkList = {
date: true,
name: true,
provinces: true,
city: true,
adreess: true,
zipCode: true,
methods: {
handleClick(row) {
console.log(row);
showColumnOption() {
this.isShowColumn = true;
saveColumn() {
localStorage.setItem("columnSet",JSON.stringify(this.checkList))
this.isShowColumn = false;
</script>
3.css样式部分
.columnOption {
position: fixed;
z-index: 20;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: row-reverse;
.content {
width: 100px;
height: 100%;
background-color: rgb(203, 223, 198);
.head {
width: 100%;
height: 44px;
border-bottom: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
.body {
width: 100%;
height: calc(100% - 88px);
box-sizing: border-box;
padding-top: 10px;
overflow-y: auto;
.items {
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
.el-checkbox {
width: 100%;
height: 28px;
line-height: 28px;
margin-bottom: 14px;
display: inline-block;
font-family: PingFang SC;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding-left: 14px;
.el-checkbox:hover {
background-color: #f5f7fa;
.footer {
width: 100%;
height: 44px;
border-top: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
.fade-enter,
.fade-leave-to {
opacity: 0;
点击
隐藏
，结果如下图：
完整代码如下:(
表格
数据：https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata）
< template>
< div class=“show-examples”>
< el-switch v-model=“val...
我们在
table
中添加数据时，有时需要
隐藏
一些页面不需要看到但必须存在的
列
。这时我们就需要把这
列
进行
隐藏
操作(比如记录id)。
在对应
列
声明中，加入 v-if=“show”（红线标注的地方）
在date()的return中声明 show: false,(红线标注部分)此时页面加载的时候会
隐藏
对应
列
。
如上图所示，点击
table
右上方的
表格
按钮，弹出菜单栏，进行勾选，从而达到
表格
对应
列
显示
和
隐藏
1.HTML部分(ant design)
<div class="right-btns">
<!-- 按钮 -->
<a-button class="
table
" @click="handle
Table
"><a-icon type="
table
" /></a-button>
<!-- 弹出框 -->
<div c
如图，为要实现的需求，即右键
table
的表头弹出菜单栏，通过勾选多选框的内容来控制
表格
列
的
显示
和
隐藏
。
1. HTML部分（elemen-ui）：
<el-
table
:data="list" border fit @header-contextmenu="contextmenu">
<el-
table
-column v-if="colData[0].istrue" l...
最近遇到一个需求，
表格
列
表默认不展示某一
列
，当我设置后可以展示该
列
，也可以展示和
隐藏
别的
列
，起到可以对整个
表格
列
展示
隐藏
控制的效果，如下示例，默认不展示“单位名称”这一
列
，在我点击设置齿轮后可以看到，有“单位名称”这一
列
，但未打钩：
当我勾中“单位名称”，去掉“地址”的勾中后，
列
表可以看到“单位名称”这一
列
，看不到“地址”这一
列
。达到了我们控制
表格
列
展示
隐藏
的效果。这里用到的UI组件库是iview和
elementUI
。实现思路是：
列
表展示
列
我们用到了
table
Head,然后我们定义了一个数组showLis
可以通过在
表格
的
列
定义中使用 `v-if` 或 `v-show` 指令来控制
表格
数据的
显示
和
隐藏
。
举个例子，假设我们有一个
表格
，其中有一个
列
叫做“状态”，我们想要根据不同的状态值来决定是否
显示
该
列
。我们可以这样定义该
列
：
<el-
table
-column prop="status" label="状态" v-if="showStatusColumn"></el-
table
-column>
其中 `showStatusColumn` 是一个布尔值，控制该
列
是否
显示
。当 `showStatusColumn` 为 `true` 时，该
列
会被
显示
出来，否则不
显示
。
如果我们想要根据某个条件来控制整个
表格
的
显示
和
隐藏
，我们可以将整个
表格
放在一个 `el-tab-pane` 组件中，并使用 `v-if` 或 `v-show` 指令来控制该组件的
显示
和
隐藏
，例如：
<el-tab-pane label="数据
列
表" v-if="show
Table
">
<el-
table
:data="
table
Data">
</el-
table
>
</el-tab-pane>
当 `show
Table
` 为 `true` 时，该
表格
组件会被
显示
出来，否则不
显示
。
