深色模式
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" },
// { 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
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></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 { ref, reactive, computed } from "vue";
const selectionType = ref("checkbox");
const selectedRows = ref([]);
const selectedRowKeys = ref([]);
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" }
]);
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
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
数据分页
暂无数据
共 0 条
- 1
页
点击查看代码
vue
<template>
<el-button style="margin-bottom: .5rem;" type="primary" @click="reloadTableData">刷新数据</el-button>
<s-table ref="tableRef" :columns="tableColumns" :dataSource="tableDataApi" :pagination="pagination" autoload border></s-table>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
const tableRef = ref();
const currentPage = ref(2);
const pageSize = ref(10);
const total = ref(0);
const tableColumns = reactive([
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]);
const pagination = computed(() => {
return {
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 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);
});
};
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
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
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
自定义单元格
点击查看代码
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