深色模式
Table 数据表格
数据查询表格,对 s-table & s-search-form 进行了二次封装,用于快速创建带有数据查询功能的表格。
基本用法
点击查看代码
vue
<template>
<s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableData"
@search="handleTableDataSearch"></s-search-table>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
const searchItems = reactive([
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]);
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const dataSource = reactive([
{ id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" },
{ id: "222", name: "李四", phone: "17622222222", date: "2024-07-02" },
{ id: "333", name: "王五", phone: "17633333333", date: "2024-07-03" },
{ id: "444", name: "赵六", phone: "17644444444", date: "2024-07-04" }
]);
const tableData = ref(dataSource);
const handleTableDataSearch = (searchParams: Record<string, any>) => {
const { name, phone } = searchParams || {};
tableData.value = dataSource.filter((item: Record<string, any>) => {
return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
});
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
加载API数据
暂无数据
点击查看代码
vue
<template>
<s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableDataApi" autoload
@search="handleTableDataSearch"></s-search-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const searchItems = reactive([
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]);
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableDataApi = (params: Record<string, any>) => {
const { name, phone } = params || {};
const tableData = new Array(5).fill(0).map((_, i) => {
return { id: `key${ i + 1 }`, name: `张三${ i + 1 }`, phone: "17611111111", date: "2024-07-01" };
}).filter((item: Record<string, any>) => {
return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
});
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: tableData
});
}, 1000);
});
};
const handleTableDataSearch = (searchParams: Record<string, any>) => {
console.log(searchParams);
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
数据分页
点击查看代码
vue
<template>
<s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableDataApi" :pagination="pagination"
autoload border @search="handleTableDataSearch"></s-search-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useSDataList } from "@easyui/element-plus-pro";
const { pagination } = useSDataList();
const searchItems = reactive([
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]);
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
// 模拟数据接口
const tableDataApi = (queryParams: Record<string, any>) => {
const { name, phone, currentPage, pageSize } = queryParams;
const tableData = new Array(25).fill(0).map((_, i) => {
return { id: `key${ i + 1 }`, name: `张三${ i + 1 }`, phone: "17611111111", date: "2024-07-01" };
}).filter((item: Record<string, any>) => {
return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
});
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: {
currentPage: currentPage,
pageSize: pageSize,
total: tableData.length,
records: tableData.filter((_, i) => {
return i >= pageSize*(currentPage - 1) && i < pageSize*currentPage;
})
}
});
}, 1000);
});
};
const handleTableDataSearch = (searchParams: Record<string, any>) => {
console.log(searchParams);
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
表单扩展配置
点击查看代码
vue
<template>
<s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableData" :searchColumn="2" border
:searchProps="{ labelWidth: 60, border: true }" @search="handleTableDataSearch"></s-search-table>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
const searchItems = reactive([
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]);
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const dataSource = reactive([
{ id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" },
{ id: "222", name: "李四", phone: "17622222222", date: "2024-07-02" },
{ id: "333", name: "王五", phone: "17633333333", date: "2024-07-03" },
{ id: "444", name: "赵六", phone: "17644444444", date: "2024-07-04" }
]);
const tableData = ref(dataSource);
const handleTableDataSearch = (searchParams: Record<string, any>) => {
const { name, phone } = searchParams || {};
tableData.value = dataSource.filter((item: Record<string, any>) => {
return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
});
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35