vue3+element-plus实现el-table表格自动勾选、翻页勾选数据的实现方式

原创 于 2025-11-13 15:10:39 发布 · 334 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

需求描述

页面初始化时加载table列表，默认列表数据的时间周期为空，多选框不可选择；在操作栏中点击添加按钮实现手动输入，输入完成默认勾选该条数据，多选框可选择、取消。
支持翻页勾选，以及当前页的全选、取消全选（对于全数据选择/取消需要后端全数据处理，不建议）。

实现方法

方法一

利用el-table的select、select-all事件；表格selection列的selectable属性进行操作，代码如下：
表格（弹框）：

<el-dialog v-model="dialogFormVisible" title="选择" append-to-body draggable width="60%">
    <div class="page-content">
      <el-table :data="tableData" ref="tableRef" style="width: 100%" height="100%" border  highlight-current-row header-row-class-name="header-table" @select="handleSelect" @select-all="handleSelectAll">
        <el-table-column type="selection" width="55" :selectable="selectable"/>
        <el-table-column prop="groupId" label="列一" align="center"/>
        <el-table-column prop="groupName" label="列二" align="center"/>
        <el-table-column prop="groupCycleDate" label="时间周期" min-width="180" align="center">
          <template #default='scope'>
            <span v-if="!scope.row.add">{{ scope.row.groupCycleDate }}</span>
            <el-date-picker v-model="scope.row.groupCycleDateRange" type="datetimerange" range-separator="-" :default-time="defaultTime"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" clearable v-else/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed='right' align="center">
          <template #default='scope'>
            <el-button type="primary" size="small" @click="changeDate(scope.row, true, '0')" link v-if="!scope.row.add">添加</el-button>
            <div v-else>
              <el-button size="small" @click="changeDate(scope.row, false, '1')" link>取消</el-button>
              <el-button type="primary" size="small" @click="changeDate(scope.row, false, '2')" link>确认</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自行封装的分页组件 -->
    <div class="page-footer">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"  @pagination="getList" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </template>
  </el-dialog>

主要实现逻辑：

const dialogFormVisible = ref(false);
const submitLoading = ref(false);
const tableData = ref([]);
const tableRef = ref(null);
const allSelectedData = ref([]);
// 保存已填写时间的数据
const allTimeData = ref([]);
const tableLoading = ref(false);
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];

