element的table表格多选结合分页实现已选中的记忆功能和实现表格数据和已选数据动态同步更新 1.先上效果图：
1-2：⼀开始有数据（相当于编辑）：
2.主要实现逻辑：
借助element组件的table表格的selection-change⽅法（ps：）结合分页组件，⾃⾏定义⼀个⽤于存储当前页的已勾选数据，⼀个⽤于存储所勾选的所有数据（也就是右侧展⽰已勾选数据），及⼀个标志位来实现。
3.具体代码实现：
的性质3-1：HTML结构：
A：图⽰：
B：主要代码：
<div class="content-box flex-1">
<div class="table-box h-p-100">
<el-table
class="h-p-100"
ref="table"
border
stripe
highlight-current-row
@selection-change="handleSelectionChange"
:show-overflow-tooltip="true"
v-loading="table_loading"
:data="data ? ws : []"
全民开讲
>
<el-table-column type="selection" width="40">
</el-table-column>
<el-table-column
label="封⾯图"
prop=""
width="120"
show-overflow-tooltip
header-align="center"
align="center"
>
<template slot-scope="{ row }">
<img
:src="globalimgUrl + downloadDir + ver + curToken" width="90"
width="90"
height="60"
v-viewer
/>
</template>
</el-table-column>
<el-table-column
label="名称"
prop="name"
min-width="180"
show-overflow-tooltip
header-align="center"
></el-table-column>
<el-table-column
label="类型"
prop="type"
width="80"
show-overflow-tooltip
header-align="center"
>
防范风险<template slot-scope="{ row, column, $index }"> <p v-if="pe == 1">⽂章</p>
<p v-if="pe == 2">视频</p>
<p v-if="pe == 3">⽂档</p>
<p v-if="pe == 4">系列课</p>
</template>
</el-table-column>
<el-table-column
label="分类"
prop=""
min-width="120"
show-overflow-tooltip
header-align="center"
></el-table-column>
<el-table-column
label="创建⼈"
prop="createStaff"
width="120"
show-overflow-tooltip
header-align="center"
></el-table-column>
<el-table-column
label="更新时间"
prop="updateDate"
width="150"
show-overflow-tooltip
header-align="center"
宜昌市康庄路小学></el-table-column>
</el-table>
</div>
</div>
<div class="page-box ta-r uinn-t10 umar-r10 flex-0"> <Page
:show-total="true"
:show-elevator="true"
:show-sizer="true"
夏泽良:page-size="ws"
:
page-size-opts="[20, 50, 100, 150, 200]"
:current="params.page"
:total="data ? al : 0"
@on-change="currentChange"
@on-page-size-change="sizeChange"
>
</Page>
</div>
3-2：JS逻辑：A：图⽰：李汉柏
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议