如何实现根据用户选择在同一页面展示不同列数的表格

完全可以实现，实现成本很低，核心就是通过状态记录用户当前选中的表类型，按需条件渲染对应表格即可。

• 定义状态位存储当前选中的表格类型，比如约定data代表数据表、user代表用户表，默认可以给个初始值比如data
• 给切换控件（单选框、tab、下拉选择器都可以）绑定变更事件，用户操作时同步更新状态位的值
• 渲染层加判断：状态位匹配哪个表格类型，就只渲染对应列结构的表格。注意不要提前把两个表格都渲染到页面上再通过CSS的display: none控制显隐，直接根据选中状态销毁、渲染对应表格的性能更好，也不会出现两个表格的筛选、分页等内部状态互相干扰的问题

不需要引入任何第三方库，复制到本地HTML文件打开就能看到效果：

<!-- 选择切换区域 -->
<div style="margin-bottom: 16px;">
  <label style="margin-right: 20px;">
    <input type="radio" name="tableType" value="data" checked> 数据表
  </label>
  <label>
    <input type="radio" name="tableType" value="user"> 用户表
  </label>
</div>

<!-- 表格渲染容器 -->
<div id="tableWrap"></div>

<script>
// 预先定义两种表格的列、模拟数据配置
const tableMap = {
  data: {
    columns: ['country', 'price', 'date'],
    data: [
      { country: 'China', price: 199, date: '2024-05-01' },
      { country: 'United States', price: 299, date: '2024-05-02' },
      { country: 'Japan', price: 249, date: '2024-05-03' }
    ]
  },
  user: {
    columns: ['name', 'email'],
    data: [
      { name: 'Zhang San', email: 'zhangsan@demo.com' },
      { name: 'Li Si', email: 'lisi@demo.com' },
      { name: 'Wang Wu', email: 'wangwu@demo.com' }
    ]
  }
}

const wrap = document.getElementById('tableWrap')
const radioList = document.querySelectorAll('input[name="tableType"]')

// 通用表格渲染方法
function renderActiveTable(type) {
  const currentTable = tableMap[type]
  if (!currentTable) {
    wrap.innerHTML = ''
    return
  }
  // 拼接表格结构
  let html = `<table style="border-collapse: collapse; width: 100%;" border="1" cellpadding="8">
    <thead>
      <tr>${currentTable.columns.map(col => `<th>${col}</th>`).join('')}</tr>
    </thead>
    <tbody>
      ${currentTable.data.map(row => `
        <tr>${currentTable.columns.map(col => `<td>${row[col]}</td>`).join('')}</tr>
      `).join('')}
    </tbody>
  </table>`
  wrap.innerHTML = html
}

// 初始化渲染默认选中的数据表
renderActiveTable('data')

// 绑定切换事件
radioList.forEach(radio => {
  radio.addEventListener('change', e => renderActiveTable(e.target.value))
})
</script>

如果是用Vue、React等现代前端框架开发，逻辑完全一致，只是语法更简洁：

• Vue中直接用v-if="activeTable === 'data'"和v-if="activeTable === 'user'"控制两个表格组件的渲染即可
• React中直接在JSX里用{activeTable === 'data' ? <DataTable /> : <UserTable />}做条件渲染
• 不需要手动操作DOM，框架会自动处理DOM的创建和销毁。

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