// 是否可勾选
const selectable = (row, index) => {
  return !!row.groupCycleDate;
}
// 用户手动勾选时触发
const handleSelect = (selection,row) => {
  // selection: 当前页所有已选中的行数据（包括本次变化后的结果）
  // row: 刚刚被操作（选中或取消）的那一行数据
  console.log('selection', selection)
  const selectedRowIds = new Set(allSelectedData.value.map(item => item.id))
  if (selection.includes(row)) {
    // 选中操作：如果该行不在全部选中集合中，则添加
    if (!selectedRowIds.has(row.id)) {
      allSelectedData.value.push(row)
    }
  } else {
    // 取消选中操作：从全部选中集合中移除该行
    const index = allSelectedData.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      allSelectedData.value.splice(index, 1)
    }
  }
}
// 用户手动勾选全选框时触发
const handleSelectAll = (selection) => {
  // selection: 当前页所有被选中的行数据（如果操作是取消全选，则为空数组），tableData只会包含当前页面的数据
  const currentPageIds = tableData.value.map(row => row.id);
  const selectedRowIds = new Set(allSelectedData.value.map(item => item.id));
  if (selection.length > 0) {
    // 全选当前页：将当前页尚未选中的项添加到总集合
    selection.forEach(row => {
      if (!selectedRowIds.has(row.id)) {
        allSelectedData.value.push(row);
      }
    })
  } else {
    // 取消全选当前页：只从总集合中移除当前页的项
    allSelectedData.value = allSelectedData.value.filter(
      item => !currentPageIds.includes(item.id)
    )
  }
}
// 翻页勾选数据
const fetchTableData = async () => {
  // 数据更新后，在nextTick中回显选中状态
  nextTick(() => {
    if (tableData.value && allSelectedData.value.length > 0) {
      tableData.value.forEach(row => {
        const isSelected = allSelectedData.value.some(
          selected => selected.id === row.id
        )
        tableRef.value?.toggleRowSelection(row, isSelected);
      })
    }
  })
}
// 列表查询
const getList = () => {
	// 模拟数据
  if (queryParams.value.pageNum == 2) {
    tableData.value = [
      {
        id: '1-1-5',
        groupId: '1562145875445',
        groupName: '五',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      },
      {
        id: '1-1-6',
        groupId: '3562145875346',
        groupName: '六',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      },
      {
        id: '1-1-7',
        groupId: '458745875447',
        groupName: '七',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      },
      {
        id: '1-1-8',
        groupId: '32145145875448',
        groupName: '八',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      }
    ];
  } else {
    tableData.value = [
      {
        id: '1-1-1',
        groupId: '1562145875441',
        groupName: '一',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      },
      {
        id: '1-1-2',
        groupId: '3562145875342',
        groupName: '二',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      },
      {
        id: '1-1-3',
        groupId: '458745875443',
        groupName: '三',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      },
      {
        id: '1-1-4',
        groupId: '32145145875444',
        groupName: '四',
        groupCycleDate: '',
        groupCycleDateRange: [],
        add: false
      }
    ];
  }
  tableData.value.forEach(item => {
    item.groupCycleDate = '';
    item.groupCycleDateRange = [];
    const indexItem = allTimeData.value.findIndex(filled => filled.id === item.id);
    if (indexItem > -1) {
      item.groupCycleDate = allTimeData.value[indexItem].groupCycleDate;
      item.groupCycleDateRange = allTimeData.value[indexItem].groupCycleDateRange;
    }
  });
  fetchTableData();
}

// 确定
const submit = () => {
  if (!allSelectedData.value.length) {
    proxy.$modal.msgError('请选择要添加的群聊');
    submitLoading.value = false;
    return false;
  }
  console.log('params', params);
  ... // 其他业务逻辑
}
// 添加
const changeDate = (row, status,selection) => {
  row.add = status;
  const preCycleDate = row.groupCycleDate;
  if (row?.groupCycleDateRange?.length) {
    if (selection == '2') {
      row.groupCycleDate = row.groupCycleDateRange.join('—');
      toggleSelection([row], true);
    } else if (selection == '1') {
      const preCycleDateRange = [];
      if (preCycleDate) {
        preCycleDateRange.push(...preCycleDate.split('—'));
      }
      row.groupCycleDate = preCycleDate;
      row.groupCycleDateRange = preCycleDateRange;
    }
  } else {
    if (selection == '2') {
      row.groupCycleDate = '';
      toggleSelection([row],false);
    }else if (selection == '1') {
      const preCycleDateRange = [];
      if (preCycleDate) {
        preCycleDateRange.push(...preCycleDate.split('—'));
      }
      row.groupCycleDate = preCycleDate;
      row.groupCycleDateRange = preCycleDateRange;
    }
  }
}

// 勾选
const toggleSelection = (rows,isSelected) => {
  if (rows) {
    rows.forEach((row) => {
      tableRef.value.toggleRowSelection(row, isSelected);
      if (isSelected) {
        allSelectedData.value.push(row);
        allTimeData.value.push(row);
      }else {
        allSelectedData.value = allSelectedData.value.filter(item => item.id !== row.id);
        allTimeData.value = allTimeData.value.filter(item => item.id !== row.id);
      }
    })
  }
}

方法二

基本原理与方法一中的实现逻辑一致。不同之处在于，使用el-table的row-key和reserve-selection属性，翻页时不用再使用fetchTableData方法重新进行过勾选，el-table会自动记录之前勾选的内容，翻页时会进行自动勾选。
需要注意的是此时select-all事件中的参数selection不再只是当前页中的内容，它包括所有页面已经勾选的数据，所以此处在做逻辑处理时，不用适用selection.length > 0进行判断，因为此时可能会有上一页或者下一页或者其他页码勾选的数据。
html代码：

