Vue中使用<draggable>实现表头组与对应列联动拖拽的问题

解决方案 #

核心问题是上下层表头缺乏数据关联，导致拖拽上层时无法联动下层列。通过重构数据结构并使用计算属性，可以实现上层拖拽时下层表头和数据列的同步移动。

1. 重构上层表头数据结构

将原来的upperTableHeaders数组修改为包含子列映射的对象数组，明确每个上层表头对应的下层列：

upperTableHeaders: [
  {
    name: "Participants",
    width: 15,
    children: ["Names", "Language", "Country"]
  },
  {
    name: "Game of Choice",
    width: 10,
    children: ["Game", "Bought"]
  },
  {
    name: "Performance",
    width: 15,
    children: ["Balance", "Rating", "Winnings"]
  },
  {
    name: "Budget",
    width: 60,
    children: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  }
]

2. 用计算属性生成下层表头

移除原来的tableHeaders数组，改用计算属性自动生成，确保上下层表头的一致性：

computed: {
  tableHeaders() {
    // 平铺所有上层表头的子列，生成下层表头数组
    return this.upperTableHeaders.flatMap(group => group.children);
  },
  // 保留你原有的filteredTableData等计算属性
}

3. 修改模板渲染逻辑

基于新的数据结构渲染表头，拖拽上层表头时，计算属性会自动更新下层表头顺序，数据列随之同步：

<table class="table custom-table">
  <thead class="sticky-headers">
    <tr>
      <draggable
        class="upperTable"
        v-model="upperTableHeaders"
        :options="{ handle: '.handle' }"
        :style="{ width: `${tableWidth}px` }"
        @end="updateUpperTableHeaders"
      >
        <th
          class="handle"
          v-for="group in upperTableHeaders"
          :key="group.name"
          :style="{ width: `${group.width}%` }"
        >
          {{ group.name }}
        </th>
      </draggable>
    </tr>
    <tr>
      <th
        class="handle"
        v-for="header in tableHeaders"
        :key="header"
        @click="onClickHeader(header)"
      >
        {{ header }}
        <input
          class="search-input"
          v-model="searchQuery[header]"
          type="text"
          @click.stop
        />
        <span v-if="sortOrder[header] === 'asc'">&#x25B2;</span>
        <span v-if="sortOrder[header] === 'desc'">&#x25BC;</span>
      </th>
    </tr>
  </thead>

  <tbody>
    <draggable
      class="data-table"
      v-model="tableData"
      :options="{ handle: '.handle' }"
    >
      <tr class="handle" v-for="item in filteredTableData" :key="item.id">
        <td v-for="header in tableHeaders" :key="header">
          {{ item[header.toLowerCase()] }}
        </td>
      </tr>
    </draggable>
  </tbody>
</table>

额外优化（可选）

如果需要下层表头仅能在所属上层组内拖拽，可以给每个组的子列单独套draggable组件，并设置group属性为组名：

<tr>
  <draggable
    v-for="group in upperTableHeaders"
    :key="group.name"
    v-model="group.children"
    :options="{ handle: '.handle', group: group.name }"
    :style="{ width: `${group.width}%` }"
  >
    <th
      class="handle"
      v-for="header in group.children"
      :key="header"
      @click="onClickHeader(header)"
    >
      {{ header }}
      <!-- 保留搜索框、排序图标等内容 -->
    </th>
  </draggable>
</tr>

这样修改后，拖拽上层表头时，对应的整组下层列会同步移动，完全符合需求。

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