我之前在项目里刚好搞定过这个需求，分享一个亲测可行的方案给你：

核心思路 #

ng2-smart-table的列配置本身支持动态调整，我们只需要维护一个列可见性状态对象，配合计算属性动态过滤出需要显示的列，再做个简单的控制面板让用户切换即可。

具体实现步骤 #

1. 初始化列状态与表格配置

在组件的.ts文件里，先定义好所有可能用到的列配置，同时创建一个对象记录每列的显示状态：

import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
})
export class YourTableComponent implements OnInit {
  // 存储所有列的基础配置（包含所有要用到的列）
  private allColumns = {
    id: { title: 'ID' },
    name: { title: '姓名' },
    email: { title: '邮箱' },
    phone: { title: '电话' },
    address: { title: '地址' },
  };

  // 列可见性状态，默认全部显示
  visibleColumns: { [key: string]: boolean } = {
    id: true,
    name: true,
    email: true,
    phone: true,
    address: true,
  };

  // 表格数据源（示例数据）
  source = new LocalDataSource([
    { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '13800138000', address: '北京市朝阳区' },
    { id: 2, name: '李四', email: 'lisi@example.com', phone: '13900139000', address: '上海市浦东新区' },
  ]);

  // 动态生成表格配置：只保留可见列
  get tableSettings() {
    const filteredColumns: { [key: string]: any } = {};
    Object.keys(this.allColumns).forEach(key => {
      if (this.visibleColumns[key]) {
        filteredColumns[key] = this.allColumns[key];
      }
    });
    return {
      columns: filteredColumns,
      // 其他表格配置（按需添加）
      pager: { display: true, perPage: 10 },
      actions: { add: false, edit: false, delete: false },
    };
  }

  ngOnInit() {
    // 可选：从localStorage读取之前保存的列状态
    const savedState = localStorage.getItem('tableColumnState');
    if (savedState) {
      this.visibleColumns = JSON.parse(savedState);
    }
  }

  // 可选：监听列状态变化，保存到本地存储（刷新不丢失）
  ngDoCheck() {
    localStorage.setItem('tableColumnState', JSON.stringify(this.visibleColumns));
  }
}

2. 添加列控制面板

在组件的.html文件里，加个简单的复选框面板让用户切换列的显示状态，再渲染表格：

<!-- 列显示/隐藏控制面板 -->
<div class="column-control">
  <h5>列显示设置</h5>
  <div class="control-item" *ngFor="let key of Object.keys(allColumns)">
    <label>
      <input 
        type="checkbox" 
        [(ngModel)]="visibleColumns[key]"
      >
      {{ allColumns[key].title }}
    </label>
  </div>
</div>

<!-- ng2-smart-table 组件 -->
<ng2-smart-table 
  [settings]="tableSettings" 
  [source]="source"
  class="mt-3"
></ng2-smart-table>

3. 样式优化（可选）

给控制面板加一点简单的样式，让体验更好：

.column-control {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}
.control-item {
  margin-bottom: 0.5rem;
}
.control-item label {
  cursor: pointer;
  margin-left: 0.3rem;
}

关键说明 #

• 核心是tableSettings这个计算属性，每次visibleColumns变化时，它会自动过滤出可见列，ng2-smart-table会立刻重新渲染表格。
• 如果你的列是从后端动态获取的，只需要把allColumns替换成接口返回的数据即可，逻辑完全通用。
• 可选的本地存储功能能让用户的列选择在页面刷新后保留，提升体验。

内容的提问来源于stack exchange，提问作者aillense