...
<!-- 省略相同代码 -->
<el-table :data="tableData" ref="tableRef" style="width: 100%" height="100%" border highlight-current-row header-row-class-name="header-table" @select="handleSelect" @select-all="handleSelectAll" row-key="id">
<el-table-column type="selection" width="55" :selectable="selectable" :reserve-selection="true"/>
...
</el-table>
...

业务逻辑代码中删除fetchTableData方法，修改handleSelectAll方法，getList加载数据时无需再调用fetchTableData方法。

...
// 省略相同代码
// 用户手动勾选全选框时触发
const handleSelectAll = (selection) => {
  // selection: 所有页被选中的行数据（如果没有选中的数据，则为空数组），tableData只会包含当前页面的数据
  allSelectedData.value = [...selection];
}
// 删除fetchTableData方法
// 去除getList中的fetchTableData调用
const getList = () => {
  ...
  // fetchTableData();
}
cd_yang2017
关注
vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）
高级前端工程师
07-22 4609
vue3，nuxt3，element plus，表格组件，Table，el-table，导出，下载，excel，电子工作簿，xls，xlsx，将表格导出成xls，如何把表格原封不动的导出成excel，保留图片，带图片，图标，如何导出包括含有图片的Excel表格，图片和表格数据导出excel，把表格导出成excel格式，表格内的图片一起导出，vue3导出图片和数据到Excel，可导出图片，导出图像到Excel，网页上的图片怎么能导出到xls表格中，显示图片url链接，图片太多导出失败，图片会超出单元格，图片不
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
斌擎科技
11-17 2339
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
vue3+Element-plus el-select 下拉表格组件（ TSelectTable 新增多选是否隐藏删除icon、单选--回显不是第一页的label）
wocwin的博客
12-02 1万+
TSelectTable组件键盘向上/下滚动条根据移动的选择区域而滚动）TSelectTable组件新增搜索过滤、翻页选中功能；新增isShowFirstColumn、filterable、reserveSelection三个属性; TSelectTable组件动态赋值默认值回显问题解决及单选默认值修改及新增isClearQuery属性清除查询条件数据；TSelectTable组件新增单选---新增上、下、回车键盘事件；TSelectTable组件新增查询条件；新增虚拟列表功能
vue3 + elementPlus实现select下拉框插入确定和取消按钮。
qq_54753561的博客
09-18 5640
vue3 + elementPlus实现select下拉框插入确定和取消按钮。
Element Plus封装el-dialog、el-table、el-select表格对话框，实现单选多选场景。
m0_67584973的博客
06-08 3853
Element Plus 封装表格对话框组件，实现单选以及多选的场景。
element-plus中el-table分页勾选记住勾选内容并限制数量
attach_uzi的博客
03-26 2646
element-plus中el-table分页勾选记住勾选内容并限制数量
element-plus el-table表格多选
a9874561328的博客
06-16 7898
自定义element-plus的多选
基于 Vue3 + Element-plus 封装的 Table 组件
白雾茫茫丶
03-26 1996
这篇文章介绍了一个名为vue3-xmw-table的项目，包括项目信息、使用方法、Table属性、Column属性、tableConfig配置项、Page配置项、Slot插槽和Events事件。文章还提供了一些代码示例和配置项说明。该项目已不再维护，但可以将源码拷贝到本地进行拓展。文章没有提到任何建议和缺少的内容。
vue3 + element-plus + ts 实现el-table 的拖动多选
Juihui822的博客
05-11 761
【代码】vue3 + element-plus + ts 实现el-table 的拖动多选。
vue3 - element-plus实现将table表格改为单选效果，将el-table表格实现单选，多选表格变为单选形式（Table多选框改成单选框，表格添加单选框，支持复杂表格嵌套数据多层勾选）
最新发布
高级前端工程师
03-31 7006
vue3，element plus，表格Table，el-table，复选框改为单选，element-ui 表格控件实现单选功能，把多选框调整为只能单选，如何将el-table多选表格变为单选形式，el-table单选，复选框设置为单选,且可通过选择行选中复选框，elementPlus多选表格变单选，表格多选改为单选,且去除表头的多选框，el-table多选框改为单选框，table多选表格如何实现单选，如何修改ui为圆形单选radio，check复选框多选变为单选，二级嵌套表格带下级如何修改为单选表格，选中
vue3+element plus el-table表格实现页面刷新后保留选中结果，全选禁用，指定行禁用
qq_67379705的博客
11-18 4165
在el-table标签中添加selection-change事件和row-key属性，并在type=selection的el-table-column标签上添加reserve-selection属性即可实现保留选中结果1.element plus 文档参考2.实际代码实现。
vue3+elementPlus实现列表的查询、翻页和查看功能
King博客
05-08 5831
vue3+elementPlus实现列表的查询、翻页和查看功能
elementPlus表格组件el-table实现只能同时选择一行，全选按第一行处理
夏日漱石的博客
10-03 2068
elementPlus表格组件el-table实现只能同时选择一行，全选按第一行处理
vue3+element-plus 表格全选和跨页勾选，以及全选全部功能
热门推荐
鹤渺的星球
10-30 1万+
这个功能，需要考虑很多交互的逻辑，因为我写的是【全选全部】是一个checkbox的勾选框，所以要考虑取消勾选的功能，自然就有了上面真正实现时的难点。但是如果这个功能是通过一个按钮控制的，点击按钮就代表全选所有操作，那么自然不用考虑取消勾选和禁用的逻辑，因为全选所有时，就已经走完批量全选的流程了。两种实现方式根据业务具体的调整，这次也是为了记录实现这个功能时遇到的问题和思考。
基于eleiment-plus的表格select控件
warrah 南极狼
03-11 640
属性，选择下拉表格中的行记录，这个表格不会关闭掉，只有当焦点失去的时候，这个对话框才会关闭掉。我希望，当我选中行记录或者双击行记录，这条页面关闭。如何解决这个问题呢？在使用的时候对控件进行二级封装，比如我的一个商品组件，再很多地方可以用到，于是。,但在使用中遇到了一些问题，希望能把过程记录下来，同时把这个问题修复掉。那么遇到的是什么问题呢？控件不是我写的，来源于。
vue3实现el-table表格单选功能以及默认选中某一行数据以及多选
weixin_53339757的博客
11-08 1万+
vue3实现el-table表格单选功能以及默认选中某一行数据
element-Plus 中table复选框勾选-跨页数据保存选中状态(跨页进行分页勾选)/复选框禁点 ，实现分页切换将选中数据回显
F02528的博客
03-14 1452
element-Plus复选框勾选-跨页数据保存选中状态(跨页进行分页勾选)/复选框禁点，分页切换将选中数据回显
Vue3+ElementPlus使用纯前端分页展示数据，全网最新教程
2401_87598890的博客
10-29 3486
文章详细解释了如何使用Vue3和ElementPlus来实现一个基本的分页功能，包括数据的准备、分页逻辑的实现以及如何在模板中展示分页组件。通过这种方式，可以在前端有效地展示和管理大量数据，提升用户体验。
vue3 Table数据预勾选、翻页、勾选操作、全选等操作数据更新
chenyubei的博客
03-11 742
vue3 Table数据预勾选、翻页、勾选操作、全选等操作数据更新
在vue3中element-plus el-table toggleSelection
03-15
### 如何在 Vue3 中使用 Element-Plus 的 `el-table` 实现 `toggleSelection` 功能 在 Vue3 和 Element-Plus 中，`el-table` 提供了一个用于控制行选中的方法 `toggleRowSelection`。此方法允许开发者动态地设置某...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值