前端心得 - vue中多选框的动态渲染、全选反选功能及数据绑定

最新推荐文章于 2025-04-22 17:28:37 发布
最新推荐文章于 2025-04-22 17:28:37 发布
阅读量5k 收藏 4
点赞数
分类专栏： 前端心得 文章标签： vue 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42841738/article/details/91460295
版权
这篇博客介绍了在Vue中如何实现多选框的动态渲染、全选反选功能以及数据绑定。作者分享了在实际项目中遇到的问题，包括使用axios获取数据、异步处理、DOM操作的避免以及如何处理勾选状态的同步。通过代码示例详细解释了每个关键步骤，特别强调了全选反选功能的实现，以及单个选项被选中时如何更新数据绑定的labelIds数组。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue中多选框的动态渲染、全选反选功能及数据绑定

应该是第一篇真正意义上的技术博客吧。。。

本篇内容主要是介绍一下遇到如题的需求时博主给出的解决方法，其中还遇到了不少坑（压住了自己企图写DOM操作的双手）

晚上要加班，所以时间不是很多只能匆忙写完2333

目前还是实习生，还请多多指教~~~

前情提要

项目后台的前端需要做一个文档编辑的页内组件，已经到了与后端的api对接的阶段，但是测试服务器还没有上线，所以用mock做了一模一样的接口拦截了ajax

内页大概是长这样：
内页
ui框架使用的是iView，右侧操作栏的按钮使根据表格中状态数据动态渲染出来的。其中“查看”和“编辑”按钮会路由到编辑页面。不同的是“查看”并无编辑权限（通过传递一个boolean值给组件内元素的:disabled属性解决）

编辑页面长这个样子：
编辑页面
路由props传递目标文章的id值，在页内mounted时获取数据并渲染进表单各元素，其中“渠道/门店范围”中的“级别”选项和“区域”选项为动态加载（业务需要）。

代码如下：

代码块1

        <ul class&
