Devextreme-Vue模板中如何使用v-model实现新增用户数据绑定？

你当前使用的是DevExtreme DataGrid的内置popup编辑模式，默认无需手动给DxItem添加v-model，框架会自动将表单项和绑定的数据源对应字段做双向同步。如果需要自定义绑定逻辑，按以下方式操作：

• 基础绑定（无自定义控件场景）
  直接给顶层DxDataGrid组件用v-model绑定你的用户列表数据源即可，新增、编辑的用户数据会自动同步到该数据源中：

<template>
  <!-- 给DataGrid绑定v-model到用户列表 -->
  <DxDataGrid
    v-model:data-source="userList"
    :show-borders="true"
  >
    <DxPaging :enabled="false"/>
    <DxEditing
      :allow-updating="true"
      :allow-deleting="false"
      :confirm-delete="false"
      :allow-adding="true"
      mode="popup"
    >
      <DxPopup
        :show-title="true"
        :width="700"
        :height="525"
        title="新增用户"
      />
      <DxForm>
        <DxItem
          :col-count="2"
          :col-span="2"
          item-type="group"
        >
          <DxItem data-field="name" caption="姓名"/>
          <DxItem data-field="surname" caption="姓氏"/>
          <DxItem data-field="userName" caption="用户名"/>
          <DxItem data-field="password" caption="密码"/>
          <DxItem data-field="role" caption="角色"/>
        </DxItem>
      </DxForm>
    </DxEditing>
    <!-- 定义列和dataField对应 -->
    <DxColumn data-field="name" caption="姓名"/>
    <DxColumn data-field="surname" caption="姓氏"/>
    <DxColumn data-field="userName" caption="用户名"/>
    <DxColumn data-field="role" caption="角色"/>
  </DxDataGrid>
</template>

<script setup>
import { ref } from 'vue'
import DxDataGrid, { DxColumn, DxPaging, DxEditing, DxPopup, DxForm, DxItem } from 'devextreme-vue/data-grid'

// 用户列表数据源，v-model绑定后新增/编辑的数据会自动同步到这里
const userList = ref([
  // 初始用户数据可放在此处
])
</script>

• 自定义表单项绑定（需要特殊控件/逻辑场景）
  如果某字段需要自定义输入控件（比如密码要隐藏输入、角色要下拉选择），使用DxItem的template插槽，在插槽内的组件上用v-model绑定当前行的表单数据即可：

<DxItem data-field="password" caption="密码">
  <template #default="{ data }">
    <!-- v-model绑定data.value就是当前password字段的双向绑定入口 -->
    <DxTextBox
      v-model:value="data.value"
      mode="password"
      placeholder="请输入密码"
    />
  </template>
</DxItem>

<DxItem data-field="role" caption="角色">
  <template #default="{ data }">
    <DxSelectBox
      v-model:value="data.value"
      :items="['管理员', '普通用户', '访客']"
      placeholder="请选择角色"
    />
  </template>
</DxItem>

• 自定义提交逻辑
  如果需要在新增用户提交前后做自定义处理（比如密码加密、调用后端接口），可以监听DataGrid的rowInserting事件：

<DxDataGrid
  v-model:data-source="userList"
  :show-borders="true"
  @row-inserting="handleUserAdd"
>
<!-- 其他代码省略 -->
</DxDataGrid>

<script setup>
// 新增用户前触发的事件
const handleUserAdd = (e) => {
  // e.data就是当前新增的用户表单的所有数据
  console.log('新增的用户数据：', e.data)
  // 可以在这里做密码加密、调用接口提交等操作
  // 如果需要阻止默认提交逻辑，设置e.cancel = true即可
}
</script>

内容的提问来源于stack exchange，提问作者deniz