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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
| // 回显使用 toggleRowSelection 方法
// 只能通过对应的 row 而不是 id 来选中，故每次请求时候设置
// 使用 select 和 select-all 来实现
//selection-change 暂时不能因为 toggleRowSelection 会触发该方法
<template>
<div>
<el-popover width="600px" trigger="click">
<template #reference>
<el-button icon="Avatar" type="primary" plain>选择</el-button>
</template>
<div class="user-main">
<el-table ref="tableRef" class="user-main-table" :data="tableData" border stripe style="width: 100%"
v-loading="tableLoading" row-key="id" @select="handleSelection" @select-all="handleAllChange">
<el-table-column type="selection" width="40" reserve-selection
:selectable="() => type !== 'check'" />
<el-table-column prop="userName" label="用户昵称" show-overflow-tooltip />
<el-table-column prop="deptName" label="所属部门" show-overflow-tooltip />
<el-table-column prop="jobName" label="岗位名称" show-overflow-tooltip />
</el-table>
<el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
:total="pagination.total" @current-change="handleCurrent" class="user-main-pagination" />
</div>
</el-popover>
</div>
</template>
<script setup>
import { ref, reactive, nextTick, onMounted, computed, watch } from 'vue'
const tableDataList = [
[
{
id: 1,
userName: '张三',
deptName: '研发部',
jobName: '前端开发'
},
{
id: 2,
userName: '李四',
deptName: '研发部',
jobName: '后端开发'
},
],
[
{
id: 3,
userName: '王五',
deptName: '研发部',
jobName: 'UI设计'
},
{
id: 4,
userName: '赵六',
deptName: '研发部',
jobName: '产品经理'
},
],
[
{
id: 5,
userName: '钱七',
deptName: '研发部',
jobName: '测试'
},
{
id: 6,
userName: '孙八',
deptName: '研发部',
jobName: '运维'
},
]
]
const props = defineProps({
userIds: { default: () => [] }
})
const emit = defineEmits(['update:userIds'])
// 表格
const tableLoading = ref(false)
const tableData = ref([])
const tableRef = ref()
// 分页
const pagination = reactive({
pageSize: 2,
current: 1,
total: 0
})
// 请求参数
const reqParams = reactive({
current: 1,
size: 2,
})
// 是否有其他页选中
const hasSelectionOnOtherPages = computed(() => {
return props.userIds.some(id => !tableData.value.some(row => row.id === id))
})
// 选中处理
const handleSelection = (selection, row) => {
const userIds = [...props.userIds]
const index = userIds.indexOf(row.id)
if (selection.includes(row) && index === -1) {
userIds.push(row.id)
} else if (!selection.includes(row) && index > -1) {
userIds.splice(index, 1)
}
emit('update:userIds', userIds)
}
const handleAllChange = (selection) => {
let currentPage = selection.filter(item => tableData.value.find(i => i.id == item.id))
const currentPageIds = tableData.value.map(item => item.id)
const selectedIds = new Set(props.userIds)
if (currentPage.length > 0) {
currentPageIds.forEach(id => selectedIds.add(id))
} else {
currentPageIds.forEach(id => selectedIds.delete(id))
}
emit('update:userIds', Array.from(selectedIds))
}
// 分页
const handleCurrent = (current) => {
reqParams.current = current
init()
}
// 初始化
const init = () => {
tableLoading.value = true
tableData.value = tableDataList[reqParams.current - 1]
pagination.total = 6
setTimeout(() => {
tableLoading.value = false
handleEcho()
}, 500)
}
// 回显
const handleEcho = () => {
nextTick(() => {
// 关键：先清空
tableRef.value?.clearSelection()
// 回显当前页
tableData.value.forEach(row => {
if (props.userIds.includes(row.id)) {
tableRef.value.toggleRowSelection(row, true)
}
})
// 回显虚拟行（触发半选状态）
if (hasSelectionOnOtherPages.value) {
const virtualRow = { id: '__VIRTUAL__', __virtual: true }
tableRef.value.toggleRowSelection(virtualRow, true)
}
})
}
watch(() => props.userIds, () => {
console.log(props.userIds, tableRef.value)
if(!tableRef.value) return
handleEcho()
}, { deep: true })
onMounted(() => {
init()
})
</script>
|
