能给SearchForm组件加个slot吗,我想自定义别的输入框,没办法改呀

[mei-rune]

          能给SearchForm组件加个slot吗,我想自定义别的输入框,没办法改呀

这个自动生成 搜索很好， 但是有时我需要自定义搜索。

Originally posted by @Xuxianhai in #192 (comment)

[HalseySpicy]

[mei-rune]

我的意思是，上面的所有搜索都是我来自定义，自定义的这些搜索框的字段甚至不是表中的一个字段，例如

我有一个页面，表格字段有

ID, Username, 字段1， 字段2， 字段3

而搜索时，要求搜索如下

按用户的部门搜索
按用户的角色搜索
按用户的xxx字段搜索
按关键字搜索，只要关键字是出现在 字段1， 字段2， 字段3 中就算命中
按命名好的查询条件搜索，这些命名查询是我预定义好的，它可是能几个字段的综合查询。

[HalseySpicy]

你可以提 pr

[hefeng6500]

我的意思是，上面的所有搜索都是我来自定义，自定义的这些搜索框的字段甚至不是表中的一个字段，例如

我有一个页面，表格字段有

ID, Username, 字段1， 字段2， 字段3

而搜索时，要求搜索如下

按用户的部门搜索 按用户的角色搜索 按用户的xxx字段搜索 按关键字搜索，只要关键字是出现在 字段1， 字段2， 字段3 中就算命中 按命名好的查询条件搜索，这些命名查询是我预定义好的，它可是能几个字段的综合查询。

@mei-rune 你提到的前 4 点应该可以通过配置 isShow: false 属性实现(在列表不显示该字段，仅在头部搜索框显示)，如下：

const columns: ColumnProps[] = [
	{
		isShow: false,
		prop: "department",
		search: {
			// ... sth
		}
	}
];

如果上述依然不能满足你的要求，可是试试拦截请求参数：

<ProTable
    ref="proTable"
    :columns="columns"
    :requestApi="getTableList"
/>

const getTableList = (params: Record<string, any>) => {
    const newParams = {
        ...params,
       ...{
           // set sth...
        }
    }

    await queryApi(newParams)
}

[mei-rune]

@hefeng6500 我们用框架是为了简化开发， 而不是将它弄的很复杂。

只如下修改就很方便了， 也不影响原来的易用性, 扩展也很方便。

diff --git a/src/components/ProTable/index.vue b/src/components/ProTable/index.vue
index f87174e..5d8393e 100644
--- a/src/components/ProTable/index.vue
+++ b/src/components/ProTable/index.vue
@@ -2,14 +2,26 @@
 
 <template>
   <!-- 查询表单 -->
-  <SearchForm
-    v-show="isShowSearch"
-    :search="_search"
-    :reset="_reset"
-    :columns="searchColumns"
-    :search-param="searchParam"
-    :search-col="searchCol"
-  />
+
+  <div v-if="isShowSearch" class="card table-search">
+    <slot
+      name="search"
+      :search="_search"
+      :reset="_reset"
+      :columns="searchColumns"
+      :search-param="searchParam"
+      :search-col="searchCol"
+    >
+      <SearchForm
+        v-if="columns.length"
+        :search="_search"
+        :reset="_reset"
+        :columns="searchColumns"
+        :search-param="searchParam"
+        :search-col="searchCol"
+      />
+    </slot>
+  </div>