Antd Pro 列表页 ProTable 自定义搜索字段

更新日期: 2021-05-31 阅读次数: 186 字数: 199 分类: ReactJS

例如,我想在 Antd Pro 列表页的查询区域去掉一些字段,不希望这些字段参与搜索。

参考 ProTable 组件的文档:

https://procomponents.ant.design/components/table

实际上在设置 columns 时,就可以通过 column 配置来设置一个字段是否可以被搜索。

代码示例

  const columns: ProColumns<API.Article>[] = [
    {
      title: "标题",
      dataIndex: "title",
      valueType: 'text',
    },
    {
      title: "创建时间",
      dataIndex: 'CreatedAt',
      valueType: 'dateTime',
      search: false,
    },

配置之后,搜索栏就保留了一个字段。

这样前端请求后台时,就只会带上 title 这一个参数,而不会再捎带上 CreatedAt 字段了。

http://127.0.0.1:8000/api/get-articles?current=1&pageSize=20&title=444

golang gin 后台的配置

	var db = models.DB

	if keyword, isExist := c.GetQuery("title"); isExist == true {
		db = db.Where("title LIKE ?", fmt.Sprintf("%%%s%%", keyword))
	}

	db.Order("id desc").
		Limit(limit).
		Offset((page - 1) * limit).
		Find(&items)

爱评论不评论