当前位置：首页 > VUE

vue 实现批量关注

2026-02-11 05:33:26VUE

Vue 实现批量关注的步骤

数据准备

确保后端接口支持批量关注操作，通常需要传递用户ID数组或关注目标ID数组。前端需维护一个本地状态存储待关注的用户列表。

data() {
  return {
    users: [], // 从API获取的用户列表
    selectedUsers: [], // 存储被选中的用户ID
    isBatchProcessing: false // 批量处理状态
  }
}

模板设计

使用复选框实现多选功能，配合v-model绑定选中状态。示例模板代码：

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      <input 
        type="checkbox" 
        v-model="selectedUsers" 
        :value="user.id"
      >
      {{ user.name }}
    </div>
    <button @click="batchFollow" :disabled="isBatchProcessing || !selectedUsers.length">
      {{ isBatchProcessing ? '处理中...' : '批量关注' }}
    </button>
  </div>
</template>

批量请求处理

通过axios或其他HTTP库发送批量请求。推荐两种实现方式：

方式1：单次批量API调用

methods: {
  async batchFollow() {
    this.isBatchProcessing = true;
    try {
      await axios.post('/api/follow/batch', { userIds: this.selectedUsers });
      this.$message.success('关注成功');
      this.selectedUsers = []; // 清空选择
    } catch (error) {
      this.$message.error(error.response?.data?.message || '操作失败');
    } finally {
      this.isBatchProcessing = false;
    }
  }
}

方式2：并发单次请求（适用于无批量接口时）

vue 实现批量关注

async batchFollow() {
  this.isBatchProcessing = true;
  try {
    const promises = this.selectedUsers.map(id => 
      axios.post('/api/follow', { userId: id })
    );
    await Promise.all(promises);
    this.$message.success(`成功关注${this.selectedUsers.length}个用户`);
    this.selectedUsers = [];
  } catch {
    this.$message.error('部分操作失败');
  } finally {
    this.isBatchProcessing = false;
  }
}

性能优化建议

添加防抖处理防止重复提交
对于大量数据采用分页选择
显示处理进度条（使用<progress>或第三方UI库）
失败时提供重试单个用户的选项

完整组件示例

export default {
  data() {
    return {
      users: [
        { id: 1, name: '用户A' },
        { id: 2, name: '用户B' }
      ],
      selectedUsers: [],
      isBatchProcessing: false
    }
  },
  methods: {
    async batchFollow() {
      if (!this.selectedUsers.length) return;

      this.isBatchProcessing = true;
      try {
        // 实际替换为您的API端点
        await axios.post('/follow/batch', { 
          targets: this.selectedUsers 
        });
        this.$notify({
          title: '成功',
          message: `已关注${this.selectedUsers.length}人`,
          type: 'success'
        });
        this.selectedUsers = [];
      } catch (err) {
        console.error('批量关注失败:', err);
      } finally {
        this.isBatchProcessing = false;
      }
    }
  }
}