三、vben框架BaseTable的形似合并单元格，其实是单条的写法

已于 2022-08-18 17:50:46 修改
阅读量1.5k 收藏 2
点赞数 1
分类专栏： Vben框架使用中遇到的问题 文章标签： 前端 vue.js typescript 前端框架
于 2022-08-18 16:48:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43185384/article/details/126406362
版权
本文介绍了如何在vben前端框架中模拟合并单元格的效果。通过数据格式设计、页面代码编写和样式覆盖，实现了在保持每页10条数据不变的情况下，将多条信息合并显示为单条，达到了类似合并单元格的视觉效果。
摘要由CSDN通过智能技术生成

        产品在设计原型的时候说可以将两条信息合并成一条，然后展示出来。如果使用合并单元格的话，那么一页就不能保证是使用10条了，后端的意见是返回10条，增加个字段包含合并的多个属性，让前端自己显示去，这就有点为难我胖虎了，最后花了点小技巧实现了，先看效果。

效果图

看着还是挺好看的，和合并单元格的形式没有什么不同。

数据格式     

再看数据格式，看，返回了10条数据，会根据我请求的pageSize来返回条数，只是通过mergeList判断他包含了几个，然后给展示出来。

页面代码

现在咱们就来看，代码怎么写，先定义baseTable，记得增加class名称，用来改变原有的样式。


                

        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  arguments_zd
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
十六、Vben框架table内部合并行

				
			

			

				

					张先森的博客
				

				

					02-02
					
					568
					
				

			

		

		

			
				
在vben项目中合并内部的行是一个常规的操作，以前我们说过如果是一条数据内部只需要分割拿高撑开就可以实现，在第三章的时候我们已经讲过了，那么如果是不定的条数合并为一条数据呢，怎么能够实现呢，下面我们就来讲讲。

			
		

	



                

              
                



	

		

			

				
					
vben or ant design vue table 根据数据动态合并单元格

				
			

			

				

					m0_49039063的博客
				

				

					07-25
					
					453
					
				

			

		

		

			
				
【代码】vben or atn design vue table 根据数据动态合并单元格。

			
		

	



                


  
              

                


	

		

			

				
					
jeecgboot 、vue3 、BasicTable 表格单元格合并

					
最新发布

				
			

			

				

					
				

				

					08-08
					
					254
					
				

			

		

		

			
				
转载自https://blog.csdn.net/qq_42657934/article/details/134944028。js文件定义表格单元格合并公共方法。

			
		

	





	

		

			

				
					
Vben admin - 表格组件合并单元格

				
			

			

				

					xiaofiy的博客
				

				

					10-27
					
					913
					
				

			

		

		

			
				
合并单元格

			
		

	



		

			
		



	

		

			

				
					
vue-admin-block框架中合并单元格

				
			

			

				

					Miracle_Gaaral的博客
				

				

					08-11
					
					395
					
				

			

		

		

			
				
ITable.vue


<template>
<div class="i-table">
  <Table ref="table" :stripe="stripe" :border="border" :height="height" :row-class-name="rowClassName" :loading="loading" :columns="columns" :data="data"  @on-selection-change="handleSelectionCha

			
		

	





	

		

			

				
					
vben框架是什么

				
			

			

				

					kjl536566的博客
				

				

					05-12
					
					897
					
				

			

		

		

			
				
目标是为开发中大型项目提供开箱即用的解决方案。它包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，帮助用户快速搭建企业级中后台产品原型。此外，Vben也可以作为一个示例，用于学习vue3、vite、ts等主流技术。

			
		

	





	

		

			

				
					
