三級聯動的級聯回調

  PM的需求是點擊用戶的×,刪除當前用戶名下所有的庫和表。即進行一個級聯回調的操作。如下圖:

在這裏插入圖片描述
  主要做法就是利用map的k v鍵值對的方式。
map鍵值對的知識點:

	var m = new Map();
	m.set("edition", 6)    // 鍵是字符串
	m.set(262, "standard")   // 鍵是數值
	m.set(undefined, "nah")  // 鍵是undefined

用戶的刪除主要是用了Element UI框架裏面的tag標籤刪除的辦法。

handleClose(tag) {
  this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
}

首先是找到user對應下的庫:

this.mapUser = new Map();
res.data.forEach((data) => {
  this.mapUser.set(data.user, this.dbName);
});

然後利用庫獲取到用戶名下的表:

const arr = [];
res.data.forEach((data) => {
  arr.push(data.tableName);
  console.log(data.tableName);
});
this.mapTable.set(this.dbName, arr);
console.log(this.mapTable);

最後用tag標籤的刪除方法進行庫和表的刪除操作:

handleClose(tag) {
  this.userList.splice(this.userList.indexOf(tag), 1);
  
  const dbName1 = this.mapUser.get(tag);
  this.dbList.splice(this.dbList.indexOf(dbName1), 1);
  
  const tableArr = this.mapTable.get(dbName1);
  tableArr.forEach((data) => {
    this.tableList.splice(this.tableList.indexOf(data), 1);
  });
},

但其實這裏最好的做法是找後端要一個接口來反查user 和table,因爲用戶和表是一對多的關係。庫和表也是一對多的關係。我刪除了當前用戶下所有的庫,那麼該庫下的所有的表都會被刪除。但問題就在這裏:當前被刪除的庫下對應表可能不是當前被選中刪除用戶名下的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章