在VUE里处理表格及做数据转换

最新推荐文章于 2024-01-05 10:04:30 发布
最新推荐文章于 2024-01-05 10:04:30 发布
阅读量1.6k 收藏 5
点赞数
分类专栏： VUE element-ui 文章标签： vue vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40310178/article/details/105730338
版权

周菜谱需求，在VUE里处理表格及做数据转换

本文为 正闲 原创文章，如需转载需得到本人授权

最终效果

周菜谱最终效果图

项目背景

最近在处理一个基于微信公众号的内部订餐项目，技术是Java（Spring Boot）+VUE（uni-app），其中有一个需求是要做周菜谱，后端下发的数据格式如下：

// 后端发送的消息JSON格式如下：
{
  "code": 0,
  "msg": "",
  "data": {
    "listofDay": [
      {
        "week": 1,
        "dayDate": "2020-03-30",
        "listofFood": []
      },
      {
        "week": 2,
        "dayDate": "2020-03-31",
        "listofFood": []
      },
      {
        "week": 3,
        "dayDate": "2020-04-01",
        "listofFood": []
      },
      {
        "week": 4,
        "dayDate": "2020-04-02",
        "listofFood": []
      },
      {
        "week": 5,
        "dayDate": "2020-04-03",
        "listofFood": [
          {
            "id": 1,
            "period": 1,
            "food_name": "米饭",
            "price": "0.01"
          }
        ]
      },
      {
        "week": 6,
        "dayDate": "2020-04-04",
        "listofFood": [
          {
            "id": 1,
            "period": 1,
            "food_name": "米饭",
            "price": "0.01"
          }
        ]
      },
      {
        "week": 7,
        "dayDate": "2020-04-05",
        "listofFood": [
          {
            "id": 1,
            "period": 0,
            "food_name": "米饭",
            "price": "0.01"
          }
        ]
      }
    ]
  }
}

关于VUE的表格处理

VUE element-UI 表格处理的 API 参考地址：

https://element.eleme.io/2.0/#/zh-CN/component/table
访问

任务目标

1.显示表格，多级表头、星期（week）转为中文显示。
2.按照时段（period）字段转为中文，并排序。
3.消息格式转换。
4.时段合并单元格（还未实现，可结合API自行研究解决）。

主要代码

// 主要代码
<template>
	<div class="orderList">
		<div class="api_right_tit">
		  <div class="date_block">
			<span>日期:</span>
			<el-date-picker
			  v-model="updateDate"
			  type="date"
			  @change="dateChange"
			  format="yyyy 年 MM 月 dd 日"
			  value-format="yyyy-MM-dd"
			  placeholder="选择日期"
			></el-date-picker>
		  </div>
		</div>
		<!-- 由 tableDate.length 决定数据表格的高度（固定为5）实际数据是用 listofDay -->
		<el-table :data="tableDate" stripe ref="multipleTable" 
			:header-cell-style="funTableHeaderStyle" 
			:cell-style="funTableCellStyle"
			>
			<el-table-column prop="period" label="时段" width="55" :formatter="funFormatPeriod"></el-table-column>
			<!-- 2020-04-20 周一 由 tableHeaderInfo.length 决定数据表格的宽度-->
			<el-table-column v-for="(headItem, headIndex) in tableHeaderInfo" v-bind:key="headItem.id" :label="headItem.dayDate">
				<el-table-column :prop="'day'+(headIndex+1)+'.name'" :label="headItem.week" :render-header="funRenderHeaderWeek">
				</el-table-column>
				<el-table-column :prop="'day'+(headIndex+1)+'.price'" label="单价" width="50">
				</el-table-column>
			</el-table-column>
		</el-table>
  </div>
