深色模式
Table 数据表格
简单表格，对 el-table 进行了二次封装，提供了数据加载、表格分页等扩展功能。
基本用法
点击查看代码
vue
<template>
<s-table :columns="tableColumns" :dataSource="tableData"></s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableData = reactive([
{ id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" },
{ id: "222", name: "李四", phone: "17622222222", date: "2024-07-02" },
{ id: "333", name: "王五", phone: "17633333333" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
显示边框
点击查看代码
vue
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border></s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableData = 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" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
加载API数据
暂无数据
点击查看代码
vue
<template>
<el-button style="margin-bottom: .5rem;" type="primary" @click="reloadTableData">刷新数据</el-button>
<s-table ref="tableRef" :columns="tableColumns" :dataSource="tableDataApi" autoload border></s-table>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const tableRef = ref();
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableDataApi = () => {
const tableData = new Array(5).fill(0).map((_, i) => {
return { id: `key${ i + 1 }`, name: `张三${ i + 1 }`, phone: "17611111111", date: "2024-07-01" };
});
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: tableData
});
}, 1000);
});
};
const reloadTableData = () => {
tableRef.value?.reload(true);
};
</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
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
数据选择
点击查看代码
vue
<template>
<s-form labelWidth="120px" showColon>
<s-form-item label="选择器类型">
<el-radio-group v-model="selectionType">
<el-radio value="checkbox">多选</el-radio>
<el-radio value="radio">单选</el-radio>
</el-radio-group>
</s-form-item>
</s-form>
<s-table :columns="tableColumns" :dataSource="tableData" :selection="selection" border></s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useSDataList } from "@el-pro/index";
const {
selectionType,
selection
} = useSDataList();
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableData = 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" }
]);
/**
* # `useSDataList()` 原始写法
*
* const selectionType = ref("checkbox");
* const selectedRows = ref([]);
* const selectedRowKeys = ref([]);
*
* const selection = computed(() => {
* return {
* type: selectionType.value,
* selectedRows: selectedRows.value,
* selectedRowKeys: selectedRowKeys.value,
* onChange: (record: Record<string, any>) => {
* selectedRows.value = record.selectedRows;
* selectedRowKeys.value = record.selectedRowKeys;
* }
* };
* });
*/
</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
52
53
54
55
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
52
53
54
55
数据分页
点击查看代码
vue
<template>
<el-button style="margin-bottom: .5rem;" type="primary" @click="reload()">刷新数据</el-button>
<s-table ref="dataListRef" :columns="tableColumns" :dataSource="tableDataApi" :pagination="pagination" autoload border></s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useSDataList } from "@el-pro/index";
const {
dataListRef,
pagination,
reload
} = useSDataList();
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
// 模拟数据接口
const tableDataApi = (pageParams: Record<string, any>) => {
const tableData = new Array(25).fill(0).map((_, i) => {
return { id: `key${ i + 1 }`, name: `张三${ i + 1 }`, phone: "17611111111", date: "2024-07-01" };
});
const { currentPage, pageSize } = pageParams;
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);
});
};
/**
* # `useSDataList()` 原始写法
*
* const dataListRef = ref();
* const currentPage = ref(1);
* const pageSize = ref(10);
* const total = ref(0);
*
* const pagination = computed(() => ({
* currentPage: currentPage.value,
* pageSize: pageSize.value,
* total: total.value,
* onChange: (record: Record<string, any>) => {
* currentPage.value = record.currentPage;
* pageSize.value = record.pageSize;
* total.value = record.total;
* }
* }));
*
* const reload = () => {
* dataListRef.value?.reload(true);
* };
*/
</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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
自定义单元格
点击查看代码
vue
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border>
<template #name="{ record, text, index }">
<span style="color: #409eff;" @click="handleDetail(record, text, index)">{{ text }}</span>
</template>
</s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const tableColumns = reactive([
{ prop: "name", label: "姓名", slot: "name" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableData = 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" }
]);
const handleDetail = (record: Record<string, any>, text: string, index: number) => {
console.log(record, text, index);
};
</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
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
固定高度
点击查看代码
vue
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border height="150px"></s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const tableData = 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: "333", name: "赵六", phone: "17644444444", date: "2024-07-04" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
固定列
点击查看代码
vue
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border>
<template #name="{ record, text, index }">
<el-button type="primary" link @click="handleDetail(record, text, index)">详情</el-button>
</template>
</s-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const tableColumns = reactive([
{ prop: "name", label: "姓名", width: "300px", fixed: true },
{ prop: "phone", label: "电话", width: "600px" },
{ prop: "date", label: "日期", width: "600px" },
{ slot: "name", label: "操作", fixed: "right" }
]);
const tableData = 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" }
]);
const handleDetail = (record: Record<string, any>, text: string, index: number) => {
console.log(record, text, index);
};
</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
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