vue人人权限系统编辑功能正确获取每一行表单的值

在 Vue 中，可以使用 v-model 指令将表单元素的值绑定到组件的数据中。在获取每一行表单的值时，可以使用 v-model 绑定每个表单元素的值，然后在提交表单时获取组件数据中的值。

例如，假设你有一个表格，其中每一行都有一个编辑按钮，点击编辑按钮后可以弹出一个模态框，让用户编辑该行数据。你可以为每个表单元素绑定 v-model，然后在模态框中提交表单时，获取组件数据中的值。

示例代码：

<!-- 表格 -->
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in dataList" :key="index">
      <td>
        <input type="text" v-model="item.name">
      </td>
      <td>
        <input type="text" v-model="item.age">
      </td>
      <td>
        <button @click="editItem(index)">编辑</button>
      </td>
    </tr>
  </tbody>
</table>

<!-- 模态框 -->
<div v-if="showModal">
  <h2>编辑</h2>
  <form @submit.prevent="submitForm">
    <div>
      <label>姓名：</label>
      <input type="text" v-model="editItem.name">
    </div>
    <div>
      <label>年龄：</label>
      <input type="text" v-model="editItem.age">
    </div>
    <button type="submit">保存</button>
  </form>
</div>

export default {
  data () {
    return {
      dataList: [
        { name: '小明', age: 18 },
        { name: '小红', age: 20 },
        { name: '小刚', age: 22 }
      ],
      showModal: false,
      editItem: {}
    }
  },
  methods: {
    // 点击编辑按钮时，弹出模态框并将当前行的数据赋值给 editItem
    editItem (index) {
      this.editItem = { ...this.dataList[index] }
      this.showModal = true
    },
    // 提交表单时，更新 dataList 中对应的数据，并关闭模态框
    submitForm () {
      const index = this.dataList.findIndex(item => item === this.editItem)
      this.dataList.splice(index, 1, this.editItem)
      this.showModal = false
    }
  }
}

在上面的代码中，当用户点击编辑按钮时，会将当前行的数据赋值给 editItem，并弹出模态框。在模态框中，用户可以编辑该行数据，并在提交表单时更新 dataList 中对应的数据。每个表单元素都绑定了 v-model，这样就可以将用户输入的值实时同步到组件数据中。