最低0.47元/天 解锁文章
vue之带多选框的表格demo
清风自来
04-08 2153
最近在用vue做项目，下面就来分享一个带一列多选按钮的表格demo，有需要的小伙伴尽管拿走： 效果图如下所示： 代码如下所示： <template> <div> <el-row> <el-col :span="24"> <div class="grid-conte...
element vue 动态单选_vue-element 动态单选多选全选
weixin_31524201的博客
12-23 284
实现效果如图 数据格式如下：pps: [{"code":"6","createTime":"2018-09-07 00:00:00","des":"可选择居住情况","id":"6","key":"liveType","multi":false,"name":"居住情况","no":1,"status":1,"updateTime":"2018-09-07 00:00:00","usages":[...
VUE实现elementUI多选框动态渲染
qq_62175972的博客
05-04 757
1. 通过:check属性控制多选框动态勾选，但由于VUE特性多选框并不会实时渲染。2. 实现VUE组件实时渲染，可以设置:key属性进行强制渲染。② 由①所勾选的多选框，取消勾选时会删除数据库对应记录。① 若数据库中存在记录，则多选框会动态自动勾选。
Vue el-checkbox 虚拟滚动解决多选框全选卡顿问题 - 高性能处理大数据量选项列表
最新发布
misschengispink的博客
04-22 997
在我们开发项目中，经常会遇到需要展示大量选项的多选框场景，比如权限配置、数据筛选等。当选项数量达到几百甚至上千条时，传统的渲染方式全选时会非常卡顿，导致性能问题。本篇文章，记录我使用通过虚拟滚动实现大数据量全选卡顿问题~封装成组件啦可以直接用！
iView的树的render函数渲染-多选框、图标、图片
leilei__66的博客
08-08 2565
iView的树的render函数渲染 官网：渲染函数& JSX 使用强大的 Render 函数可以自定义节点显示内容和交互，比如添加图标，按钮等。 Render 函数的第二个参数，包含三个字段： root ：树的根节点 node ：当前节点 data ：当前节点的数据 通过合理地使用 root、node 和 data 可以实现各种效果，其中，iView 给每个节点都设置了一个 nodeKey 字段，用来标识节点的 id。 两种写法： Render 函数分两种，一种是给当前树的每个节点都设置同
Vue 手动实现动态多选
weixin_65084919的博客
12-14 1259
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- <link rel="st
vue2.0在table中实现全选和反选的示例代码
08-28
Vue 2.0 中 Table 全选和反选的示例代码 在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式，本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的...
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
vue使用监听实现全选反选功能
08-27
在 Vue 中实现全选反选功能是一个常见的需求，特别是在项目中需要处理大量数据时。本文将介绍如何使用 Vue 监听实现全选反选功能，通过监听子集的变化来更新全选按钮的状态。 标题解释 本文的标题“Vue 使用监听...
vue实现全选、反选功能
08-30
在实现全选、反选功能时，需要使用Vue中的v-model指令来绑定checked状态，并使用v-for指令来循环渲染数据。在本例中，我们使用了嵌套的v-for指令来渲染父子关系的数据。 在 HTML 结构中，我们使用了v-for指令来循环...
关于vue如何动态渲染单选框（radio）同时动态渲染页面
weixin_44811540的博客
10-27 5551
关于vue如何动态渲染单选框（radio）同时动态渲染页面 自己做的一个练习，这里记录一下。 首先是template部分 <template> <div class="hello"> <div v-for="item in msg" :key='item'>//首先循环渲染列表 <input type="radio" :id="it...
vue点击一个多选框导致所有的多选框都选中
weixin_43355618的博客
07-06 1452
vue点击一个多选框导致所有多选框都选中
vue 循环勾选框,Vue + element 实现多选框组并保存已选id集合
weixin_31937605的博客
03-27 1657
Vue + element 实现列表复选框并保存已选id集合1.引用element组件多选框组，checkList为提交后台数据得数组，tableData为数据源2.初始化tableData集合3.循环遍历需要显示得值4.在多选框组上添加chang事件tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},...
vue 带全选和多选的表格怎么写_vue checkbox 全选 数据的绑定及获取和计算方法
weixin_39672979的博客
01-17 232
html第一个CheckBox全选第二个定义return {dianji:'12',list: [],value:{},value1:{},checkAll: false,checkArr:[],checkboxModel:[],wodeshi:'0',checked:false}lll: function(){var self = this;var sum=0;setTimeout(functi...
vue实现把数据渲染到下拉框中，点击其中一个数据，后面接上文本
Chenyang_lm的博客
09-17 539
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https:
Vue学习笔记 - 页面数据渲染的方式（二）
HVENLY的博客
05-26 1256
该篇文章主要讲了Vue中渲染数据的第6和第7种方式，即v-model和v-for这两种方式。其余5种方式请点击Vue学习笔记 - 页面数据渲染的方式（一）进行查看 目录6.v-model7.v-for 6.v-model 1.定义：唯一的一个可以实现双向数据绑定的指令，单向数据只能：v-m或m-v，而双向绑定v变m就变，m变，v就变 2.作用元素：只有表单类元素能被v-model渲染 3.原理：v-model实际上是一个语法糖，它的本质包含两个操作 1）v-bind：绑定一个value属性，实现m变v变.
【vue】 select多选框渲染错误的问题
weixin_45792959的博客
09-22 317
change=“$forceUpdate()” 是一个Vue.js的指令，用于强制更新组件的视图。当Select多选框的值发生变化时，使用该指令可以强制重新渲染组件，以确保视图与数据的同步。这在某些情况下是必要的，例如当你在选择项发生变化后需要立即更新其他组件时，可以使用该指令来触发重新渲染。
vue手写多选（获取选中的值）
wsxDream的博客
04-02 1677
话不多说，直接上代码 先展示样式 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402130920121.png#pic_center) <li v-show="isShow_clear" style=" display: flex; margin-top: 10px; background: rgba(204, 2
Vue中使用v-for绑定多组复选框和单选框
weixin_30466953的博客
07-26 7934
## Vue 中 v-for 渲染多组复选框, 1、要用v-for绑定多组复选框，首先v-for绑定的数据一定是一个动态的。比如我用了一个数组qitem[doneNum].body ,doneNum是动态变化的。 2、input类型为checkbox 的标签上的v-model绑定了option.checked ,这个属性在qitem的body中是没有的。他会创建并这个属性（这个属性是一个布...
vxe-table和vxe-pager实现多页数据能够分页全选功能 vue3
03-27
<think>嗯，用户的问题是在Vue3中使用vxe-table和vxe-pager实现跨多页数据的分页全选功能。我需要先理解用户的具体需求。分页全选通常指的是用户可以选择当前页的所有数据，或者在翻页时保持之前选中的数据，同时可能还需要一个“全选所有页”的功能。 首先，我应该回顾vxe-table和vxe-pager的文档，看看它们提供的API和事件。比如，vxe-table可能有复选框列，支持选中事件，而vxe-pager处理分页逻辑。用户可能需要监听分页变化事件，以确保翻页时已选数据不会丢失。 接下来，考虑如何存储已选中的数据。通常，在分页情况下，已选数据需要存储在组件的一个变量里，比如一个数组。每次翻页时，当前页的数据可能会变化，但需要保持其他页的选中状态。因此，当用户切换页面时，需要将当前页的选中项合并到总的数据中。 然后，处理全选当前页的功能。vxe-table可能提供了全选当前页的方法，或者需要手动遍历当前页的数据，将它们添加到已选数组中。同时，用户可能还需要一个“全选所有页”的复选框，这需要与后端交互获取所有数据，或者在前端处理，但通常分页数据不在前端，所以可能需要后端接口支持获取所有数据ID，然后在前端记录这些ID。 还需要考虑性能问题，比如大量数据选中时，存储和处理是否高效。可能需要使用Set数据结构来快速查找和去重。另外，分页切换时，如何高亮显示已选中的行，这可能需要自定义行样式，根据数据ID判断是否选中。 用户提供的引用中提到了vxe-table的复选框分页选择及回显数据，引用2提到需要处理行点击和复选框点击事件，可能需要监听vxe-table的相关事件，比如toggleCheckboxRow和select-all。另外，引用3提到了使用节流函数优化全选操作，可能在全选所有页时需要注意性能，避免频繁调用接口，可以设置定时器或者防抖处理。 在实现步骤上，可能需要： 1. 定义存储已选数据的变量，比如selectedIds，使用Set来存储选中的行ID。 2. 监听vxe-table的复选框选中事件，将当前页选中的行ID添加到selectedIds中，或移除。 3. 处理全选当前页时，获取当前页的所有行ID，并合并到selectedIds。 4. 分页切换时，更新当前页数据，并在渲染时根据selectedIds设置复选框的选中状态。 5. 实现全选所有页的功能，可能需要调用API获取所有数据的ID，然后全选这些ID。 6. 在模板中使用vxe-table的checkbox配置，绑定相关事件和方法，比如@toggle-checkbox-row和@select-all。 7. 使用vxe-pager的分页事件，在页码变化时更新当前页数据，并保持已选中的状态。 可能遇到的问题包括：分页时如何保持跨页选中，如何高效存储大量选中项，以及全选所有页时如何获取所有数据的ID。此外，回显选中状态时，需要确保每次分页加载数据后，复选框能正确显示是否被选中，这可能需要设置行的checkbox的checked属性，通过判断该行ID是否在selectedIds中。 最后，需要编写示例代码，展示如何整合这些功能，并处理相关事件和数据。同时，提醒用户可能的注意事项，比如性能优化、后端接口支持等。</think>以下是在Vue3中使用vxe-table和vxe-pager实现跨页分页全选的完整解决方案： ### 一、实现思路 1. 使用$refs.tableRef.getCheckboxRecords()获取选中数据[^2] 2. 通过vxe-pager的@page-change事件处理分页逻辑 3. 维护两个数据集合： - `selectedIds: Set<key>` 存储所有已选ID - `currentPageKeys: Set<key>` 存储当前页存在的已选ID ### 二、核心代码实现 ```vue <template> <vxe-table ref="tableRef" :data="currentPageData" @toggle-checkbox-row="handleSelect" @select-all="handleSelectAll" > <vxe-column type="checkbox" width="60"></vxe-column> <!-- 其他列 --> </vxe-table> <vxe-pager :current-page="currentPage" :page-size="pageSize" :total="total" @page-change="handlePageChange" ></vxe-pager> </template> <script setup> import { ref, reactive } from 'vue'; const selectedIds = reactive(new Set()); // 所有页选中ID集合 const currentPageKeys = reactive(new Set()); // 当前页存在的已选ID const currentPageData = ref([]); // 当前页数据 const currentPage = ref(1); // 分页变化处理 const handlePageChange = ({ currentPage, pageSize }) => { loadPageData(currentPage).then(data => { currentPageData.value = data; updateCurrentPageKeys(); }); }; // 更新当前页存在的已选ID const updateCurrentPageKeys = () => { currentPageKeys.clear(); currentPageData.value.forEach(row => { if (selectedIds.has(row.id)) { currentPageKeys.add(row.id); } }); }; // 单个复选框选择 const handleSelect = ({ row, checked }) => { checked ? selectedIds.add(row.id) : selectedIds.delete(row.id); updateCurrentPageKeys(); }; // 全选当前页 const handleSelectAll = ({ checked }) => { currentPageData.value.forEach(row => { checked ? selectedIds.add(row.id) : selectedIds.delete(row.id); }); updateCurrentPageKeys(); }; // 全选所有页（需后端支持） const selectAllPages = async () => { const allIds = await fetchAllIds(); allIds.forEach(id => selectedIds.add(id)); updateCurrentPageKeys(); }; </script> ``` ### 三、关键实现细节 1. **跨页数据保持**：使用`Set`数据结构存储选中ID，确保唯一性和快速查找 2. **状态同步**：通过`updateCurrentPageKeys`同步当前页选中状态 3. **性能优化**： - 使用`Set`代替数组提升查找效率 - 分页加载时仅维护ID集合而非完整数据[^3] 4. **视觉反馈**：通过计算属性实现复选框的中间状态： ```js const checkboxIndeterminate = computed(() => currentPageKeys.size > 0 && currentPageKeys.size < currentPageData.value.length ); ``` ### 四、注意事项 1. 全选所有页功能需要后端提供获取所有ID的接口 2. 大数据量场景建议使用Web Worker处理ID集合操作 3. 需要为表格设置`row-id`属性确保行标识唯一性 4. 分页切换时建议添加加载状态提示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值