三级联动的级联回调

11 篇文章 0 订阅
8 篇文章 0 订阅

  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,因为用户和表是一对多的关系。库和表也是一对多的关系。我删除了当前用户下所有的库,那么该库下的所有的表都会被删除。但问题就在这里:当前被删除的库下对应表可能不是当前被选中删除用户名下的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值