如何修改vue-bootstrap4-table过滤查询参数适配Django REST Framework？

我完全懂你的困扰——vue-bootstrap4-table默认会把过滤、排序这类参数打包成嵌套的JSON对象传给后端，但DRF只认扁平的、符合它过滤规则的查询参数（比如code__icontains=xxx这种）。咱们可以在前端发送请求前，把组件生成的queryParams转换成DRF能直接识别的格式，具体操作如下：

1. 添加参数转换函数 #

在你的Vue实例的methods里新增一个转换函数，专门把vue-bootstrap4-table的参数格式映射成DRF要求的格式：

convertQueryParamsToDRFFormat(queryParams) {
  const drfParams = {
    page: queryParams.page,
    per_page: queryParams.per_page // 如果后端配置的是page_size，改成page_size即可
  };

  // 处理排序：DRF用`ordering`参数，降序字段前加负号是DRF的标准写法
  if (queryParams.sort.length > 0) {
    const sortField = queryParams.sort[0].name;
    const sortDirection = queryParams.sort[0].sort === 'desc' ? '-' : '';
    drfParams.ordering = `${sortDirection}${sortField}`;
  }

  // 处理过滤器：把simple类型的filter转成DRF的模糊匹配格式（__icontains）
  if (Array.isArray(queryParams.filters) && queryParams.filters.length > 0) {
    queryParams.filters.forEach(filter => {
      if (filter.type === 'simple' && filter.text.trim()) {
        // 如果需要精确匹配，把__icontains改成__exact就行
        drfParams[`${filter.name}__icontains`] = filter.text.trim();
      }
    });
  }

  // 处理全局搜索：对应DRF的SearchFilter组件的`search`参数
  if (queryParams.global_search.trim()) {
    drfParams.search = queryParams.global_search.trim();
  }

  return drfParams;
}

2. 修改fetchData方法 #

原来的请求是直接把queryParams作为单个参数传给后端，现在改成用转换后的参数：

fetchData() {
  let self = this;
  // 先转换参数格式
  const drfCompatibleParams = this.convertQueryParamsToDRFFormat(this.queryParams);
  axios.get(self.product_list_url, { params: drfCompatibleParams })
    .then(function (response) {
      self.rows = response.data.results;
      self.total_rows = response.data.count;
    })
    .catch(function (error) {
      console.log(error);
    });
}

3. 后端配套配置（关键！） #

要让DRF能识别这些参数，你需要在后端视图里配置对应的过滤器和排序组件，举个示例：

from rest_framework import filters
from rest_framework.generics import ListAPIView
from .models import Product
from .serializers import ProductSerializer

class ProductListView(ListAPIView):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer
    # 启用搜索、排序、字段过滤器
    filter_backends = [filters.SearchFilter, filters.OrderingFilter, filters.DjangoFilterBackend]
    # 全局搜索支持的字段
    search_fields = ['code', 'name']
    # 允许排序的字段
    ordering_fields = ['code', 'name']
    # 如果需要精确过滤，可以配置filterset_fields，和前端的__exact对应
    # filterset_fields = ['code', 'name']

为什么这么做？ #

• 排序：vue-bootstrap4-table的sort数组包含字段名和排序方向，我们把它转换成DRF的ordering参数（降序加负号是DRF的标准写法）。
• 过滤：把组件的simple filter映射成DRF的模糊查询规则（__icontains），如果需要精确匹配，改成__exact即可。
• 全局搜索：直接对应DRF的SearchFilter组件的search参数，后端配置search_fields就能支持多字段全局搜索。

这样修改后，前端发送的请求就会变成DRF熟悉的格式，比如：
http://127.0.0.1:8000/api/products/?page=1&per_page=10&code__icontains=xxx&ordering=code

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