vue界面script中请求接收到一个List:[{name:"0H购电电价",value:1},{name:"0H售电电价",value:2},{name:"1h购电电价",value:4},{name:"1H售电电价",value:5},{name:"0h状态",value:3},{name:"1h状态",value:6}],对它的name值截取H和h前的值进行分组,每组的内容以name值截取H和h后的值以购电电价、售电电价、状态排序
时间: 2023-07-22 17:06:57 浏览: 95
可以使用 JavaScript 的字符串处理方法和数组方法来对接收到的列表进行处理。以下是一个示例代码,根据 name 值截取 H 和 h 前值进行分组,并按购电电价、售电电价、状态进行排序:
```javascript
export default {
data() {
return {
list: [
{ name: "0H购电电价", value: 1 },
{ name: "0H售电电价", value: 2 },
{ name: "1h购电电价", value: 4 },
{ name: "1H售电电价", value: 5 },
{ name: "0h状态", value: 3 },
{ name: "1h状态", value: 6 }
],
groupedData: []
};
},
mounted() {
this.groupedData = this.groupAndSortData(this.list);
},
methods: {
groupAndSortData(list) {
const groups = {};
// 分组
list.forEach(item => {
const key = this.extractGroupKey(item.name);
if (!groups[key]) {
groups[key] = [];
}
groups[key].push(item);
});
// 排序
for (let key in groups) {
groups[key].sort((a, b) => {
const typeA = this.extractType(a.name);
const typeB = this.extractType(b.name);
return this.sortByType(typeA) - this.sortByType(typeB);
});
}
// 转换为数组
const result = [];
for (let key in groups) {
result.push(...groups[key]);
}
return result;
},
extractGroupKey(name) {
const index = name.toLowerCase().indexOf("h");
return name.substring(0, index);
},
extractType(name) {
const index = name.toLowerCase().indexOf("h");
return name.substring(index + 1);
},
sortByType(type) {
switch (type) {
case "购电电价":
return 1;
case "售电电价":
return 2;
case "状态":
return 3;
default:
return 0;
}
}
}
};
```
在这个示例中,`groupAndSortData` 方法用于对列表进行分组和排序。`extractGroupKey` 方法会根据 "H" 或 "h" 来截取分组的键值,`extractType` 方法会截取 "H" 或 "h" 后的值作为排序类型,`sortByType` 方法根据排序类型返回对应的权重值。通过这些方法,我们可以将列表按照分组和排序规则处理后,存储在 `groupedData` 属性中。
在 `mounted` 钩子函数中调用 `groupAndSortData` 方法来初始化 `groupedData` 属性。
这样,你就可以根据 name 值的规则对列表进行分组和排序,得到符合要求的结果。请根据实际需求调整代码,并在模板中使用 `groupedData` 属性来显示处理后的数据。
阅读全文