动态添加表格数据-纵向数据改成横向数据

最新推荐文章于 2024-07-17 14:19:40 发布
最新推荐文章于 2024-07-17 14:19:40 发布
阅读量313 收藏 4
点赞数 2
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50170396/article/details/139684174
版权

动态添加表头和表格数据，表头的value表格中需要加入

横向表格第一列既要作为固定列表头也需要给后端当做参数，横向的表头同样是作为固定列同时作为参数传递，后端需要的表格结构是纵向的每一个步骤作为对象中的一个值，纵向的时间体积循环周期等都是对象的值，包含这些值的对象放入后端需求的数组中，就是后端需要的数据结构（这里有个更简单的方式，跟后端沟通让后端改，哈哈哈）

实现的表格
后端需要的数据格式

html部分
<div style="text-align: right">
	<el-button v-if="!data.isShow" class="qm_class" @click="addZhongziList()">添加</el-button>
</div>
<el-row style="margin: 1% 0">
	<el-table
		:data="lvdaiTable"
		border
		:key="data.formlist.spjlmxListNochange"
		style="width: 100%"
		:span-method="objectSpanMethod"
		:header-cell-style="headerStyle"
		:render-header="renderHeader"
	>
		<el-table-column prop="title" label="" align="center">
			<template #default="scope">
				<div v-if="scope.$index == 0 || scope.$index == 1" style="color: #000; font-weight: 700">
					{{ colTableTitle[scope.$index].title }}
				</div>
				<div v-if="scope.$index > 1">
					<div style="display: flex; align-items: center">
						<div>第</div>
						<div>
							<num-input
								v-model="data.formlist.spjlmxListNochange[0].children[scope.$index + 1].xunhuan"
								:precision="2"
								:disabled="data.isShow"
								style="margin-bottom: 10px; width: 70%"
								placeholder="请输入循环信息"
								@input="data.formlist.spjlmxListNochange[0].children[scope.$index + 1].xunhuan"
							/>
						</div>
						<div>循环</div>
					</div>
					<div style="display: flex; align-items: center">
						<div>第</div>
						<div>
							<num-input
								v-model="data.formlist.spjlmxListNochange[0].children[scope.$index + 1].zhouqi"
								:precision="2"
								:disabled="data.isShow"
								placeholder="请输入周期信息"
								style="width: 70%"
								@input="data.formlist.spjlmxListNochange[0].children[scope.$index + 1].zhouqi"
							/>
						</div>
						<div>周期</div>
					</div>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="title" label="循环步骤" align="center">
			<template #default="scope">
				<span style="text-align: center; width: 100%; display: inline-block">{{ lvdaiTable[scope.$index].title }}</span>
			</template>
		</el-table-column>
		<el-table-column
			v-for="(item, index) in data.formlist.spjlmxListNochange"
			:key="index"
			:label="item.buzhou"
			prop="buzhou"
			header-align="center"
			align="center"
		>
			<template #default="scope">
				<!-- {{ scope.row }} -->
				<el-input v-if="scope.row.label != 'shijian'" v-model="item.children[scope.$index].tiji" :disabled="data.isShow" />
				<el-time-picker
					v-else
					v-model="item.children[scope.$index + 1].shijian"
					placeholder="选择时分"
					style="width: 100%"
					:disabled="data.isShow"
					value-format="HH:mm"
					format="HH:mm"
				/>
			</template>
		</el-table-column>
		<el-table-column label="操作" header-align="center" align="center" fixed="right">
			<template #default="scope">
				<span v-if="scope.$index === 0 || scope.$index === 1">设定值不允许删除操作</span>
				<el-button v-if="!data.isShow && scope.$index > 1" type="danger" link @click="delZhongziList(scope.$index, 'yxsjList')"
					>删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
</el-row>

