diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index a2ea3e250..3406320ea 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -588,7 +588,7 @@ onBeforeUnmount(() => {
>
-
{
return Object.assign(item, {
id: index + 1,
date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`,
- address: "China"
+ address: "China",
+ sex: index % 2 === 0 ? "男" : "女"
});
});
diff --git a/src/views/pure-table/high/table-select/multiple/columns.tsx b/src/views/pure-table/high/table-select/multiple/columns.tsx
index 0966d22ef..1c0296b94 100644
--- a/src/views/pure-table/high/table-select/multiple/columns.tsx
+++ b/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
- },
- {
- label: "日期",
- prop: "date",
- minWidth: 120
+ width: 50
},
{
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
};
diff --git a/src/views/pure-table/high/table-select/multiple/index.vue b/src/views/pure-table/high/table-select/multiple/index.vue
index 88a32e1ae..f932c4c95 100644
--- a/src/views/pure-table/high/table-select/multiple/index.vue
+++ b/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,
- onClear,
+ tableData,
onSure,
+ onClear,
+ onReset,
+ onSearch,
removeTag,
handleSelectionChange
-} = useColumns(selectRef, tableRef);
+} = useColumns(selectRef, formRef, tableRef);
@@ -31,6 +36,42 @@ const {
>
+
+
+
+
+
+
+
+
+
+
+
+
+ 查询
+
+ 重置
+
+
+