增加表格下拉自定义搜索

src/components/FsTableSelect/index.vue

@@ -140,6 +140,11 @@ export default defineComponent({
       request()
     }
 
+    /* 重新加载表格 */
+    const reload = (where: any) => {
+      request(where)
+    }
+
     /* 表格请求完成 */
     const tableDone = () => {
       nextTick(() => {
@@ -159,13 +164,18 @@ export default defineComponent({
     }
 
     /* 请求数据 */
-    const request = () => {
+    const request = (where?: any) => {
+      console.log(where)
       if (typeof props.tableConfig?.datasource === 'function') {
         loading.value = true
+        if (where && where.pageIndex) {
+          pageIndex.value = where.pageIndex
+        }
         props.tableConfig
           .datasource({
             pageIndex: pageIndex.value,
-            pageSize: props.tableConfig.pageSize
+            pageSize: props.tableConfig.pageSize,
+            ...where
           })
           .then((res: any) => {
             tableData.value = res
@@ -188,6 +198,18 @@ export default defineComponent({
       emit('update:modelValue', value)
     }
 
+    /* 更新气泡位置 */
+    watch(currentValues, () => {
+      if (
+        popoverRef.value &&
+        popoverRef.value.popperRef &&
+        popoverRef.value.popperRef.popperInstanceRef &&
+        popoverRef.value.popperRef.popperInstanceRef.update
+      ) {
+        popoverRef.value.popperRef.popperInstanceRef.update()
+      }
+    })
+
     watch(
       () => props.initValue,
       () => {
@@ -201,6 +223,7 @@ export default defineComponent({
       selectLabel,
       visible,
       isEmpty,
+      pageIndex,
       loading,
       currentValues,
       omittedValues,
@@ -212,7 +235,8 @@ export default defineComponent({
       onItemClear,
       tableRadioChange,
       tableCheckboxChange,
-      paginationChange
+      paginationChange,
+      reload
     }
   }
 })
@@ -280,6 +304,8 @@ export default defineComponent({
         </div>
       </div>
     </template>
+    <!-- 上方插槽 -->
+    <slot name="top-extra"></slot>
     <vxe-table
       :data="tableData"
       :row-config="{ isCurrent: true, isHover: true }"
@@ -307,9 +333,12 @@ export default defineComponent({
         :pager-count="5"
         :page-size="tableConfig.pageSize"
         :total="tableConfig.total"
+        v-model:current-page="pageIndex"
         @current-change="paginationChange"
       />
     </div>
+    <!-- 下方插槽 -->
+    <slot name="bottom-extra"></slot>
   </el-popover>
 </template>
 

src/views/tableSelect/index.vue

@@ -55,6 +55,16 @@ const tableSelectClear = () => {
 const tableSelectItemClear = ({ list }: any) => {
   current.value = list
 }
+
+const tableSelectRef = ref()
+const form = ref({
+  name: '',
+  sex: ''
+})
+
+const search = () => {
+  tableSelectRef.value.reload({ pageIndex: 1, ...form.value })
+}
 </script>
 
 <template>
@@ -76,6 +86,42 @@ const tableSelectItemClear = ({ list }: any) => {
       </fs-table-select>
     </div>
   </div>
+  <div class="w-full bg-white p-4 mt-3">
+    <div class="w-230px">
+      <fs-table-select
+        v-model="data"
+        multiple
+        :tableConfig="tableConfig"
+        @change="tableSelectChange"
+        @clear="tableSelectClear"
+        @item-clear="tableSelectItemClear"
+        ref="tableSelectRef"
+      >
+        <template #top-extra>
+          <el-form :model="form" label-width="40px">
+            <el-row :gutter="15">
+              <el-col :span="8">
+                <el-form-item label="姓名" prop="name">
+                  <el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="性别" prop="sex">
+                  <el-select placeholder="请选择性别" v-model="form.sex"></el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-button type="primary" @click="search">查询</el-button>
+              </el-col>
+            </el-row>
+          </el-form>
+        </template>
+        <template #sex="{ row }">
+          <el-tag size="small">{{ row.sex }}</el-tag>
+        </template>
+      </fs-table-select>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>