如何在 Vue 2.x 中使用自定义 HTTP 请求和分页、排序、搜索答案

【问题标题】：How to use Custom HTTP request and paginations, sort, search in Vue 2.x如何在 Vue 2.x 中使用自定义 HTTP 请求和分页、排序、搜索
【发布时间】：2021-06-23 02:22:10
【问题描述】：

我是一名工程师，在东京制作网络系统。

我正在使用 Grid.js 制作搜索系统，但遇到了问题。
我不知道解决方案，因为它不在文档中。

由于该系统使用 Vue 2.x，它使用带有自定义 HTTP 请求的 axios.post。
我能够获取列表，但在执行排序、分页和关键字搜索时遇到了问题。

我想通过 Post 请求发送参数。

请告诉我如何实现。

代码如下

    data() {
        return {
            columns: [
                {name: 'user name', id: 'user_name'},
                {name: 'email', id: 'email'},
            ],
            page: {
                enabled: true,
                limit:  100,
                server: {
                    body: (prev, page) => {
                        console.log(page) // OK, show page number 0,1,2...
                        return {
                            page: page
                        }
                    }
                },
            },
            sort: {
            },
            search: {
                server: {
                    // url: (prev, keyword) => `${prev}?q=${keyword}`
                    // what's this.
                }
            },
            server: {
                url: '/api/v2/users/list',
                method: 'POST',
                async data (opt) {
                    let response = await axios.post(opt.url)
                    return {
                        data: response.data.results.map(item => {
                            return {
                                username: item.username,
                                email: item.email,
                            }
                        }),
                        total: response.data.count,
                    }
                }
            },
        };

【问题讨论】：

标签： gridjs

【解决方案1】：

好的。设置 POST 有效负载。

    data() {
        return {
            columns: [
                {name: 'user name', id: 'user_name'},
                {name: 'email', id: 'email'},
            ],
            page: {
                enabled: true,
                limit:  100,
                server: {
                    body: (prev, page) => {
                        console.log(page) // OK, show page number 0,1,2...
                        return {
                            page: page
                        }
                    }
                },
            },
            sort: {
            },
            search: {
                server: {
                    // url: (prev, keyword) => `${prev}?q=${keyword}`
                    // what's this.
                }
            },
            server: {
                url: '/api/v2/users/list',
                method: 'POST',
                body: {},
                async data (opt) {
                    let response = await axios.post(opt.url)
                    return {
                        data: response.data.results.map(item => {
                            return {
                                username: item.username,
                                email: item.email,
                            }
                        }),
                        total: response.data.count,
                    }
                }
            },
        };

【讨论】：