前端点击按钮加载不出对话框

img


点开“编辑队员”，屏幕突然一直加载不出来，不知道是前端的问题还是数据库的问题
要做的是点击弹出一个可以填入信息的对话框，可以添加或删除条目
数据库如下，不知道为什么editpeople这个表不能给teamname字段设置主键，有1062错误，会不会是因为另一个表也有teamname字段（我打算设置外键，一个队名对应一个队伍人员信息，结果外键也设置不了）

img

相关模块代码如下（我觉得可能是data获取不到数据库信息）

        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            v-hasPermi="['system:team']"
          >队员分配</el-button>



    <!-- 添加或修改编辑队伍人员对话框 -->
          <el-dialog :title="title" :visible.sync="edit" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" 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>

                <el-row v-for="(e, item) in temp.peopleList" :key="item">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item label="电话" prop="peoplephone">
                <el-input v-model="form.peoplephone" placeholder="请输入电话" />
              </el-form-item>
              <el-form-item label="岗位" prop="position">
                <el-select v-model="form.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-row>

            </el-form>

            <el-col :span="3">

              <el-button
                size="mini"
                type="text"
                @click="deleteRow(item)"

              >删除</el-button>
            </el-col>

            <div slot="footer" class="dialog-footer">
              <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>



  /** 添加记录按钮操作 */
    /**
     * 新增<前端假新增>
     */
  lineAdd(item) {
      this.temp.peopleList.push({
        name: '',
        peoplephone: '',
        position: '',
      })
    },
    /**
     * 删除<前端假删除>
     * @param index 当前点击元素索引
     */
    deleteRow(item) {
      // console.log('index', index)
      this.$confirmBox('确定删除？', '提示').then(() => {
        for (let i = 0; i < this.temp.peopleList.length; i++) {
          if (item === i) {
            this.temp.peopleList.splice(i,1)
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          }
        }
      })

    },

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

data() {
    return {
     temp:[],
      defaultTemp:{
      },

:visible.sync="edit"这里绑定的edit，在data中没有定义

看下这个接口是否正确返回了

img

img