把队伍和对应的人员信息关联起来在前端上显示

续上一个问题。搞了半天数据库没有问题反而是前端的问题……

需求是点击一个队伍就可以查询和修改相应人员的信息，比如说想把这两个属于1队的队员和1队关联起来，点击1队的队员分配按钮就会出现两个人的信息。但现在问题是添加一个队员后其他队伍都会出现同一个队员，两个表关联不上。


   <!-- 添加或修改编辑队伍人员对话框 -->
          <el-dialog :title="title" :visible.sync="edit" width="500px" append-to-body>
            <el-form ref="form1" :model="form1" :rules="rules1"  label-width="80px">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="lineAdd"

                >新增</el-button>

              </el-col>

              <table v-for="(form1, index) in editpeopleList" :key="index">

              <el-form-item label="姓名" prop="name">
                    <el-input  v-model="form1.name" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="电话" prop="peoplephone">
                    <el-input  v-model="form1.peoplephone" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="岗位" prop="position">
                    <el-select  v-model="form1.position" placeholder="请选择">
                      <el-option
                        v-for="dict in dict.type.position"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="deleteRow()"
                    v-hasPermi="['system:team:remove']"
                  >删除</el-button>
              </table>
            </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button :loading="buttonLoading" type="primary" @click="submitEdit">确 定</el-button>
                  <el-button @click="cancel">取 消</el-button>
                </div>
              </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

created() {
    this.getList();

  },
  methods: {

      /** 查询team列表 */
    getList() {
      this.loading = true;
      listTeam(this.queryParams).then(response => {
        this.teamList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

  // team表格数据
      teamList: [],
      editpeopleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teamname: undefined,
        address: undefined,
        leader: undefined,
        phone: undefined,
        city: undefined,
        situation: undefined,
        leaderteam: undefined,

        name: undefined,
        peoplephone: undefined,
        position: undefined,
      },

      // 表单参数
      form: {},
      form1: {},

  /** 分配队员按钮操作 */
    handleEdit(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getEditpeople(id).then(response => {
        this.loading = false;
        this.form1= response.data;
        this.edit= true;
        this.title = "编辑队伍人员";
      });
    },

 /** 提交按钮 */
    submitEdit() {
      this.$refs["form1"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;

            updateEditpeople(this.form1).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.edit = false;
            }).finally(() => {
              this.buttonLoading = false;
            });

          }

      });
    },

你在插入数据的时候有队伍区分么？我看好像是根据队伍名称区分的

添加队员信息点击确认后应该是请求接口将信息存入后台再次点击队伍的队员分配按钮后也应该是重新请求接口去获取该队伍下的对员信息数据的操作都是要反应到后台中前端只是一个数据展示的作用

前端那一块改了一下，现在变成了数据库所有人员信息都出现在编辑窗口中，依然没有分别对应上每个队伍，而且由于teamname设置为不能为NULL，新增人员点击保存，也不能将新增的信息存入数据库中，第二次打开也不会显示新增的信息
通过后台接口把队伍跟人员联系起来，现在的问题是不知道怎么改后台代码，该用id还是teamname将两个表联系起来

【相关推荐】

你可以看下这个问题的回答https://ask.csdn.net/questions/744813
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：获取数组对象里面相同值的最后一个对象，数组对象求相同数据的最后一个对象
您还可以看一下 MDCC2016老师的移动直播技术专场：百万弹幕下的直播礼物系统课程中的百万弹幕下的直播礼物系统（上）小节, 巩固相关知识点
除此之外, 这篇博客: 前端的杂谈中的 2：如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
```
  age({name: "Tome", age: 20, isMan: true});

  function age({name, age, isMan, height = 180}) {
    console.log(name, age, isMan, height); //Tome 20 true 180
  }
```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^