{
"msg": "操作成功",
"code": 200,
"data": [
{
"A": [
{
"AA": [
{
"张三": "1",
"李四": "2"
},
{
"王五": "1",
"赵六": "2"
},
]
},
{
"BB": [
{
"钱八": "1",
"孙九": "2"
},
{
"朱十": "1",
"石易": "2"
},
]
}
},
{
"B": [
{
"CC": [
{
"黄一": "1",
"袁二": "2"
},
{
"猴子": "1",
"牛大": "2"
},
]
}
}
]
}
// allData存放所有数据
const allData = res.data;
// allMapData存放所有的数据的Map类型
const allMapData = new Map(); // {'A' => Array(2), 'B' => Array(1)}
// second存放二级的数据的Map类型值
const secondMapData = new Map();
// firstTableData为双向绑定的第一个数组,secondTableData为第二个数组
const firstTableData = allData.map((item) => {
const keys = Object.keys(item)[0];
allMapData.set(keys, item[keys]); // Map存值语法
return keys;
});
console.log("firstTableData: ", firstTableData); // ['A', 'B']
// selet 点击事件之后,需要获取第一个表格的值,值为params对应数组的key
function firstClick(params) {
const firstMapDataArray = allMapData.get(params); // Map取值语法 first存放一级的数据的取值数组
secondMapData.clear(); // 清空上一次赋值
const secondTableData = firstMapDataArray.map((item) => {
const keys = Object.keys(item)[0];
secondMapData.set(keys, item[keys]);
return keys;
});
console.log("secondMapData: ", secondMapData);
}
function secondClick(params) {
const thirdTableData = secondMapData.get(params);
console.log("thirdTableData: ", thirdTableData);
}
firstClick("A"); // ['AA ', 'BB']
secondClick("AA"); //'AA'的两个数组