一、1. 在 el-table 中增加 row-key=“id”
<el-table
ref="multipleTableRef"
:data="
state.tableData.slice(
(state.currentPage - 1) * state.PageSize,
state.currentPage * state.PageSize
)
"
style="width: 100%"
@selection-change="handleSelectionChange"
row-key="id"
>
- 在多选框列中增加 reserve-selection,如下:
<el-table-column type="selection" reserve-selection/>
- el-table el-paginaton 前端分页
(1)添加 el-paginaton
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="state.currentPage"
:page-sizes="state.pageSizes"
:page-size="state.PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.totalCount"
>
</el-pagination>Ï
(2) js中
const state = reactive({
//分页 总数据
tableData: [],
// 默认显示第几页
currentPage: 1,
// 总条数,根据接口获取数据长度(注意:这里不能为空)
totalCount: 0,
// 个数选择器(可修改)
pageSizes: [10, 20, 30, 40, 50],
// 默认每页显示的条数(可修改)
PageSize: 10,
});
// 每页每条显示的条数
const handleSizeChange = (val: any) => {
// 改变每页显示的条数
state.PageSize = val;
// 注意:在改变每页显示的条数时,要将页码显示到第一页
state.currentPage = 1;
};
const handleCurrentChange = (val: any) => {
state.currentPage = val;
};
二、表格多选改为单选的实现
<el-table
:data="state.tableData"
style="width: 100%"
ref="multipleTableRef"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
@select="handleSelectionChange"
row-key="id"
>
<el-table-column type="selection" reserve-selection />
<el-table-column prop="number" label="编号" width="80" />
</el-table>
const state = reactive({
tableData: [
{
id: "1",
number: "1",
},
],
selectId: "",
});
const handleSelectionChange = (selection: any, row: any) => {
state.selectId = row.id;
// 清除 所有勾选项
multipleTableRef.value.clearSelection();
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if (selection.length == 0) return;
multipleTableRef.value.toggleRowSelection(row, true);
console.log("表格事件 ",JSON.parse(JSON.stringify(row)));
};
以上。