Vue2: 创建一个可多选的Table，并回显数据选中状态

最新推荐文章于 2025-05-23 15:36:45 发布
最新推荐文章于 2025-05-23 15:36:45 发布
阅读量488 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/144853755
Vue 专栏收录该内容
59 篇文章 ¥19.90 ¥99.00
订阅专栏

如图，需要创建一个含有checkBox的允许多选的表格，并在表格初始化的时候，根据初始状态回显数据的选中状态，即设置哪条数据是选中的，哪条是未被选中的。

1、创建table

 手动添加一个el-table-column，设type属性为selection即可：

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <!--其它数据项-->
  </el-table>

2、初始化时回显人员选中状态


                

        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
Vue 3结合element plus（问题总结二）之 table组件实现多选和清除选中（在vue3中获取ref 的Dom）

				
			

			

				

					子时不睡的博客
				

				

					04-15
					
					2万+
					
				

			

		

		

			
				
Vue 3结合element plus（问题总结二）之 table组件实现多选和清除选中前言问题描述和原因问题解决小案例
前言
由于element plus组件里面使用的ts来写的，在用的时候属实有点小麻烦。
最后有个小案例，实现了多选和清除选中。希望对大家有帮助
先看官网Table组件的多选代码和效果。
<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100

			
		

	



                

            
              



	

		

			

				
					
el-table 多选 选中数据动态回显

				
			

			

				

					qq_37237495的博客
				

				

					03-11
					
					3218
					
				

			

		

		

			
				
实现后的效果：

需求
表格展示数据，选中的数据展示在表格下方，点击删除图标删除选中的数据，需要同步到table中更新选中状态
index.vue
<template>
 <el-button  @click="handleClick()" > 按钮</el-button>
 <table-dialog ref="tableDialog " :wildAxios="wildAxios" @callback="handleCallback"></table

			
		

	



              


  
              

                


	

		

			

				
					
vue element 表格多选时数据回显

				
			

			

				

					Hoodps的专栏
				

				

					10-18
					
					1878
					
				

			

		

		

			
				
在做项目时遇到需求是用户新增了内容之后，编辑此条信息的时候，要根据后台接口返回的数据进行相应的数据回显

