# Table 数据表格
简单表格，对 el-table 进行了二次封装，提供了数据加载、表格分页等扩展功能。
# 基本用法
点击查看代码
<template>
<s-table :columns="tableColumns" :dataSource="tableData"></s-table>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
],
tableData: [
{ 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
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 显示边框
点击查看代码
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border></s-table>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
],
tableData: [
{ 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
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 加载API数据
点击查看代码
<template>
<div>
<el-button style="margin-bottom: .5rem;" type="primary" @click="reloadTableData">刷新数据</el-button>
<s-table ref="tableRef" :columns="tableColumns" :dataSource="tableDataApi" border></s-table>
</div>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]
}
},
methods: {
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);
});
},
reloadTableData() {
this.$refs.tableRef.reload();
}
}
}
</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
# 数据选择
点击查看代码
<template>
<div>
<el-descriptions colon>
<el-descriptions-item label="选择器类型">
<el-radio-group v-model="selectionType">
<el-radio label="checkbox">多选</el-radio>
<el-radio label="radio">单选</el-radio>
</el-radio-group>
</el-descriptions-item>
</el-descriptions>
<s-table :columns="tableColumns" :dataSource="tableData" :selection="selection" border></s-table>
</div>
</template>
<script>
export default {
data() {
return {
selectionType: "checkbox",
selectedRows: [],
selectedRowKeys: [],
tableColumns: [
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
],
tableData: [
{ 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" }
]
}
},
computed: {
selection() {
return {
type: this.selectionType,
selectedRows: this.selectedRows,
selectedRowKeys: this.selectedRowKeys,
onChange: ({ selectedRows, selectedRowKeys }) => {
this.selectedRows = selectedRows;
this.selectedRowKeys = 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
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
# 数据分页
点击查看代码
<template>
<div>
<el-button style="margin-bottom: .5rem;" type="primary" @click="reloadTableData">刷新数据</el-button>
<s-table ref="tableRef" :columns="tableColumns" :dataSource="tableDataApi" :pagination="pagination" border></s-table>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
tableColumns: [
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
]
}
},
computed: {
pagination() {
return {
currentPage: this.currentPage,
pageSize: this.pageSize,
total: this.total,
onChange: ({ currentPage, pageSize, total }) => {
this.currentPage = currentPage;
this.pageSize = pageSize;
this.total = total;
},
};
}
},
methods: {
tableDataApi(pageParams) {
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);
});
},
reloadTableData() {
this.$refs.tableRef.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
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
# 自定义单元格
点击查看代码
<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>
export default {
data() {
return {
tableColumns: [
{ prop: "name", label: "姓名", slot: "name" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
],
tableData: [
{ 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" }
]
}
},
methods: {
handleDetail(record, text, index) {
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
29
30
31
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
# 固定高度
点击查看代码
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border style="height: 150px;"></s-table>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ prop: "name", label: "姓名" },
{ prop: "phone", label: "电话" },
{ prop: "date", label: "日期" }
],
tableData: [
{ 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
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 固定列
点击查看代码
<template>
<s-table :columns="tableColumns" :dataSource="tableData" border>
<template #name="{ record, text, index }">
<el-button type="text" @click="handleDetail(record, text, index)">详情</el-button>
</template>
</s-table>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ prop: "name", label: "姓名", width: "300px", fixed: true },
{ prop: "phone", label: "电话", width: "600px" },
{ prop: "date", label: "日期", width: "600px" },
{ slot: "name", label: "操作", fixed: "right" }
],
tableData: [
{ 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" }
]
}
},
methods: {
handleDetail(record, text, index) {
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
29
30
31
32
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