js部分   vue3的写法
const colTableTitle = reactive([
	{ title: 'SSMB信息', label: 'shedingzhi' },
	{ title: 'SSMB信息', label: 'shedingzhi' }
])
const lvdaiTable = reactive([
	{ title: '时间(设定值)', label: 'shijian' },
	{ title: '体积(设定值)', label: 'tiji' }
])
自定义的表格需要的数据格式
let data = reactive（{
	spjlmxList:[],// 后端需要的数组，后面进行了赋值，
	spjlmxListNochange:[ // 自己定义的数组，不需要提交给后端
		{
			buzhou: 'A',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		},
		{
			buzhou: 'B',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		},
		{
			buzhou: 'C',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		},
		{
			buzhou: 'D',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		},
		{
			buzhou: 'E',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		},
		{
			buzhou: 'F',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		},
		{
			buzhou: 'I',
			xunhuan: '',
			zhouqi: '',
			children: [
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				},
				{
					buzhou: '',
					xunhuan: '',
					zhouqi: '',
					shijian: null,
					tiji: ''
				}
			]
		}
	]
}）
// 添加一个循环
const addZhongziList = () => { // 这个表格时间体积各占一行，所以增加删除都是一起添加两个对象，表格数据添加，第一列第二列也需要对应添加
	lvdaiTable.push({ title: '时间', label: 'shijian' }, { title: '体积', label: 'tiji' })
	colTableTitle.push({ title: '循环', label: 'xunhuan' }, { title: '周期', label: 'zhouqi' })
	data.spjlmxListNochange.forEach(item => {
		item.children.push(
			{
				buzhou: '',
				xunhuan: '',
				zhouqi: '',
				shijian: null,
				tiji: ''
			},
			{
				buzhou: '',
				xunhuan: '',
				zhouqi: '',
				shijian: null,
				tiji: ''
			}
		)
	})
}
// 删除循环
const delZhongziList = (index: number, key) => {
	// console.log(index, 'index')
	lvdaiTable.splice(index, 2)
	colTableTitle.splice(index, 2)
	data.spjlmxListNochange.forEach(item => {
		item.children.splice(index, 2)
	})
}
// 提交时处理数据格式
let arrList = []
let lastList = []
let arrA = []
let arrB = []
let arrC = []
let arrD = []
let arrE = []
let arrF = []
let arrI = []
const subDataList = () => {
	data.spjlmxListNochange.forEach((item, idx) => {
		item.children.forEach((child, index) => {
			// console.log(index, 'index')
			child.buzhou = item.buzhou
			if (index === 0 || index === 1) {
				child.zhouqi = null
				child.xunhuan = null
			}
			if (index % 2 !== 0) {
				arrList.push(child)
			}
		})
	})
	arrList.forEach((item, index) => {
		if (item.buzhou === 'A') {
			arrA.push(item)
		} else if (item.buzhou === 'B') {
			arrB.push(item)
		} else if (item.buzhou === 'C') {
			arrC.push(item)
		} else if (item.buzhou === 'D') {
			arrD.push(item)
		} else if (item.buzhou === 'E') {
			arrE.push(item)
		} else if (item.buzhou === 'F') {
			arrF.push(item)
		} else if (item.buzhou === 'I') {
			arrI.push(item)
		}
		arrA.forEach((arrAitem, arrAindex) => {
			arrB.forEach((val, idx) => {
				if (arrAindex === idx) {
					val.xunhuan = arrAitem.xunhuan
					val.zhouqi = arrAitem.zhouqi
				}
			})
			arrC.forEach((val, idx) => {
				if (arrAindex === idx) {
					val.xunhuan = arrAitem.xunhuan
					val.zhouqi = arrAitem.zhouqi
				}
			})
			arrD.forEach((val, idx) => {
				if (arrAindex === idx) {
					val.xunhuan = arrAitem.xunhuan
					val.zhouqi = arrAitem.zhouqi
				}
			})
			arrE.forEach((val, idx) => {
				if (arrAindex === idx) {
					val.xunhuan = arrAitem.xunhuan
					val.zhouqi = arrAitem.zhouqi
				}
			})
			arrF.forEach((val, idx) => {
				if (arrAindex === idx) {
					val.xunhuan = arrAitem.xunhuan
					val.zhouqi = arrAitem.zhouqi
				}
			})
			arrI.forEach((val, idx) => {
				if (arrAindex === idx) {
					val.xunhuan = arrAitem.xunhuan
					val.zhouqi = arrAitem.zhouqi
				}
			})
		})
	})
	lastList = arrA.concat(arrB, arrC, arrD, arrE, arrF, arrI)
	// data.formlist.spjlmxList = arrList
	data.spjlmxList = lastList
}
//合并列
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (columnIndex === 0 && rowIndex % 2 === 0) {
		return [2, 1] // 第一个值代表 rowspan，第二个值代表 colspan
	} else if (columnIndex === 0 && rowIndex % 2 !== 0) {
		return [0, 0] // 隐藏当前单元格
	}
	if (columnIndex === 9) {
		if (rowIndex > 1) {
			return [2, 1]
		}
	}
}
const headerStyle = ({ row, column, rowIndex, columnIndex }) => {
	if (columnIndex === 0 && rowIndex === 0) {
		// 将表头第一列隐藏
		return {
			'border-bottom': 'none'
		}
	}
}
// 由于有详情页面，提交的数据需要再页面展示，所以对返回的数据进行拆分匹配页面需要的数据格式
let backArrA = []
let backArrB = []
let backArrC = []
let backArrD = []
let backArrE = []
let backArrF = []
let backArrI = []
const changeDetailData = () => {
	// console.log(JSON.parse(JSON.stringify(data.formlist.spjlmxList)), 'spjlmxList')
	data.spjlmxList.forEach((item, index) => {
		if (item.buzhou === 'A') {
			backArrA.push(item)
		} else if (item.buzhou === 'B') {
			backArrB.push(item)
		} else if (item.buzhou === 'C') {
			backArrC.push(item)
		} else if (item.buzhou === 'D') {
			backArrD.push(item)
		} else if (item.buzhou === 'E') {
			backArrE.push(item)
		} else if (item.buzhou === 'F') {
			backArrF.push(item)
		} else if (item.buzhou === 'I') {
			backArrI.push(item)
		}
	})
	let num = backArrA.length - lvdaiTable.length / 2
	data.spjlmxListNochange.forEach((item, index) => {
		item.children = []
		if (item.buzhou === 'A') {
			backArrA.forEach((val, idx) => {
				item.children.push(val, val)
			})
		} else if (item.buzhou === 'B') {
			backArrB.forEach((val, idx) => {
				item.children.push(val, val)
			})
		} else if (item.buzhou === 'C') {
			backArrC.forEach((val, idx) => {
				item.children.push(val, val)
			})
		} else if (item.buzhou === 'D') {
			backArrD.forEach((val, idx) => {
				item.children.push(val, val)
			})
		} else if (item.buzhou === 'E') {
			backArrE.forEach((val, idx) => {
				item.children.push(val, val)
			})
		} else if (item.buzhou === 'F') {
			backArrF.forEach((val, idx) => {
				item.children.push(val, val)
			})
		} else if (item.buzhou === 'I') {
			backArrI.forEach((val, idx) => {
				item.children.push(val, val)
			})
		}
	})
	for (var i = 0; i < num; i++) {
		lvdaiTable.push({ title: '时间', label: 'shijian' }, { title: '体积', label: 'tiji' })
		colTableTitle.push({ title: '循环', label: 'xunhuan' }, { title: '周期', label: 'zhouqi' })
	}
}
苏小小呀
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Excel怎么把横向的数据变成纵向排列？
qq_43552564的博客
10-13 1万+
1：首先，用Microsoft Office 2016打开需要转置(把横向摆的数据变成纵向排列)的表格。 2：选中需要转换的数据所在的区域，然后复制下来（按下快捷键“Ctrl+C”或者单击鼠标右键后点击“复制”）。 3：点击一下转换后的数据要存放的位置。 4：点击一下开始菜单栏下的粘帖图标下的带三角形的更多选项按钮。 5：找到粘帖下的转置图标（带向下和向右的双向箭头的文件板夹图标），点击一下。鼠标在粘帖选项移动上时，表格里也会显示效果预览。 6：操作完上面的步骤，我们就已经成功的完成了把Excel.
vue实现动态添加数据滚动条自动滚动到底部的示例代码
01-19
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll ...添加watch方法，监听数据变量的变化，动态添加滚动条，一开始
excel表格横向纵向变换_excel2016如何把纵向的数据变为横向
weixin_39819974的博客
11-18 2069
excel2016如何把纵向的数据变为横向?下面2345软件大全小编给大家介绍下。1、首先，我们打开一个Excel表格。方便起见，我们用一个数列。2、然后，我么选中所有需要的数据。3、然后右击复制所有的数据。4、复制完成后，将光标选在第一个格子上。5、右键再次单击，选择“选择性粘贴”6、在弹出的对话框中，我们选择【转置】7、然后单击确定。...
EXCEL横向表格如何调整为纵向表格？
statistics+insight+vista+power
05-04 3026
EXCEL表格横向表格如何调整为纵向表格？
python数据分析-matplotlib可视化
weixin_44999258的博客
11-30 2040
使用python中的matplotlib可视化
code_R语言_纵向数据_
10-01
在数据分析和统计建模领域，R语言是一种广泛使用的工具，尤其在处理纵向数据或面板数据时，其强大的功能和灵活性得到了专业人士的高度认可。本主题聚焦于如何利用R语言解决纵向数据线性混效应模型（Linear Mixed ...
PB 纵向显示N-UP类型的数据窗口例子
07-07
在传统的N-UP布局中，数据通常是横向排列的，每行显示N条记录。然而，在这个例子中，我们关注的是纵向显示，这意味着记录将沿着垂直方向堆叠，这对于屏幕空间有限或需要垂直比较数据的场景非常有用。 要创建一个...
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
11-21
横向添加 是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题 而纵向添加的数据，因为没有事先在 el-select v-modle=”” 里面定义好字段，定义好的option是通过v-for出来的(option是...
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 395
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
更新商品前端接口编写
weixin_55639995的博客
07-12 418
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1144
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
中间件的理解
modi000的博客
07-15 237
直接返回，前置服务可以支持更高流量的并发，后置的需要耗时、耗力的，需要IO操作的服务，可以通过MQ慢慢处理。前端写消息的速率比后端处理消息的速率要快很多的。a.快递员角度：快递员无需将快递直接交到用户手里，放在菜鸟驿站即可走了，增加了送快递的数量，提高了送快递的效率；b.用户角度：快递到达的时候在上班，当时无时间取快递，当有了菜鸟驿站后，用户可以在下班闲暇时间去取快递。所以，中间件可以多个可能互相调用的系统耦合程度，提升接口的响应速度，。c.双十一的时候，快递量暴增，快递员不会手忙脚乱、用户可排序取快递。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 221
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
【零基础】学JS之APIS第三天
大学生小郑的博客
07-12 1710
【零基础】学JS之APIS第三天
ReactRouter v6升级的步骤
feixin369的博客
07-14 388
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
(三)js前端开发中设计模式之工厂模式
最新发布
峰会路转的博客
07-17 208
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
前端工具-json-server
zhangankang的博客
07-14 160
以项目为例，介绍前端mock数据的方式；
应用纵向数据分析：上海交大生物信息教材
"Applied Longitudinal Analysis 2nd 是一本关于应用纵向数据分析的专业教材，由上海交通大学生命科学技术学院生物信息与生物统计系采用，英文版本。本书主要探讨了在处理纵向数据和集群数据时的统计方法，适合相关...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值