如何将v-data-table行信息传递给子元素用于标签增删操作

解决方法 #

核心问题是两个作用域插槽的item变量重名了：外层item.tags插槽的item是当前行的用户信息，内层selection插槽的item是单个标签内容，把变量重命名区分开就能正常传递用户信息了，具体修改如下：

1. 调整模板代码 #

首先把外层插槽的用户对象重命名为user，避免和内层的标签item冲突，之后不管是删除还是新增标签的触发事件，都可以直接把user作为参数传递：

<v-data-table :headers="headers" :items="usersInfos" :search="search" :items-per-page="-1">
    <template v-slot:[`item.tags`]="{ item: user }">
        <!-- 新增@change事件监听标签新增/修改，传递当前用户和最新的标签数组 -->
        <v-combobox 
            v-model="user.tags" 
            :items="roles" 
            chips 
            clearable 
            label="Rôles" 
            multiple
            @change="handleTagsUpdate(user, $event)"
        >
            <template v-slot:selection="{ attrs, item: tag, select, selected }">
                <v-chip
                    v-bind="attrs"
                    :input-value="selected"
                    close
                    @click="select"
                    <!-- 关闭时同时传递要删除的标签和对应用户信息 -->
                    @click:close="removeRole(tag, user)"
                >
                    {{ tag }} <!-- 标签内容 -->
                </v-chip>
            </template>
        </v-combobox>
    </template>                 
</v-data-table>

2. 对应方法示例 #

你可以直接在方法里拿到用户完整信息和操作的标签内容：

methods: {
  // 删除标签时触发
  removeRole(tag, user) {
    console.log('要删除的标签：', tag)
    console.log('对应用户信息：', user)
    // 后续写你的业务逻辑即可，比如调用接口更新用户标签
  },
  // 标签新增/整体修改时触发
  handleTagsUpdate(user, newTags) {
    console.log('修改标签的用户：', user)
    console.log('修改后的标签数组：', newTags)
    // 后续写你的业务逻辑即可
  }
}

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