Vue+Elementui实现多个表格table合并

最新推荐文章于 2024-05-04 16:38:38 发布
最新推荐文章于 2024-05-04 16:38:38 发布
阅读量2.5k 收藏 6
点赞数
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41520636/article/details/118122944
版权

技术关键点

slot="append"

这条代码用于卡槽，在表格末尾处添加你想要的样式

:show-header="false"

这条代码是用来忽略表格头

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.15.2/lib/index.js"></script>
	<style>
		@import url("//unpkg.com/element-ui@2.15.2/lib/theme-chalk/index.css");
	</style>
	<body>
		<div id="app">
			<el-table :data="tableData" border>
				<el-table-column align="center" min-width="80%" prop="id" label="ID">
				</el-table-column>
				<el-table-column align="center" min-width="80%" prop="name" label="名称">
				</el-table-column>
				<el-table-column align="center" min-width="80%" prop="money" label="金钱">
				</el-table-column>
				<div slot="append" style="text-align: center">
					<!--在此处添加你想要插入在表格最后一行的内容-->
					<el-table :data="costTableData" border :show-header="false">
						<el-table-column align="center" min-width="80%" prop="name" label="名字">
						</el-table-column>
						<el-table-column align="center" min-width="80%" prop="fy" label="费用">
						</el-table-column>
					</el-table>
				</div>
			</el-table>
		</div>
	</body>
	<script>
		var Main = {
			data() {
				return {
					tableData: [{
							id: 0,
							name: '西瓜',
							money:'2'
						},
						{
							id: 1,
							name: '冬瓜',
							money:'1'
						},
						{
							id: 2,
							name: '南瓜',
							money:'2'
						},
					],
					costTableData: [{
							name: '一个西瓜价格',
							fy: '25'
						},
						{
							name: '一个冬瓜价格',
							fy: '12'
						},
					],
				}
			},
			methods: {

			}
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>

</html>

 

hikktn
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
elementUi 中table表尾插入行
qq_38502227的博客
07-11 1万+
<template> <div> <el-table stripe class="jx-table" :data="tableData" border ref="table" style="width: 100%"> <el-table-column prop="firstColumn" :label="firstColLabel"...
前端随记 - element-ui 实现table行合并 与 基础 table 合并
qq_44787943的博客
06-08 617
（一）基础 table 合并 代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="root"> <table border="1" width="400"> <tr&gt
Vue + Elementui实现多标签页共存的方法
10-16
主要介绍了Vue + Elementui实现多标签页共存的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
telement-plus中table合并行或者列
最新发布
Xiaochen1239的博客
05-04 402
element-plus中会有自带的合并方法通过给 table 传入方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。
Vue ＜transition-group＞ 多组table滚动显示数据 过渡效果案例2
zbailing的博客
03-10 1460
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例2</title> <!-- 上篇文章的代码，实际使用中发现有bug 比如：如果文本过长，有需要折行的文本，在滚动时，会因为positio...
vue怎么在一个页面里写两个表格_vue给多个el-table嵌套表单验证
weixin_35859336的博客
02-05 5821
表格中嵌套使用表单验证表格是el-table自动获取的后台数据，每行都有el-input的验证，这样一个rules的规则就不能匹配到每一行，所以要是用动态的prop和rules规则ref="contionsTable":data="list.activityGifts"stripetooltip-effect="dark":header-cell-style="{background:'rgb(2...
elements ui vue table 多选操作
朝立的博客
11-15 1214
前言:总结一下 elements ui vue 框架使用中出现的问题，目前来看vue 的开发代码的质量和效率 要高于传统的 js 框架，至少在管理系统的开发上面，代码量相对比较小。toggleSelection 方法 将数据 给table 对象 编辑的时候保持 选中状态。具体在实际使用中基本都是带分页的，此处的要点。触发选择操作，每次会传 table 数据对象。可以参考 elements ui 官网。标识 唯一 table 行。多选 table 类型。
ElementUI中为table增加小计/合计
weixin_40863414的博客
10-14 9744
ElementUI中只有为表格增加一个合计的功能，但是有些时候可能会遇到同时增加小计/合计的功能，可以利用slot='append’去实现多个合计功能。 文章地址： ElementUI中为table增加小计/合计 ...
vue+elementUI实现动态表格合并单元格.zip
09-26
vue+elementUI实现动态表格，表格可编辑，动态增删行，自动合并单元格。
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2.0+ElementUI实现表格翻页的实例
08-29
Vue2.0+ElementUI实现表格翻页的实例 本文主要讲解了使用 Vue2.0 和 ElementUI 实现表格翻页的实例。该实例中，作者使用了 ElementUI 的表格组件，并使用 Pagination 分页器来实现表格的翻页功能。同时，作者还使用...
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
一、分析需求 这里先上一张图说明 需求 ： 根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free 和 pay 三个属性，且这三个都是数组格式。）：   渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定义的是 area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段
vue+elementUI实现表格关键字筛选高亮
12-29
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： <!-- 筛选 --> 筛选： 请输入关键字> <!--
elementui组件table表，同时合并列和行的问题
aofensuo8016的博客
08-15 1107
项目需要实现每三行合并两行，然后每三行合并三列，下图这种效果： 代码： <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column ...
element表格，表格合并
Jk200165的博客
12-05 161
element表格合并。
element table组件表格里面套表格
热门推荐
weixin_42928456的博客
11-29 1万+
在我的项目里面有这样一个需求，表格里面展开项是一个表格，且嵌套的表格头部是动态列。以下是html代码，tableData是外层表格的数据(下面我就将外层表格称为大表格，里面嵌套的表格称为小表格) &amp;lt;el-table :data=&quot;tableData&quot; align=&quot;center&quot; stripe&amp;gt; &amp;lt;!-- 展开项表格开始位置 type=&amp
vue elementui table 多个表格table合并、多个合并列
DarlingYL的博客
06-29 2478
vue elementui table 多个表格table合并、多个合并列
Vue+ElementUI table实现表格分页
06-10
要实现表格分页，可以使用 ElementUI 提供的 el-pagination 组件，同时结合 el-table 组件使用。 1. 在 template 中添加 el-pagination 组件和 el-table 组件： ``` <template> <div> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"> </el-pagination> <el-table :data="tableData" border> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> ``` 2. 在 data 中定义表格数据、分页相关数据以及每页显示的条目数： ``` <script> export default { data() { return { tableData: [], // 表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页显示条目数 total: 0 // 总条目数 } }, methods: { handleCurrentChange(val) { this.currentPage = val; // 根据当前页码获取对应的数据 this.getData(); }, getData() { // 根据当前页码和每页显示条目数获取对应的数据 // 更新表格数据和总条目数 } } } </script> ``` 3. 在 mounted 中调用 getData 方法获取初始数据： ``` <script> export default { mounted() { this.getData(); }, methods: { // ... } } </script> ``` 4. 在 getData 方法中根据当前页码和每页显示条目数获取对应的数据，更新表格数据和总条目数： ``` <script> export default { methods: { async getData() { const res = await axios.get('/api/data', { params: { page: this.currentPage, size: this.pageSize } }); this.tableData = res.data.list; this.total = res.data.total; } } } </script> ``` 这样就可以实现基本的表格分页功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hikktn

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值