vue-bootstrap4-table-如何修改过滤查询参数？

Question

我将https://www.npmjs.com/package/vue-bootstrap4-table#8-filtering与django-rest-framework一起使用。

问题在于该组件使用完全不同的查询参数进行排序，过滤等。

vue-bootstrap4-table

http://127.0.0.1:8000/api/products/?queryParams=%7B%22sort%22:[],%22filters%22:[%7B%22type%22:%22simple%22,%22name%22:%22code%22,%22text%22:%22xxx%22%7D],%22global_search%22:%22%22,%22per_page%22:10,%22page%22:1%7D&page=1

"filters":[{"type":"simple","name":"code","text":"xxx"}],

但是 Django-rest-framework 需要以下格式：

../?code__icontains=...

您知道如何制作vue-bootrstrap4-table来生成这种格式吗？

我的应用程序：

new Vue({
            el: '#app',
            data: {
                product_list_url: "{% url "api:product-list" %}",
                rows: [],
                total_rows:0,
                queryParams: {
                    sort: [],
                    filters: "",
                    global_search: "",
                    per_page: 10,
                    page: 1,
                },
                columns: [{
                    label: "Kód",
                    name: "code",
                    filter: {
                        type: "simple",
                        placeholder: "code"
                    },
                    sort: true,
                },
                    {
                        label: "Názov",
                        name: "name",
                        filter: {
                            type: "simple",
                            placeholder: "Enter name"
                        },
                        sort: true,
                    },
                ],
                config: {
                    checkbox_rows: true,
                    rows_selectable: true,
                    {#card_title: "Vue Bootsrap 4 advanced table",#}
                    server_mode: true,
                }
            },
            mounted() {
                this.fetchData();
            },
            methods: {
                onChangeQuery(queryParams) {
                    this.queryParams = queryParams;
                    this.fetchData();
                },
                fetchData() {
                    let self = this;
                    axios.get(self.product_list_url, {
                        params: {
                            "queryParams": this.queryParams,
                            "page": this.queryParams.page
                        }
                    })
                        .then(function (response) {
                            self.rows = response.data.results;
                            self.total_rows = response.data.count;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

            },
        })