el-table多选,分页切换时,选中内容不变;清空多选的内容
el-table中添加:row-key=“getRowKeys”
设置true【 :reserve-selection=“true”】
:row-key="getRowKeys"
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" fixed="left" />
<el-table ref="multipleTable" :row-key="getRowKeys" :data="tableData" role="table"
height="100%" @selection-change="handleSelectionChange"
:header-cell-style="{ background: '#1890ff', color: '#fff', fontSize: '14px', fontFamily: 'SourceHanSansSC-Medium', fontWeight: '500' }"
size="small">
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" fixed="left" />
<el-table-column type="expand" width="55" fixed="left">
<template slot-scope="props">
<el-form style="padding: 0 20px;" label-position="left" inline class="demo-table-expand">
<el-form-item :style="'width:380px'" v-for="(i, j) in columns" :label="i.label + ':'" :key="j">
<span>{{ props.row[i.prop] }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column type="index" :index="indexMethod" width="55" align="center" label="序号" />
<template v-for="(item, index) in columns">
<el-table-column v-if="queryParams.layout && item.abstract" :key="index" show-overflow-tooltip
:label="item.label" align="center" :width="item.width">
<template slot-scope="scope">
<span>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column v-if="!queryParams.layout" :key="index" show-overflow-tooltip :label="item.label"
align="center" :width="item.width">
<template slot-scope="scope">
<span>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</template>
</el-table>
getRowKeys(row) {
return row.id
},
清空多选
this.$refs.multipleTable.clearSelection()
原文地址:https://blog.csdn.net/Aa12364567/article/details/142346124
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!