Vue3多表格分页与搜索功能异常问题求助

问题根源 #

1. 所有表格共用全局状态（searchText、limit、page），导致搜索框输入同步、分页参数互相干扰
2. 使用原生DOM事件监听绑定分页按钮，在Vue循环渲染场景下无法区分不同表格的按钮，且手动DOM操作违背Vue响应式理念

解决方案步骤 #

1. 重构表格状态结构 #

为每个表格实例添加独立状态属性，实现状态隔离：

// 初始化时给每个表格扩展独立状态
this.Tables = this.Tables.map(table => ({
  ...table,
  searchText: '',
  limit: 10, // 默认每页10条
  currentPage: 1,
  totalPages: 0,
  rows: [] // 存储当前表格的渲染数据
}))

2. 修改模板，绑定独立状态 #

将模板中的v-model、事件绑定全部指向当前表格的属性，替换原生DOM操作：

<div v-for="(table, index) in Tables" :key="table.id">
  <div class="row">
    <div class="col-35">
      <!-- 绑定当前表格的搜索文本 -->
      <input :id="'tableSearch' + table.id" v-model="table.searchText" type="text" placeholder="Search..." class="searchBar" @input="fetchTableData(table)"/>
    </div>
    <div class="col-25">
      <div class="options">
        <label>Show&nbsp;&nbsp;</label>
        <!-- 绑定当前表格的每页条数，传递table实例到事件 -->
        <select style="border-radius: 10px;" :id="'tableOptions' + table.id" @change="getLimit($event, table)">
          <option :value="10" :selected="table.limit === 10">10</option>
          <option :value="15" :selected="table.limit === 15">15</option>
          <option :value="20" :selected="table.limit === 20">20</option>
          <option :value="50" :selected="table.limit === 50">50</option>
          <option :value="70" :selected="table.limit === 70">70</option>
          <option :value="100" :selected="table.limit === 100">100</option>
        </select>
        <label>&nbsp;&nbsp;entries</label>
      </div>
    </div>
    <div class="col-35">
      <div :id="'tablePage' + table.id" class="pagination">
        <!-- 上一页按钮，判断禁用状态 -->
        <button class="btn pg-btn" @click="changePage(table, table.currentPage - 1)" :disabled="table.currentPage === 1">&laquo;</button>
        <!-- 动态渲染分页按钮，根据总页数生成 -->
        <button 
          class="btn pg-btn" 
          :class="{active: table.currentPage === page}" 
          @click="changePage(table, page)" 
          v-for="page in table.totalPages" 
          :key="page"
        >
          {{page}}
        </button>
        <!-- 下一页按钮，判断禁用状态 -->
        <button class="btn pg-btn" @click="changePage(table, table.currentPage + 1)" :disabled="table.currentPage === table.totalPages">&raquo;</button>
      </div>
    </div>
  </div>
                
  <div style="overflow-x:auto;">
    <table class="table table-hover bdr" :id="'workflowTable' + table.id">
      <thead>
        <tr>
          <th v-for="{header, id} in headers" :id="id" :key="id">
            {{header}}
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- 渲染当前表格的独立数据 -->
        <tr v-for="row in table.rows" :key="row.id">
          <td v-for="header in headers" :name="header.header" :id="row.id">{{ row[header.header] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

3. 更新业务逻辑函数，处理单个表格状态 #

修改getLimit、分页切换和数据请求函数，针对单个表格实例操作：

// 更新每页条数并重置页码
getLimit(event, table) {
  table.limit = parseInt(event.target.value);
  table.currentPage = 1;
  this.fetchTableData(table);
}

// 切换页码，做边界校验
changePage(table, pageNum) {
  if (pageNum < 1 || pageNum > table.totalPages) return;
  table.currentPage = pageNum;
  this.fetchTableData(table);
}

// 封装数据请求，按表格参数调用后端API
async fetchTableData(table) {
  const skip = (table.currentPage - 1) * table.limit;
  const take = table.limit;
  const search = table.searchText;

  // 替换为你的实际后端API地址
  const response = await fetch(`/api/your-data?skip=${skip}&take=${take}&search=${encodeURIComponent(search)}`);
  const data = await response.json();

  // 更新当前表格的数据和总页数
  table.rows = data.list;
  table.totalPages = Math.ceil(data.total / table.limit);
}

4. 移除原生DOM监听 #

删除mounted生命周期中的原生按钮监听代码，完全使用Vue模板的@click事件绑定，遵循响应式逻辑。

关键说明 #

• 所有表格状态独立存储，彻底避免全局变量污染
• 用Vue响应式绑定替代原生DOM操作，减少手动操作带来的bug
• 数据请求按单个表格维度发起，确保分页、搜索功能互不干扰

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