</template>
<script>
export default {
	data() {
		return {
			//查询数据
			updateDate: '',
			isRun: false,
			//表格基本信息（从listofDay中抽离出来）
			tableHeaderInfo:[{
				dayDate:'2020-04-28',
				week:'1'
	        }, {
				dayDate:'2020-04-21',
				week:'2'
	        }, {
				dayDate:'2020-04-22',
				week:'3'
	        },{
				dayDate:'2020-04-23',
				week:'4'
	        },{
				dayDate:'2020-04-24',
				week:'5'
			},{
				dayDate:'2020-04-25',
				week:'6'
	        },{
				dayDate:'2020-04-26',
				week:'7'
	        }],
			//表示正式数据（数据长度即，表格高度）（需转译，时段信息（包含5个时段））
			tableDate:[{
				period:0,
				day1:{name:'',price:''},
				day2:{name:'',price:''},
				day3:{name:'',price:''},
				day4:{name:'',price:''},
				day5:{name:'',price:''},
				day6:{name:'',price:''},
				day7:{name:'',price:''}
			}]
	    }
	},
	mounted() {
	},
	created() {
	  //初始化月数据
	  this.getMonDate();
	  //初始化
	  this.getData();
	},
	methods: {
		//表头样式
		funTableHeaderStyle:function(row, column, rowIndex, columnIndex){
			return {'font-size': '12px','padding':'6px 0px 6px 0px','text-align':'center','background-color': '#FFFFFF'};
		},
		//表格内容样式
		funTableCellStyle:function(row, column, rowIndex, columnIndex){
			return {'font-size': '10px','padding':'2px 0px 2px 0px','text-align':'center'};
		},
		// 取餐日期改变后重新获取菜品分类列表和菜品列表
		dateChange(dateText) {
			//console.log("查询数据发生变化");
			// console.log("dateText = "+dateText);
			//数据容错处理
			if (!dateText) return '';
			if (dateText.length>0){
				//数据大于0才处理，屏蔽清空后的无效消息
				this.getData();
			}
		    
		},
		//与服务器通讯
		getData() {
		  let postObj = {
		    keyDate: this.updateDate
		  };
		  var WeekList = [];
		  this.$axios.post("getWeekPlanTable", postObj).then(res => {
		    if (res.code == 0) {
		      console.log("数据获取成功！");
			  WeekList = res.data.listofDay;
			  
			  //console.log("WeekList = "+WeekList);
			  //(Done)更新表头数据
			  let fTableHeaderInfo = JSON.parse(JSON.stringify(WeekList));
			  //刷新头信息 包含日期和星期
			  this.refreshHeaderInfo(fTableHeaderInfo);
			  //刷新表数据信息 包含时段 、菜品 和 价格
			  this.refreshFoodInfo(fTableHeaderInfo);
			  //console.log("this.tableHeaderInfo = "+JSON.stringify(this.tableHeaderInfo));
		    } else {
			  console.log("服务器提示错误！");
		      this.$message({
		        type: "info",
		        message: res.msg
		      });
		    }
		  });
		},
		//(核心关键)刷新表数据信息 包含时段 、菜品 和 价格
		refreshFoodInfo:function(objHeader){
			//各时段上限（赋值到全局变量中可供合并单元格使用）
			let fPeriodSize = [0,0,0,0,0];
			//每天的中间数据(内部包含这一天内各时段数据size7，各时段数据是数组)使用Map方便排序
			let fMapTableDate = new Map();
			
			//初始化食品数据			
			if (objHeader.length>0){
				this.tableDate=[];
			}
			
			for (var i = 0; i < objHeader.length; i++) {
				//新建二维map存储子数据
				fMapTableDate.set(i,new Map());
				let fArrFoodListByOneDay = objHeader[i]['listofFood'];
				
				//console.log("i = "+i+" fArrFoodListByOneDay.length = "+fArrFoodListByOneDay.length);
				
				for (var j = 0; j < fArrFoodListByOneDay.length; j++) {
					let fAFood = fArrFoodListByOneDay[j];
					
					let fPeriod = fAFood['period'];
					
					//console.log("fPeriod = "+fPeriod);
					
					//构建 及 序列化 各时段对象
					if (!fMapTableDate.get(i).has(fPeriod)){
						//初始化某时段数组
						fMapTableDate.get(i).set(fPeriod,[]);
					}
					//添加食物对象
					fMapTableDate.get(i).get(fPeriod).push(fAFood);
					
					//=== Begin 尝试更新本时段最大值计数器
					let nowNum = fMapTableDate.get(i).get(fPeriod).length;
					// console.log("nowNum = "+nowNum);
					let maybeMaxNum = fPeriodSize[fPeriod];
					// console.log("maybeMaxNum = "+maybeMaxNum);
					if (nowNum>maybeMaxNum){
						// console.log(">>>>>> set values");
						fPeriodSize[fPeriod] = nowNum;
					}
					// console.log("update fPeriodSize[fPeriod] = "+fPeriodSize[fPeriod]);
					//=== End 尝试更新本时段最大值计数器
					
					//console.log("i = "+i+" j= "+j+" obj = "+JSON.stringify(fAFood));
				}
			}
			
			console.log("fMapTableDate.size = "+fMapTableDate.size);
			
			console.log("fPeriodSize = "+fPeriodSize);
			
			//补齐各时段空数据 m为时段
			for (var m = 0; m < fPeriodSize.length; m++) {
				//本时段最大值
				let nowMax = fPeriodSize[m];
				
				if (nowMax>0){
					//从队列中拉取数据，并补齐数据
					for (var n = 0; n < nowMax; n++) {
						
						console.log("m = "+m);
						//为了看得清楚 特意写清楚一条数据的结构
						let fAFoodCell = {
							period:m,
							day1:{name:'',price:''},
							day2:{name:'',price:''},
							day3:{name:'',price:''},
							day4:{name:'',price:''},
							day5:{name:'',price:''},
							day6:{name:'',price:''},
							day7:{name:'',price:''}
						};
						
						//添加最终数据
						//this.tableDate.push(fAFoodCell);
						
						//fMapTableDate.size就是7
						for (var p = 0; p < fMapTableDate.size; p++) {
							//从队列判断队列是否为空
							if (fMapTableDate.get(p).has(m)){
								
								//console.log("p = "+p+" 存在时段 m = "+m);
								
								//剩余数据
								let remainFood = fMapTableDate.get(p).get(m).length;
								//console.log("remainFood = "+remainFood);
								
								if (remainFood>0){
									//从队列中挤压出数据
									let fOneFoodObj = fMapTableDate.get(p).get(m).shift();
									let fNeedAddFood = {name:fOneFoodObj['food_name'],price:fOneFoodObj['price']};
									console.log("needAddFood = "+JSON.stringify(fNeedAddFood));
									//补齐对象
									fAFoodCell['day'+(p+1)] = fNeedAddFood;
								}else{
									//补齐对象
									fAFoodCell['day'+(p+1)]={name:'',price:''};
								}
								 
							}else{
								//补齐对象
								fAFoodCell['day'+(p+1)]={name:'',price:''};
							}
						}
						
						//添加最终数据
						this.tableDate.push(fAFoodCell);
					}
					
					
				}
				
			}
			
			
			//TODO use fPeriodSize 赋值到全局变量中可供合并单元格使用 
		},
		//刷新头信息 包含日期和星期
		refreshHeaderInfo:function(objHeader){
			
			//初始化表头数据
			if (objHeader.length>0){
				this.tableHeaderInfo=[];
			}
			
			//console.log("this.tableHeaderInfo = "+objHeader);
			for (var i = 0; i < objHeader.length; i++) {
				let fObj = objHeader[i];
				// console.log("i = "+i+" obj = "+fObj);
				// console.log("this.tableHeaderInfo = "+JSON.stringify(fObj));
				//构造一个对象
				//解决消息中 week Number转化为String 问题
				let objItem = {dayDate:fObj['dayDate'],
				week:String(fObj['week'])};
				//插入对象
				this.tableHeaderInfo.push(objItem);
			}
		},
		//初始化 搜索框内容 默认显示第二天的日期
		getMonDate() {
		  // const date = new Date();
		  // let day = date.getDate() + 1;
		  // const mondate = new Date(date.setDate(day));
		  // console.log(mondate);
		  const curDate = new Date();
		  var mondate = new Date(curDate.getTime()); //后一天
		  let year = mondate.getFullYear();
		  let month = mondate.getMonth() + 1;
		  let day = mondate.getDate();
		  month = month > 9 ? month : "0" + month;
		  day = day > 9 ? day : "0" + day;
		  this.updateDate = `${year}-${month}-${day}`;
		},
		//渲染 header 星期几
		funRenderHeaderWeek:function(h,{column}){
			var weekChar = "星期";
			switch(column.label){
				case '1':
					weekChar = "星期一";
					break;
				case '2':
					weekChar = "星期二";
					break;
				case '3':
					weekChar = "星期三";
					break;
				case '4':
					weekChar = "星期四";
					break;
				case '5':
					weekChar = "星期五";
					break;
				case '6':
					weekChar = "星期六";
					break;
				case '7':
					weekChar = "星期天";
					break;
				default:
					weekChar = "未知";
			};
			return h(
			  'div',
			  [ 
				h('span', weekChar)
			  ],
			);
		},
		//渲染表头日期 2020-04-20, 2020-04-21 ... 等等
		funRenderHeaderDate:function (h,{column}) {
			return h(
			  'div',
			  [ 
				h('span', column.label+"_"),
				h('i', {
				  class:'el-icon-location',
				  style:'color:#409eff;margin-left:5px;'
				})
			  ],
		  );
		},
		//将时段（period）数字 转化为中文
		funFormatPeriod:function(row, column, rowIndex, columnIndex){
			//获取行数
			//var fRowNum = columnIndex;
			console.log('row.period = '+row.period);
			//获取时段参数
			switch(row.period){
				case 0:
					return '临时';
					break;
				case 1:
					return '早餐';
					break;
				case 2:
					return '午餐';
					break;
				case 3:
					return '晚餐';
					break;
				case 4:
					return '夜宵';
					break;
				default:
					return '未知';
			}
			return '无效';
		}
    },
	computed: {
		showThis: function () {
		  if (this.isRun) {
			// show chart
		  } else {
			// hide chart
		  }

		  return this.isRun;
		}
	},
}
</script>
<style>
.cell_style {
  text-align: center;
}
.all_style {
  align-content: center;
}
.api_right_tit {
  height: 60px;
  width: 100%;
}
.date_block {
  width: 350px;
  margin-top: 5px;
  float: left;
  margin-left: 50px;
}
.date_block span {
  margin-right: 20px;
}
</style>
Vue实现表格中对数据进行转换、处理的方法
10-18
在使用Vue.js框架开发Web应用时，经常需要对表格中的数据进行各种各样的处理，如数据转换、格式化、过滤等，以提高用户体验。本篇文档详细介绍了如何在Vue项目中处理表格数据，特别是对时间数据进行格式化的方法。 ...
使用vue 对列表的某列进行编辑、触发事件、字典值转换 
qq_42437272的博客
02-17 1213
使用vue对列表的某列进行编辑、触发事件、字典值转换
vue的数据展示，类型转换
codel
05-01 1274
目录vue中将后台返回的数字转换成对应的文字 vue中将后台返回的数字转换成对应的文字 前端展示的是汉字男女，而且0,1,2,对应不同的汉字 :formatter=“statusFormatter” 主要是这个 ，格式化我们的数据 <el-table :data="tableData" border> <el-table-column prop="status" :show-overflow-tooltip="true" label="
vue页面在table字段后加单位
qq_43193513的博客
08-25 1258
【代码】vue页面在table字段后加单位。
vue替换后台数据字段的值
wang_zhiwei0728的博客
10-11 1847
一：后台给的数据中经常会给反一个值，0-4这样的数字。 我们需要替换成一个状态，如成功失败进行中这样的字。 auditStatus: 2 //需要替换成汉字的字段 createTime: "2021-09-07" id: 9849 name: "airport_999" propName: "机场" source: "某数据集" typeName: "机场" ① 获取到后台接口数据以后先用map遍历一下整条数据，然后自定义一个数组，把后台给的值对应设置文字就可以了。单条数据就可以免除map了..
vue 循环展示中字段转义，一个字段对应转义超过两个，计算属性传参
YYYYYun的博客
03-23 1321
vue中列表循环，其中某字段需要转意。 【未解决】为什么switch不生效 <template> <div> <div class="reportItem" v-for="item in data" v-bind:key="item.IDNo"> <ul> <li class="item row_le...
Vue实现数据表格合并列rowspan效果
10-16
在处理JSON数据时，我们需要理解数据结构，正确地遍历和渲染数据，确保合并列的逻辑正确。这种实现方式使得我们可以灵活地处理各种复杂的数据结构，创建出符合业务需求的表格展示。希望这个示例能帮助你理解和应用...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
vue将后台数据时间戳转换成日期格式
12-08
在Vue.js开发中，我们经常会遇到一个问题：后端API返回的数据是时间戳，而前端界面需要展示的是易于阅读的日期和时间格式。为了解决这个问题并实现代码的复用，我们可以创建一个单独的 utility 文件来处理时间戳转换...
Vue 利用后端的数据字典和Map对象实现表格列字段动态转义的处理方案
weixin_45032957的博客
07-05 3085
Vue中，使用el-table组件，经常遇到列字段转义的问题。常规处理方法有以下两种： 方法1：在模板中使用v-if，直接转义。如： N Y 方法2：使用formatter，进行转义处理，如：   在模板中指明使用格式转换器：   在Javascript中，实现指定的格式转换器： data() { return { // 证件类型列表 idTypeList: [ {idType:1,idTypeName:“身份证”}, {idType:2,idTypeName:“社保卡”}, {idType:3,
018：vue中自定义el-table 表头和单元格的样式
大剑师兰特的GIS世界
06-17 1503
第018个vue在使用element UI table的是经常要用到的，由于原有的表头和单元格的样式不能满足项目的需要，需要自己来自定义样式。同时这里也做了个overflow-y的设置，让更多的内容在滚动条滑动下展示。
Vue中el-table组件的值转换
WannaRunning的博客
08-17 4162
在el-table组件中,字段值的转换有多种实现方式: 1.使用template标签加{{}}表达式使用js方法对字段值进行转换。 2.直接使用el-table-column组件中的:formatter属性使用js方法对值进行转换。 示例代码 <el-table-column label="货物状态" align="left" prop="status" width="80px"> <template slot-scope="scope"> <span&.
vue+ element 使用render渲染table、render-header自定义表头、scopedSlots自定义数据格式
热门推荐
qq_37508970的博客
01-24 2万+
z'c'v'z'x'c'v在地震造成v
【自定义列表头】vue el-table表格自定义列显示隐藏，多级表头自定义列显示隐藏，自由搭配版本和固定列版本【注释详细】
seeeeeeeeeee的博客
11-16 6466
最近遇到一个功能，需要的是把表格的列可以配置，用户可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些。于是我做了两个版本。第一个版本是自由搭配的。就是提前顶号所有的列，然后自己可以拖拽到想要位置顺序。也可以自己新增一个二级表头自定义一个名称把表头都拖进去组成多级表头表格。不过这种的毕竟复杂。第二个版本就简单一些了，是固定的列，比如十列写好了，然后用户只能在这十列里面选择显示或隐藏哪些。位置不能动，文字也不能动。就是单纯的显示隐藏列。
10、vue表格Table数据展示，隔行不同色效果
qq_44035882的博客
07-19 1406
vue表格Table数据展示，隔行不同色效果
表格头上增加tooltips和给表格数据增加单位
weixin_43950954的博客
11-27 459
el-table-column type="index" label="序号" width="50"> </el-table-column>tips: "【项目复用的CBB总工时（不去重） /（项目复用的CBB总工时（不去重）+项目实际开发工时）】*100%",label: "复用率",unit: "个",
vue element ui table表格动态显示以及区分当前单元格
奔跑吧代码
12-03 1283
vue element ui 当页面只有一个 el-input回车刷新页面问题 仅供参考 自我记录. scope.row和scope.column分别代表什么 当前行的数据: scope.row 当前列的值: scope.column.property 当前单元格的值应该是: scope.row[scope.column.property] 平时遇到的一些小问题 自我记录 有补充的地方希望大家多多提出意见 共同学习! 如有转载 请备注原文地址! ...
el-table内如何解析富文本只取文字和取字典转换
最新发布
qq_70047543的博客
01-05 638
【代码】el-table内如何解析富文本只取文字。
039：vue中数字货币化快速显示
大剑师兰特的GIS世界
09-25 1046
在vue项目开发中，我们会用到货币的表示，比如美元，英镑，人民币等等。这里引用了一个插件，可以很方便的表示各种货币形式。 输入数值，对应的货币单位、千位分隔符，小数分隔符就能表示出来。
vuetable表格中的时间戳转换日期格式
06-12
在 `vuetable` 中，我们也可以使用过滤器来将时间戳转换为日期格式。首先，我们需要在 `data()` 中定义一个过滤器对象： ```javascript data() { return { tableOptions: { // ... dateFilters: { dateFormat(value) { if (!value) return '' const date = new Date(value * 1000) return date.toLocaleDateString() } } } } } ``` 然后，在表格配置中使用这个过滤器： ```html <vuetable :api-url="'/api/data'" :fields="fields" :sort-order="sortOrder" :table-options="tableOptions" > </vuetable> ``` 在 `fields` 中，我们需要将时间戳字段与过滤器绑定： ```javascript fields: [ { name: 'timestamp', title: '日期', sortField: 'timestamp', formatter: (value, row) => { return row['timestamp'] }, dateField: true, dateInputFormat: 'YYYY-MM-DD', dateOutputFormat: 'X', dateFilter: 'dateFormat' }, // ... ] ``` 这样，我们就可以将时间戳转换为日期格式并在 `vuetable` 中显示了。需要注意的是，过滤器对象中的 `dateFormat` 必须与 `dateFilter` 中的名称一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值