el-table实现跨页选中
# el-table实现跨页选中
# el-table配置
el-table的column有这么一个属性：
reserve-selection- 仅对 type=selection 的列有效， 类型为 Boolean，为 true 则会在 数据更新之后保留之前选中的数据（需指定 row-key）
添加这个属性后就可以让el-table记住选中的数据了，然后我们配置一下：
<el-table
ref="skuTable"
:data="codeList"
border
row-key="code"
@row-click="handleSelectionChange"
@selection-change="multiSelectionChange"
>
<!--多选-->
<el-table-column
v-if="isSelection"
:selectable="disabledCheckbox"
type="selection"
reserve-selection
min-width="3%"
/>
<!--单选-->
<el-table-column
v-else
min-width="3%"
>
<template slot-scope="scope">
<span
:class="[
'el-radio__input',
scope.row.checked ? 'is-checked' : '',
scope.row.disabled ? 'is-disabled' : '',
]"
@click.native="handleSelectionChange(scope.row)"
>
<span
class="el-radio__inner"
><i
v-if="scope.row.checked"
class="el-radio__original"
/></span>
</span>
</template>
</el-table-column>
</el-table>
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
# 主要方法
data中定义的属性：
codeList: [], /** table列表 */,
multiSelectListAll: [], // 保存所有选中的数据，用于跨页选择
isSelection: true, // 选择table是单选还是多选
1
2
3
2
3
# 单选或者单击table某一行时选中
/** 单选 */
handleSelectionChange(val) {
if (this.isSelection) { // 判断是多选还是单选
let repeatCode = this.multiSelectListAll.find((item) => {
return item.code === val.code;
});
this.$nextTick(() => {
// 判断当前元素是否已选择，是则移除选中，否则添加选中
if (!repeatCode) {
this.multiSelectListAll.push(val);
this.$refs.skuTable.toggleRowSelection(val, true);
} else {
let index = this.multiSelectListAll.findIndex((item) => {
return item.code === val.code;
});
this.multiSelectListAll.splice(index, 1);
this.$refs.skuTable.toggleRowSelection(val, false);
}
});
} else {
// 单选，通过给table数据添加 checked 属性，判断是否选中
this.codeList.map((item) => {
if (item.code !== val.code) item.checked = false;
else {
item.checked = true;
}
});
}
},
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
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
# 多选
/** 多选 **/
multiSelectionChange(val) {
// val.length为0时说明已选数据被全部删除
if (val.length > 0) {
// 判断table中的已选择数据与本地已选择数据是否不同来确定是删除或添加
let newArr = this.getArrDifSameValue(val, this.multiSelectListAll);
// newArr.length 大于0说明是删除数据
if (newArr.length > 0) {
let index = this.multiSelectListAll.findIndex((item) => {
return newArr[0].code === item.code;
});
if (index !== -1) this.multiSelectListAll.splice(index, 1);
} else {
this.multiSelectListAll.push(...val);
// 对保存的数据去重
this.multiSelectListAll = this.arrayUnique(
this.multiSelectListAll,
"code"
);
}
} else {
// 清空本地数据
this.multiSelectListAll.splice(0, this.multiSelectListAll.length);
}
},
/** 获取被删除的元素 **/
getArrDifSameValue(arr1, arr2) {
let result = [];
arr2.forEach((item) => {
let isRepeat = arr1.find((ite) => item.code === ite.code);
if (!isRepeat) {
result.push(item);
}
});
return result;
},
/**对象数组去重**/
arrayUnique(arr, code) {
let map = new Map();
for (let item of arr) {
if (!map.has(item[code])) {
map.set(item[code], item);
}
}
return [...map.values()];
},
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
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
在GitHub上编辑 (opens new window)
上次更新: 2/24/2022, 2:46:31 PM