vue中的form表单打开编辑按钮，打开弹窗，怎样默认拿到当行的id，而不用我们手动输入

要默认获取当前行的id，可以在打开弹窗的时候，将当前行的id作为参数传递给弹窗组件，在弹窗组件中使用props来接收这个id，然后在表单中设置一个隐藏的input，将这个id赋值给这个input的value属性，这样就可以在提交表单时将这个id一起提交了。

具体的做法如下：

1. 在列表中每一行的编辑按钮上绑定一个点击事件，将当前行的id作为参数传递给弹窗组件：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button @click="openEditDialog(item.id)">编辑</button>
          </td>
        </tr>
      </tbody>
    </table>
    <EditDialog :id="currentId" />
  </div>
</template>

<script>
import EditDialog from './EditDialog.vue'
export default {
  components: {
    EditDialog
  },
  data() {
    return {
      list: [],
      currentId: null
    }
  },
  methods: {
    openEditDialog(id) {
      this.currentId = id
      this.$refs.editDialog.open()
    }
  }
}
</script>

2. 在弹窗组件中使用props接收id，并将其赋值给隐藏的input：

<template>
  <div class="dialog" :style="{ display: display }">
    <form>
      <input type="hidden" name="id" :value="id" />
      <div>
        <label>姓名：</label>
        <input type="text" name="name" v-model="name" />
      </div>
      <button type="button" @click="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      display: 'none',
      name: ''
    }
  },
  methods: {
    open() {
      this.display = 'block'
    },
    close() {
      this.display = 'none'
    },
    submit() {
      // 提交表单
    }
  }
}
</script>