在表格中有多选按钮时，回显数据如下


 //获取编辑权限列表数据回显
      GetEditAccount() {
        editAccount(this.formLabelAlign).then(response => {
          this.formLabe...

			
		

	





	

		

			

				
					
Vue 2与Element UI：自定义el-table表头样式！！！

					
最新发布

				
			

			

				

					小丁的博客
				

				

					05-23
					
					1268
					
				

			

		

		

			
				
在 Vue 2 和 Element UI 项目中，自定义 <el-table> 表格样式是常见的需求，尤其是表头的背景色、字体和边框样式。通过深入了解 Element UI 的内部 DOM 结构，可以使用 .el-table__header-wrapper 和 .el-table__fixed-header-wrapper 类名来精确控制表头样式。在 Vue 2 的 Scoped CSS 中，使用 :deep() 选择器可以穿透样式隔离，覆盖子组件的内部样式。

			
		

	



		

			
		



	

		

			

				
					
vue table的多选（简单购物车）

				
			

			

				

					qq_57147093的博客
				

				

					11-17
					
					1715
					
				

			

		

		

			
				
关于vue  table的多选，完成简单购物车

			
		

	





	

		

			

				
					
vue el-table多选回显、编辑结合el-tag

				
			

			

				

					一个有思想的新时代农民工的博客
				

				

					03-02
					
					2836
					
				

			

		

		

			
				
el-table多选和el-tag关联显示

			
		

	





	

		

			

				
					
vue2 el-table跨分页多选以及多选回显

				
			

			

				

					都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
				

				

					03-19
					
					690
					
				

			

		

		

			
				
vue2 el-table跨分页多选以及多选回显

			
		

	





	

		

			

				
					
el-table组件分页时选中数据时数据回显

				
			

			

				

					cyj0919的博客
				

				

					01-29
					
					800
					
				

			

		

		

			
				
两个需要注意的点 需要设置row-key  同时在在选择框需设置reserve-select 为true。

			
		

	





	

		

			

				
					
el-tree和el-table多选实现人员多选，并做回显，在回显区删除人员，表格同时取消选中状态

				
			

			

				

					HL_0423的博客
				

				

					04-03
					
					1953
					
				

			

		

		

			
				
el-tree和el-table多选实现人员多选，并做回显，在回显区删除人员，表格同时取消选中状态
1、左树又表，左边树节点切换，table显示节点下对应的人员，并做分页显示
2、下方回显区显示已经勾选的人员，不受树节点切换和页码切换影响
3、回显区人员删除，对应树节点下的表格中人员选中状态改为非选中
效果如下图

大体思路
1、把回显区删除的数据进行存储
2、然后tableData更新以后就查找...

			
		

	





	

		

			

				
					
elementui:el-table支持搜索、切换分页多选功能，以及数据回显

				
			

			

				

					weixin_60172238的博客
				

				

					02-07
					
					862
					
				

			

		

		

			
				
el-table支持搜索、切换分页多选功能，以及数据回显

			
		

	





	

		

			

				
					
Vue2表格（Table）

					
热门推荐

				
			

			

				

					Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
				

				

					08-13
					
					2万+
					
				

			

		

		

			
				
展示行列数据。

			
		

	





	

		

			

				
					
vuetable-2：简化数据表！ -Vue 2.x的数据表组件。 请参阅以下文档

				
			

			

				

					02-06
				

			

		

		

			
				
Vuetable-2-数据表简化！
Vuetable-2 v2.0-beta现已上市！
 请参阅分支。
Vuetable-2适用于Vue 2.x，vuetable适用于Vue 1.x
 如果您正在寻找适用于Vue 1.x的版本，请转到 。
文档和教程
文档仍在开发中，但是您可以在查看它。 感谢@cristijora的帮助。
 同时，退房
有后续项目的。 它应该足以让您入门。
 使用Vuetable-2和Laravel 5.4和Laravel-Mix的
如果您以前使用过Vuetable for Vue 1.x，请查看已以获取有关Vuetable for Vue 1.x信息，以及有关如何从Vuet

			
		

	





	

		

			

				
					
VUE学习（三）-VUE集成elementui

				
			

			

				

					b422761838的专栏
				

				

					11-22
					
					512
					
				

			

		

		

			
				
1.安装element-ui


cnpm i element-ui -S

2.修改main.js


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router fro

			
		

	





	

		

			

				
					
vue中用Element-ui封装表格(table)组件动态渲染数据展示

				
			

			

				

					weixin_53541596的博客
				

				

					07-06
					
					1056
					
				

			

		

		

			
				
Vue中使用Element-ui封装表格(table)组件动态渲染数据展示

			
		

	





	

		

			

				
					
Vue表格跨页多选：实现高效的数据选择与操作

				
			

			

				

					assjzxcvb的博客
				

				

					03-06
					
					2755
					
				

			

		

		

			
				
在 Vue 组件中，我们可以使用 el-table 标签创建表格，并使用 el-table-column 标签定义表格列。为了实现跨页多选功能，我们需要在 el-table 标签中添加 @selection-change 事件，用于监听表格选择状态的变化。在 Vue 中，我们可以使用表格组件来展示数据，并实现跨页多选功能，以便用户能够高效地进行数据选择和操作。<el-table-column prop="date" label="日期" width="180"></el-table-column>

			
		

	





	

		

			

				
					
vue2，table虚拟滚动使用vxe-table

				
			

			

				

					qq_34631220的博客
				

				

					01-21
					
					537
					
				

			

		

		

			
				
【代码】vue2，table虚拟滚动使用vxe-table。

			
		

	





	

		

			

				
					
记录--Vue2屎山之 Table 屎山

				
			

			

				

					林恒的博客
				

				

					11-14
					
					227
					
				

			

		

		

			
				
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助



前言
Vue2 将在 2023 年年底停止维护了，但是 Vue2 的代码却不会在 2023 年消失，还会越来越多；难以想象几十万行或者几百万行的 Vue2 代码迁移到 Vue3，这是不可能办到的；
老一点的前端程序员肯定经历过把大型项目从 jQuery 迁移到 Vue/React/Angular 的经历，那是一次思想的大变革，也...

			
		

	





	

		

			

				
					
vue制作一个简单的支持多选的table

				
			

			

				

					tank7488的博客
				

				

					04-26
					
					357
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">&...

			
		

	





	

		

			

				
					
vue2办公系统笔记之Table篇

				
			

			

				

					u013486889的博客
				

				

					12-01
					
					1081
					
				

			

		

		

			
				
在内容过长时想要内容全部显示，列自适应内容



解决方案：

可安装 af-table-column 组件，此组件是基于element-ui 组件库的 af-table-column 组件, 支持自适应列宽功能


npm install af-table-column

安装完成后要在main.js中导入（和elementUI的导入方式一样）


import ElementUI from 'element-ui';
import AFTableColumn from 'af-table-column.

			
		

	





	

		

			

				
					
el-table多选的数据回显有问题 无法正确显示

				
			

			

				

					03-14
				

			

		

		

			
				
<think>嗯，用户遇到了el-table多选数据回显的问题，无法正确显示已选项。我需要先回忆一下Element UI中el-table的多选功能是如何工作的。通常，使用el-table时，通过设置type="selection"来启用多选列。数据回显的关键在于row-key和reserve-selection属性，以及正确设置selected数组。

首先，row-key必须正确绑定到每行数据的唯一标识字段，比如id。如果row-key没有正确设置，el-table可能无法正确跟踪每一行的选中状态，导致回显失败。另外，在初始化表格数据后，可能需要手动调用toggleRowSelection方法来设置初始选中的行。这是因为如果数据是异步加载的，比如从API获取，表格可能在数据加载前已经渲染，这时候需要等数据加载完毕后再设置选中状态。

用户可能在异步加载数据的情况下，没有在数据加载完成后调用toggleRowSelection，或者没有正确设置row-key，导致表格无法正确识别每行的唯一性。此外，如果保留选中状态的功能未开启（reserve-selection），在分页或数据更新时，之前的选中状态可能会丢失，影响回显效果。

接下来，我需要提供一个示例代码，展示正确的配置方法。包括设置row-key，使用reserve-selection，以及在数据加载后调用toggleRowSelection。同时，需要解释每个步骤的作用，帮助用户理解问题所在。

然后，要列举常见的问题原因，比如row-key未设置或错误、未在数据加载后设置选中状态、未使用reserve-selection等。并针对每个原因给出解决方案，比如确保row-key正确绑定唯一字段，在数据加载完成后遍历选中数组并调用toggleRowSelection，以及在多选列上添加reserve-selection属性。

最后，提出相关问题，覆盖el-table的其他常见问题，比如分页保留选中、默认排序、动态加载数据保持选中状态，以及自定义筛选逻辑。这些问题可以帮助用户进一步理解和解决类似的问题。</think><<
当使用Element UI的el-table进行多选数据回显时，常见问题通常由以下原因引起：

1. **未正确设置row-key**
```vue
<el-table
  :data="tableData"
  ref="multipleTable"
  row-key="id" // 必须设置唯一标识
  @selection-change="handleSelectionChange">
  <el-table-column type="selection" reserve-selection></el-table-column>
  // 其他列...
</el-table>
```
**原因**：当表格数据存在分页或动态更新时，必须通过row-key维护行标识，否则组件无法正确追踪选中状态

2. **异步数据加载时序问题**
```vue
async loadData() {
  const res = await fetchData();
  this.tableData = res.data;
  
  // 必须在数据加载完成后执行
  this.$nextTick(() => {
    this.selectedRows.forEach(row => {
      const target = this.tableData.find(item => item.id === row.id);
      this.$refs.multipleTable.toggleRowSelection(target, true);
    });
  });
}
```
**原因**：需要在数据完全加载到DOM后，通过refs手动设置选中状态

3. **未使用reserve-selection属性**
```vue
<el-table-column 
  type="selection" 
  reserve-selection 
  :reserve-selection="true">
</el-table-column>
```
**原因**：当表格存在分页时，该属性可以保持跨页的选中状态记录

完整解决方案示例：
```vue
<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    row-key="id"
    @selection-change="handleSelectionChange">
    <el-table-column 
      type="selection" 
      reserve-selection>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      selectedRows: [] // 存储需要回显的已选数据
    };
  },
  async mounted() {
    await this.loadData();
    this.restoreSelection();
  },
  methods: {
    async loadData() {
      // 模拟异步请求
      this.tableData = await fetchData(); 
    },
    restoreSelection() {
      this.$nextTick(() => {
        this.selectedRows.forEach(selected => {
          const row = this.tableData.find(item => item.id === selected.id);
          if (row) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    }
  }
};
</script>
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值