解决 el-table 多选框，前端分页，选中失效问题；多选改为单选

原创已于 2023-09-06 11:16:03 修改 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

于 2023-06-19 09:50:05 首次发布

文章详细介绍了如何在Vue.js应用中使用ElementUI库的el-table组件实现行键设置、分页、保留选择状态以及从多选切换到单选的表格功能。涉及到的数据属性包括currentPage、PageSize、tableData和totalCount，以及对应的事件处理函数如handleSizeChange和handleCurrentChange。

一、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)));
};

以上。