说明
封装表格中列选择的操作
示例
用户名 | 性别 | 单位 | 简介 | 操作 | |
|---|---|---|---|---|---|
xxx | 女 | 政府机关 | 来自安全应急UED的设计师来自安全应急UED的设计 | ||
xxx | 男 | 政府机关 | 经验丰富的前端工程师 | ||
xxx | 男 | 政府机关 | 90后交互设计师 |
函数定义
function(
tableData: Ref<Record<string,unknown>[]>,
option?: {
key: string /* 行标识字段，默认值id */
cache: boolean /* 是否缓存所有选择项，默认值false */
}
): {
isSelectedAll: Ref<boolean> // 选中所有
isIndeterminate: Ref<boolean> // 选中部分
selectedRowKeys: Ref<unknown[]> // 选中所有行的标识
selectAll: () => void // 选中所有操作
selectRow: () => void // 选中行操作
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Demo代码
<template>
<hl-simple-table
:cols="cols"
:data="tableData"
>
<template #firstCol>
<hl-checkbox v-model="isSelectedAll" :indeterminate="isIndeterminate" @change="selectAll" />
</template>
<template #tableIndex="{ row }">
<hl-checkbox
v-model="selectedRowKeys"
:label="row.id"
:show-label="false"
@change="selectRow"
/>
</template>
<template #handle>
<a>修改</a>
</template>
</hl-simple-table>
<br />
<hl-button @click="lastPage">上一页</hl-button>
<hl-button @click="nextPage">下一页</hl-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { HlSimpleTable, HlCheckbox, HlButton } from 'helper-ui'
import { useTableSelection } from './'
export default defineComponent({
components: {
HlSimpleTable,
HlCheckbox,
HlButton,
},
setup() {
const tableData = ref(lastPageData)
const cols = [
{ title: '#', slotName: 'tableIndex', headerSlotName: 'firstCol' },
{ title: '用户名', prop: 'name' },
{ title: '性别', prop: 'sex' },
{ title: '单位', prop: 'org' },
{
title: '简介',
prop: 'des',
showTooltip: true,
width: '40%',
tooltipProps: { width: '200px', popperClass: 'test-tip' },
},
{ title: '操作', slotName: 'handle', align: 'center' },
]
const lastPage = () => {
tableData.value = lastPageData
}
const nextPage = () => {
tableData.value = nextPageData
}
const {
isSelectedAll,
isIndeterminate,
selectedRowKeys,
selectAll,
selectRow,
} = useTableSelection(tableData)
return {
tableData,
cols,
isSelectedAll,
isIndeterminate,
selectedRowKeys,
selectAll,
selectRow,
lastPage,
nextPage,
}
},
})
const lastPageData = [
{
id: 1,
name: 'xxx',
sex: '女',
org: '政府机关',
des: '来自安全应急UED的设计师来自安全应急UED的设计',
},
{
id: 2,
name: 'xxx',
sex: '男',
org: '政府机关',
des: '经验丰富的前端工程师',
},
{
id: 3,
name: 'xxx',
sex: '男',
org: '政府机关',
des: '90后交互设计师',
},
]
const nextPageData = [
{
id: 4,
name: 'xxx',
sex: '女',
org: '政府机关',
des: '来自安全应急UED的设计师来自安全应急UED的设计',
},
{
id: 5,
name: 'xxx',
sex: '男',
org: '政府机关',
des: '经验丰富的前端工程师',
},
{
id: 6,
name: 'xxx',
sex: '男',
org: '政府机关',
des: '90后交互设计师',
},
]
</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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129