若依前后台分离生成主子表

最新推荐文章于 2025-03-27 21:22:30 发布

原创最新推荐文章于 2025-03-27 21:22:30 发布 · 3.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #vue.js #前端

收录于

这篇博客介绍了在Vue项目中如何实现表格数据与字表的关联操作。通过`el-input`组件绑定`peopleId`，利用`@focus`监听焦点事件触发成员信息对话框。在`memberInfoDialog`方法中，`scope.row.index`用于标识当前行，`choose`方法根据选中的行更新对应行的`peopleId`，实现了动态赋值的功能。

生成代码的时候关联选择字表，关联其中的父表id就行

input中的点击方式

 <el-input v-model="scope.row.peopleId" placeholder="请输入社员" @focus="memberInfoDialog(scope)"/>

点击方法中的scope可以获取到是是第几行

赋值的时候需要通过点击第几行给第几行赋值，list默认开始都是0，所以需要减去1

 memberInfoDialog(scope) {
      console.log(scope)
      this.memberInfoIndex = scope.row.index
      this.dialogVisible = true;

    },
    choose(row) {
      this.villageFamilyPeopleList[this.memberInfoIndex - 1].peopleId = row.name
      this.dialogVisible = false;
    },