先描述一下情况。

若依框架的使用中,第一部分是搜索内容,第二部分是菜单栏,包括新增,删除,修改和导出等,第三部分是显示的内容form表单,第四部分是分页控件,第五部分是新增或删除的弹出框,最基础的布局。

若依自带的生成代码,删除时的提示以id来判断,但大部分页面,id是不需要显示的,且id并不好分辨,我需要把它改成,以计划的名称来提示。

1.修改多选方法

// 多选框选中数据
handleSelectionChange(selection) {
  this.ids = selection.map(item => item.kcId)
  this.names = selection.map(item => item.kcName)
  this.single = selection.length!==1
  this.multiple = !selection.length
},

ids就是选中的多个id,所以同理,如果想用名称,就加上names,如果想用别的,就加别的

2.修改删除方法

/** 删除按钮操作 */
handleDelete(row) {
  const kcIds = row.kcId || this.ids;
  const kcNames = row.kcName || this.names;
  this.$modal.confirm('是否确认删除课程名称为"' + kcNames + '"的数据项?').then(function() {
    return delKc(kcIds);
  }).then(() => {
    this.getList();
    this.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

这样,提示的时候,就会把选中的名称带入了,为了避免有名称重复,而删除数据多了的问题,我保留了id,删除时依旧以id为准,加了name只是为了增加页面的适用性。

Logo

快速构建 Web 应用程序

更多推荐