feat: 表格选择器-多选添加form查询示例

src/router/enums.ts

@@ -1,8 +1,8 @@
 // 完整版菜单比较多，将 rank 抽离出来，在此方便维护
 
 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从 1 开始哦
-  able = 1,
+  components = 1,
-  components = 2,
+  able = 2,
   table = 3,
   list = 4,
   result = 5,
@@ -23,8 +23,8 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
 
 export {
   home,
-  able,
   components,
+  able,
   table,
   list,
   result,

src/views/pure-table/high/data.ts

@@ -91,7 +91,8 @@ const tableDataEdit = clone(tableData, true).map((item, index) => {
   return Object.assign(item, {
     id: index + 1,
     date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`,
-    address: "China"
+    address: "China",
+    sex: index % 2 === 0 ? "男" : "女"
   });
 });
 

src/views/pure-table/high/table-select/multiple/columns.tsx

@@ -1,10 +1,27 @@
 import { message } from "@/utils/message";
 import { tableDataEdit } from "../../data";
-import { ref, reactive, type Ref } from "vue";
+import { type Ref, ref, reactive } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 
-export function useColumns(selectRef: Ref, tableRef: Ref) {
+export function useColumns(selectRef: Ref, formRef: Ref, tableRef: Ref) {
+  const tableData = ref(tableDataEdit);
+  const cloneTableData = cloneDeep(tableData.value);
   const selectValue = ref([]);
+  const searchForm = reactive({
+    sexValue: "",
+    searchDate: ""
+  });
+  const sexOptions = [
+    {
+      value: 0,
+      label: "男"
+    },
+    {
+      value: 1,
+      label: "女"
+    }
+  ];
   const columns: TableColumnList = [
     {
       type: "selection",
@@ -14,20 +31,24 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
     {
       label: "ID",
       prop: "id",
-      width: 80
+      width: 50
-    },
-    {
-      label: "日期",
-      prop: "date",
-      minWidth: 120
     },
     {
       label: "姓名",
       prop: "name"
     },
+    {
+      label: "性别",
+      prop: "sex"
+    },
     {
       label: "地址",
       prop: "address"
+    },
+    {
+      label: "日期",
+      prop: "date",
+      minWidth: 120
     }
   ];
 
@@ -36,7 +57,7 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
     pageSize: 5,
     currentPage: 1,
     layout: "prev, pager, next",
-    total: tableDataEdit.length,
+    total: tableData.value.length,
     background: true,
     small: true
   });
@@ -49,9 +70,32 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
     selectValue.value = arr;
   };
 
+  const onSearch = () => {
+    tableData.value = cloneTableData;
+    if (!isAllEmpty(searchForm.sexValue)) {
+      let sex = sexOptions
+        .map(sex => sex.value === Number(searchForm.sexValue) && sex.label)
+        .filter(Boolean)[0];
+      tableData.value = tableData.value.filter(data => data.sex === sex);
+    }
+    if (!isAllEmpty(searchForm.searchDate)) {
+      tableData.value = tableData.value.filter(
+        data => data.date === searchForm.searchDate
+      );
+    }
+    pagination.total = tableData.value.length;
+  };
+
+  const onReset = () => {
+    formRef.value.resetFields();
+    onClear();
+    tableData.value = cloneTableData;
+    pagination.total = tableData.value.length;
+  };
+
   const removeTag = ({ id }) => {
     const { toggleRowSelection } = tableRef.value.getTableRef();
-    toggleRowSelection(tableDataEdit.filter(v => v.id == id)?.[0], false);
+    toggleRowSelection(tableData.value.filter(v => v.id == id)?.[0], false);
   };
 
   const onClear = () => {
@@ -67,12 +111,16 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
   };
 
   return {
+    searchForm,
+    sexOptions,
     columns,
     pagination,
     selectValue,
-    tableDataEdit,
+    tableData,
     onSure,
     onClear,
+    onReset,
+    onSearch,
     removeTag,
     handleSelectionChange
   };

src/views/pure-table/high/table-select/multiple/index.vue

@@ -2,18 +2,23 @@
 import { ref } from "vue";
 import { useColumns } from "./columns";
 
-const selectRef = ref();
+const formRef = ref();
 const tableRef = ref();
+const selectRef = ref();
 const {
+  searchForm,
+  sexOptions,
   columns,
   pagination,
   selectValue,
-  tableDataEdit,
+  tableData,
-  onClear,
   onSure,
+  onClear,
+  onReset,
+  onSearch,
   removeTag,
   handleSelectionChange
-} = useColumns(selectRef, tableRef);
+} = useColumns(selectRef, formRef, tableRef);
 </script>
 
 <template>
@@ -31,6 +36,42 @@ const {
   >
     <template #empty>
       <div class="m-4">
+        <!-- <el-config-provider size="small"> -->
+        <el-form ref="formRef" :inline="true" :model="searchForm">
+          <el-form-item prop="sexValue">
+            <el-select
+              v-model="searchForm.sexValue"
+              class="!w-[120px]"
+              placeholder="请选择性别"
+              :teleported="false"
+              clearable
+            >
+              <el-option
+                v-for="item in sexOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="searchDate">
+            <el-date-picker
+              v-model="searchForm.searchDate"
+              class="!w-[150px]"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-D"
+            />
+          </el-form-item>
+          <el-form-item class="float-right !mr-0">
+            <el-button type="primary" text bg @click="onSearch">
+              查询
+            </el-button>
+            <el-button text bg @click="onReset"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+
         <pure-table
           ref="tableRef"
           row-key="id"
@@ -40,7 +81,7 @@ const {
             color: '#303133'
           }"
           :data="
-            tableDataEdit.slice(
+            tableData.slice(
               (pagination.currentPage - 1) * pagination.pageSize,
               pagination.currentPage * pagination.pageSize
             )
@@ -59,6 +100,7 @@ const {
         >
           确定
         </el-button>
+        <!-- </el-config-provider> -->
       </div>
     </template>
   </el-select>