1. 通过 Object.keys 进行数据处理
接口返回数据
{
"neverUsed": 33,
"inDepository": 0,
"onTheShelf": 29,
"takeDown": 1,
"toBeRepair": 0,
"repairing": 1,
"toBeScrap": 0,
"scrapping": 1,
"scrapped": 0
}
需要处理成的数据
[
{
"name": "在库",
"value": 0
},
{
"name": "未使用",
"value": 33
},
{
"name": "已上架",
"value": 29
},
{
"name": "维修中",
"value": 1
},
{
"name": "已报废",
"value": 0
},
{
"name": "报废中",
"value": 1
},
{
"name": "已下架",
"value": 1
},
{
"name": "待维修",
"value": 0
},
{
"name": "待报废",
"value": 0
}
]
实现过程
getAssetsStatus().then((res) => {
if (res.data.code == 200) {
let list = res.data.data
let data = []
// 将 对应字段的名称 定义一个 对象(map)
let map = {
inDepository: '在库', // 在库
neverUsed: '未使用', // 未使用
onTheShelf: '已上架', //已上架
repairing: '维修中', // 维修中
scrapped: '已报废', // 已报废
scrapping: '报废中', //报废中
takeDown: '已下架', // 已下架
toBeRepair: '待维修', // 待维修
toBeScrap: '待报废', //待报废
}
// 拿到 定义的对象的 key ，并遍历里面的每一项
Object.keys(map).map((item) => {
data.push({
name: map[item], // 利用中括号取值法 拿到名字
value: list[item],// 利用中括号取值法 拿到 value 值。
})
})
console.log('data',data)
this.initPieEcharts(data)
}
2. 星期 数据处理
后端返回数据
- dayOfWeek: 6
- dutyDay: “2022-08-06”
希望处理的结果
- 2022-08-06 星期六
改善前的处理方法
weekTranslate(date, weekIndex) {
// if (week == 0) {
// return date + '星期天'
// }
// if (week == 1) {
// return date + ' 星期一'
// }
// if (week == 2) {
// return date + ' 星期二'
// }
// if (week == 3) {
// return date + ' 星期三'
// }
// if (week == 4) {
// return date + ' 星期四'
// }
// if (week == 5) {
// return date + ' 星期五'
// }
// if (week == 6) {
// return date + ' 星期六'
// }
},
改善后的处理方法
weekTranslate(date, weekIndex) {
const weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
const dateWeek = date + ' '+ weeks[weekIndex]
return dateWeek
},
3. 封装组件中 button 触发事件的处理
思路一：
遍历渲染多个 button ，触发按钮事件的时候，把 text 传回给父组件，最后父组件根据 text 动态判断，执行增删改查相关逻辑
父组件配置需要添加的button：
opBuList: [
{
type: 'text',
text: '编辑',
},
{
type: 'text',
text: '删除',
}
],
editHandle()
deleteHandle()
testHandle(text){
if(text === '编辑') this.editHandle()
if(text === '删除') this.deleteHandle()
}
封装组件中的for 渲染：
<Button
v-for="(o, i) in opBuList"
:key="i"
size="mini"
:type="o.type"
:disabled="scope.row.disabled && o.disabled"
@click="operationHander(text, scope.row)"
>{{ o.text }}</Button
>
operationHander(text){
this.$emit('testHandle',text)
}
思路二 ：
配置好 增删改查 相关方法的 方法名称，遍历渲染多个 button ，触发 button 事件的时候，将方法名 传回给 父组件。父组件根据 this方法名 调用父组件中 定义好的 增删改查 的相关方法。
父组件配置需要添加的button：
opBuList: [
{
type: 'text',
func: 'editFunc'
},
{
type: 'text',
func: 'deleteFunc'
}
],
// 编辑事件
editFunc(){}
// 删除事件
deleteFunc(){}
testHandle(func){
this[func]()
}
封装组件中的for 渲染：
<Button
v-for="(o, i) in opBuList"
:key="i"
size="mini"
:type="o.type"
:disabled="scope.row.disabled && o.disabled"
@click="operationHander(o.func, scope.row)"
>{{ o.text }}</Button
>
operationHander(func){
this.$emit('testHandle',func)
}
4. 将数组中对象的相同属性合并
- 给数组中的每一项都添加一个新属性,并将partkey的值作为新属性的键, target的值作为新属性的值.
- 随后将monitoringProject属性相同的对象使用Object.assign 合并在一起
let arr = [
{
monitoringProject: "审核流程",
target: "10",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part1",
},
{
monitoringProject: "早期遏制点检",
target: "0",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part1",
},
{
monitoringProject: "变更申请",
target: "0",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part1",
},
{
monitoringProject: "问题复发1",
target: "0",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part1",
},
{
monitoringProject: "其他目标，如有需列出",
target: "80",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part1",
},
{
monitoringProject: "审核流程",
target: "102",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part2",
},
{
monitoringProject: "早期遏制点检",
target: "02",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part2",
},
{
monitoringProject: "变更申请",
target: "02",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part2",
},
{
monitoringProject: "问题复发1",
target: "02",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part2",
},
{
monitoringProject: "其他目标，如有需列出",
target: "802",
businessKey: "SQEMS-EPC-20240226-378",
partKey: "part2",
},
];
arr.forEach((item) => {
item[item.partKey] = item.target;
});
let result = arr.reduce((acc, item) => {
if (!acc[item.monitoringProject]) {
acc[item.monitoringProject] = { ...item };
} else {
Object.assign(acc[item.monitoringProject], item);
}
return acc;
}, {});
// 关键操作
let resultArray = Object.values(result);
console.log(resultArray);
5. JS 数据分组函数封装 (相同属性值分为一组)
let arr = [
{
sex: "female",
age: 13,
name: "rose",
address: { province: "山东", city: "青岛" },
},
{
sex: "male",
age: 14,
name: "jack",
address: { province: "山东", city: "青岛" },
},
{
sex: "female",
age: 15,
name: "lomio",
address: { province: "山东", city: "济南" },
},
{
sex: "male",
age: 16,
name: "jhon",
address: { province: "山东", city: "青岛" },
},
{
sex: "female",
age: 17,
name: "bell",
address: { province: "河南", city: "巩义" },
},
{
sex: "male",
age: 18,
name: "dgula",
address: { province: "河南", city: "郑州" },
},
{
sex: "male",
age: 18,
name: "flycat",
address: { province: "河南", city: "郑州" },
},
{
sex: "male",
age: 18,
name: "flydog",
address: { province: "河南", city: "郑州" },
},
];
/**
*
* @param {*} arr 需要分组的数据源
* @param {*} generatorKey 根据哪一个属性分组
* @returns
*/
function groupBy(arr, generatorKey) {
let result = {};
if (typeof generatorKey === "string") {
const propName = generatorKey;
generatorKey = (p) => p[propName];
}
for (let i = 0; i < arr.length; i++) {
const key = generatorKey(arr[i], i, arr);
if (result[key]) {
result[key].push(arr[i]);
} else {
result[key] = [arr[i]];
}
}
return result;
}
console.log(groupBy(arr, "sex"));
/*
{
female: [
{ sex: 'female', age: 13, name: 'rose' },
{ sex: 'female', age: 15, name: 'lomio' },
{ sex: 'female', age: 17, name: 'bell' }
],
male: [
{ sex: 'male', age: 14, name: 'jack' },
{ sex: 'male', age: 16, name: 'jhon' },
{ sex: 'male', age: 18, name: 'dgula' },
{ sex: 'male', age: 18, name: 'flycat' },
{ sex: 'male', age: 18, name: 'flydog' }
]
}
*/
console.log(groupBy(arr, "age"));
/*
{
'13': [ { sex: 'female', age: 13, name: 'rose' } ],
'14': [ { sex: 'male', age: 14, name: 'jack' } ],
'15': [ { sex: 'female', age: 15, name: 'lomio' } ],
'16': [ { sex: 'male', age: 16, name: 'jhon' } ],
'17': [ { sex: 'female', age: 17, name: 'bell' } ],
'18': [
{ sex: 'male', age: 18, name: 'dgula' },
{ sex: 'male', age: 18, name: 'flycat' },
{ sex: 'male', age: 18, name: 'flydog' }
]
}
*/
console.log(groupBy(arr, (p) => p.sex)); /*
{
female: [
{ sex: 'female', age: 13, name: 'rose' },
{ sex: 'female', age: 15, name: 'lomio' },
{ sex: 'female', age: 17, name: 'bell' }
],
male: [
{ sex: 'male', age: 14, name: 'jack' },
{ sex: 'male', age: 16, name: 'jhon' },
{ sex: 'male', age: 18, name: 'dgula' },
{ sex: 'male', age: 18, name: 'flycat' },
{ sex: 'male', age: 18, name: 'flydog' }
]
}
*/
console.log(groupBy(arr, (p) => `${p.sex}-${p.age}`));
/*
{
'13': [ { sex: 'female', age: 13, name: 'rose' } ],
'14': [ { sex: 'male', age: 14, name: 'jack' } ],
'15': [ { sex: 'female', age: 15, name: 'lomio' } ],
'16': [ { sex: 'male', age: 16, name: 'jhon' } ],
'17': [ { sex: 'female', age: 17, name: 'bell' } ],
'18': [
{ sex: 'male', age: 18, name: 'dgula' },
{ sex: 'male', age: 18, name: 'flycat' },
{ sex: 'male', age: 18, name: 'flydog' }
]
}
*/
console.log(groupBy(arr, (p) => `${p.address?.province} - ${p.address?.city}`));
/*
{
'山东 - 青岛': [
{ sex: 'female', age: 13, name: 'rose', address: [Object] },
{ sex: 'male', age: 14, name: 'jack', address: [Object] },
{ sex: 'male', age: 16, name: 'jhon', address: [Object] }
],
'山东 - 济南': [ { sex: 'female', age: 15, name: 'lomio', address: [Object] } ],
'河南 - 巩义': [ { sex: 'female', age: 17, name: 'bell', address: [Object] } ],
'河南 - 郑州': [
{ sex: 'male', age: 18, name: 'dgula', address: [Object] },
{ sex: 'male', age: 18, name: 'flycat', address: [Object] },
{ sex: 'male', age: 18, name: 'flydog', address: [Object] }
]
}
*/
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
