Vue.js表格字段显隐切换功能异常，求完善实现方案

我来帮你搞定这个表格字段显隐的功能！你的核心问题在于用了一个全局的isHidden变量来控制所有字段，这当然没法单独切换每个字段的显示状态啦。咱们一步步修正：

问题分析 #

1. 全局状态无法单独控制字段：你用了单个isHidden: false变量，所有checkbox都绑定它，导致切换时所有字段一起变，没法单独控制。
2. visibleHeaders计算属性重置状态：每次调用这个属性时，都把h.isHidden = true，会覆盖用户之前的选择，而且返回的是格式化后的字符串，丢失了原字段的标识和状态。
3. 表头和数据列的判断逻辑错误：表头的v-if="!isHidden"用的是全局变量，数据列也没有根据字段显隐状态过滤内容。

修正后的完整代码 #

模板部分（Template）

<button class="btn btn-info dropdown dropdown-toggle" type="button" id="setVisibility" data-mdb-toggle="dropdown" aria-expanded="false">
  TABLE FIELD MANAGEMENT
</button>
<ul class="dropdown-menu prevent-close py-1 px-2" aria-labelledby="setVisibility">
  <li>
    <div class="layout-header pt-2 text-center">
      <h6>Hide/Show</h6>
    </div>
    <!-- 每个字段绑定自己的isHidden状态 -->
    <div v-for="(header, index) in visibleHeaders" :key="header.Field" class="form-check form-switch">
      <input v-model="header.isHidden" class="form-check-input" type="checkbox" :id="`toggle-${header.Field}`">
      <label class="form-check-label" :for="`toggle-${header.Field}`">
        {{ header.Field.replace("_", " ").toUpperCase() }}
      </label>
    </div>
  </li>
</ul>

<thead class="">
  <tr>
    <th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
    <!-- 根据每个header的isHidden判断是否显示 -->
    <th v-for="(header, index) in visibleHeaders" :key="header.Field" scope="col" v-if="!header.isHidden">
      {{ header.Field.replace("_", " ").toUpperCase() }}
    </th>
    <th>ACTION</th>
  </tr>
</thead>

<tbody>
  <tr v-for="row in leads" :key="row.id" v-show="leads.length">
    <td>
      <input type="checkbox" class="form-check-input" v-model="selected" :value="row.id" />
    </td>
    <!-- 只渲染未隐藏的字段 -->
    <td v-for="(header, index) in visibleHeaders" :key="header.Field" v-if="!header.isHidden">
      {{ row[header.Field] }}
    </td>
    <td>
      <!-- 这里放你的ACTION按钮，比如编辑/删除 -->
      <button class="btn btn-sm btn-primary">Edit</button>
    </td>
  </tr>
  <tr v-show="!leads.length">
    <td colspan="12" class="text-center">Sorry :( No data found.</td>
  </tr>
</tbody>

脚本部分（Script）

export default {
  data() {
    return {
      headers: [],
      leads: [],
      selectAll: false,
      selected: [],
      // 移除全局的isHidden，改为给每个header单独维护状态
    };
  },
  computed: {
    visibleHeaders() {
      // 初始化每个header的isHidden状态（只在第一次时设置，避免覆盖用户选择）
      return this.headers.map(h => {
        if (h.isHidden === undefined) {
          // 默认显示所有字段，所以初始isHidden为false
          h.isHidden = false;
        }
        return h;
      });
    },
  },
  // 假设你有获取数据的方法，比如mounted里调用
  mounted() {
    // 模拟从后端获取headers和leads数据
    this.headers = [
      { Default: null, Extra: "auto_increment", Field: "id", Key: "PRI", Null: "NO", Type: "bigint unsigned" },
      { Field: "first_name" },
      { Field: "last_name" },
      { Field: "primary_email" },
      { Field: "primary_phone" },
      { Field: "lead_status" },
      { Field: "created_at" },
      { Field: "updated_at" },
      { Field: "notes" },
    ];
    this.leads = [
      {
        created_at: null,
        first_name: "john",
        id: 6,
        last_name: "doe",
        lead_status: "new",
        notes: null,
        primary_email: "johndoe@gmail.com",
        primary_phone: "0696969699",
        updated_at: null,
      },
    ];
  },
};

关键修改点说明 #

1. 给每个字段单独维护显隐状态：不再用全局isHidden，而是给headers数组里的每个对象添加isHidden属性，默认设为false（即默认显示所有字段）。
2. 修复checkbox绑定：每个checkbox绑定对应header的isHidden属性，并且给每个checkbox设置唯一的id和for属性，避免标签关联错误。
3. 表头和数据列的显隐判断：表头和数据列都根据当前header的isHidden状态来决定是否渲染，确保表头和内容列同步显示/隐藏。
4. 修正数据列渲染逻辑：原来的v-for="(atr, index) in column"会遍历对象的所有属性，现在改为根据visibleHeaders里的字段来渲染，确保只显示未隐藏的字段内容。

这样修改后，你就能单独切换每个表格字段的显隐状态，而且表头和数据列会同步变化啦！

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