vue对象数组拆分，组成element-ui 所需表格数据结构

后端请求回来的数据结构let res = [{"typeList": [{"typeName": "苹果","typeCount": "0"}, {"typeName": "香蕉","typeCount": "0"}, {"typeName": "榴莲","typeCount": "0"...

聰籽

3224人浏览 · 2019-08-13 17:43:07

聰籽 · 2019-08-13 17:43:07 发布

后端请求回来的数据结构

			let res = [{
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "152"
				}],
				"teamId": "1000",
				"name": "总公司",
				"totalCount": 1144
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "152"
				}],
				"teamId": "10003100",
				"name": "广州市a公司",
				"totalCount": 1144
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "143"
				}],
				"teamId": "100031001001",
				"name": "广州市b公司",
				"totalCount": 329
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "9"
				}],
				"teamId": "100031001003",
				"name": "gz",
				"totalCount": 14
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "0"
				}],
				"teamId": "10003109",
				"name": "广州市c公司",
				"totalCount": 562
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "0"
				}],
				"teamId": "100031001000",
				"name": "广州市d公司",
				"totalCount": 238
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "0"
				}],
				"teamId": "100031001002",
				"name": "广州市e公司",
				"totalCount": 1
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "0"
				}],
				"teamId": "100031001005",
				"name": "广州市f公司",
				"totalCount": 0
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "0"
				}],
				"teamId": "10003077",
				"name": "广州市g公司",
				"totalCount": 0
			}, {
				"typeList": [{
					"typeName": "苹果",
					"typeCount": "0"
				}, {
					"typeName": "香蕉",
					"typeCount": "0"
				}, {
					"typeName": "榴莲",
					"typeCount": "0"
				}, {
					"typeName": "西瓜",
					"typeCount": "0"
				}],
				"teamId": "100031001004",
				"name": "广州市h公司",
				"totalCount": 0
			}]

实际需要的数据结构

tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

最终对数据数据进行操作

var crr = []
			for (var i in res) {
				let map = {
					name: res[i].name,
					total: res[i].totalCount
				}
				for (var j = 0; j < res[0].typeList.length; j++) {

					let val = "val" + j
					let prop = "prop" + j
					let name = "name" + j
					map[val] = parseInt(res[i].typeList[j].typeCount)
					if(res[i].totalCount===0){
						map[prop]=0
					}else{
								map[prop] = parseInt(res[i].typeList[j].typeCount) / res[i].totalCount
					}
				
					// console.log(parseInt(res[i].typeList[j].typeCount))
				}
				crr.push(map)
				// console.log(res[i])
			}
			console.log(crr)

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^