antd vue table跨行合并单元格,并且自定义内容实例

				
			

			

				

					01-18
				

			

		

		

			
				
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图：  源码：  export default {  data() {  return {  pic95: require('@/assets/produit/95.png'),  pic99: require('@/assets/produit/99.png'),  ...

			
		

	





	

		

			

				
					
antd-vue table跨行合并单元格

				
			

			

				

					peppa_pig的博客
				

				

					12-18
					
					2068
					
				

			

		

		

			
				
效果图：



直接贴代码


<a-table
    :columns="columns" :data-source="statisticData" bordered size="small"
    :pagination=false :scroll="scrollY"
    :rowKey="(record,index)=>{return index}">


const columns = [
  {
    title: '资产',
    colSpan: 3,
   ..

			
		

	





	

		

			

				
					
八、Vben框架动态生成可编辑Table

				
			

			

				

					张先森的博客
				

				

					02-27
					
					1154
					
				

			

		

		

			
				
Vben框架动态生成可编辑Table

			
		

	





	

		

			

				
					
vben:vue3后台管理项目框架

					
热门推荐

				
			

			

				

					浩星
				

				

					02-28
					
					3万+
					
				

			

		

		

			
				
前言：

    Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue、TypeScript的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习vue3、vite、ts等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

官方入口：...

			
		

	





	

		

			

				
					
vue vben admin 中的 table 组件使用

				
			

			

				

					阿臻
				

				

					03-30
					
					939
					
				

			

		

		

			
				
非官方的参考文档, 感觉比官方的更实用
useTable 使用

我们是不会被困难打败的, 只会越战越勇!

开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法
需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的api, 这里着重去看怎么适配表格需要的响应数据结构
...

			
		

	





	

		

			

				
					
探索未来前端：Vben3框架深度解析

				
			

			

				

					gitblog_00053的博客
				

				

					04-27
					
					831
					
				

			

		

		

			
				
探索未来前端：Vben3框架深度解析
项目地址:https://gitcode.com/vbenjs/vben3
Vben3 是一个基于Vue3构建的企业级后台管理系统模板，旨在提供一套完整、高效的前端解决方案。本文将深入探讨其技术特性、应用场景和优势，帮助开发者更好地理解和利用这一优秀项目。
项目简介
Vben3以简洁优雅的设计风格和强大的功能特性，为开发高质量企业应用提供了便利。它融合了Ant...

			
		

	





	

		

			

				
					
十、vben框架如何使用table来写报表

				
			

			

				

					张先森的博客
				

				

					02-27
					
					631
					
				

			

		

		

			
				
vben框架如何使用table来写报表

			
		

	





	

		

			

				
					
基于Vben+Admin+Ts+AntDesign+vite+Vue3框架遇到的问题，以及组件的使用

				
			

			

				

					WhoopD的博客
				

				

					08-24
					
					2195
					
				

			

		

		

			
				
vben+admin框架中使用场景

			
		

	





	

		

			

				
					
table合并单元格

				
			

			

				

					Jovan的博客
				

				

					08-11
					
					3888
					
				

			

		

		

			
				
遇到这种设计，记录一下




<el-table
      :data="tableDataNew"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      &lt...

			
		

	





	

		

			

				
					
一， 前端架构Vben页面结构源码分析

				
			

			

				

					bbill的博客
				

				

					01-18
					
					1126
					
				

			

		

		

			
				
本文总结vben,jeecgboot前端页面登录前后过程，帮助学习源码，定位问题，扩展功能，避坑

			
		

	





	

		

			

				
					
二、Vben框架自定义BasicTable的form组件

				
			

			

				

					张先森的博客
				

				

					08-18
					
					5628
					
				

			

		

		

			
				
Vben框架自定义BasicTable的form组件

			
		

	





	

		

			

				
					
vben框架实现可编辑单元格单个校验

				
			

			

				

					06-09
				

			

		

		

			
				
您好，针对您的问题，我可以给出以下思路：

1. 在单元格编辑完成后，触发校验事件，可以使用 vben 中的表单校验插件（@form-create/validator）来进行校验，或者自己手写校验方法。

2. 校验方法可以在表单校验插件中定义，或者在单元格编辑完成后进行触发。可以通过正则表达式、条件判断等方式来对单元格内容进行合法性校验。

3. 如果校验不通过，可以使用 vben 中的消息提示插件（@vbenjs/vben-message）来进行提示，或者自己手写提示方法。

4. 如果校验通过，则可以将单元格内容更新到数据源中。

需要注意的是，如果需要进行批量校验，可以在表单中添加多个可编辑单元格，然后在表单提交前进行整体校验。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
arguments_zd

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值