如何为Vuetify表格每行的下拉选择框设置默认值？

问题场景 #

你的VDataTable每行都有一个下拉选择框，当前所有下拉框默认选中id为1的状态，需要修改为每行对应数据自身的状态id作为默认值。

可行实现方式 #

方式一：直接绑定数据项的状态字段（推荐） #

这种方式最简单，直接将下拉框的v-model绑定到当前行数据的状态字段上，默认值自动对应数据本身的状态，还能实时同步修改后的值到原数据中。

修改后的模板代码：

<VDataTable
        v-model:expanded="expanded"
        :items-per-page="5"
        :headers="headers"
        :items="requests"
        item-value="id"
        class="elevation-1"
        show-expand
        :loading="loading"
    >
        <template v-slot:top>
            <VToolbar flat>
                <v-toolbar-title>Estimate Requests</v-toolbar-title>
            </VToolbar>
        </template>
        <template #item.customer_name="{ item }"> {{ item.raw.customer.fname }} {{ item.raw.customer.lname }} </template>
        <!-- 修改v-model为当前item的状态id字段，这里假设字段是status_id，根据你的实际数据字段调整 -->
        <template #item.status="{ item }">
            <v-select
                item-title="status"
                item-value="id"
                v-model="item.raw.status_id"
                :items="statuses"
            />
        </template>
        <template v-slot:expanded-row="{ columns, item }">
            <tr>
                <td :colspan="columns.length">
                    <address>{{item.raw.address}}<br />{{item.raw.city}}, {{item.raw.state}} {{item.raw.zip}}</address>
                </td>
            </tr>
        </template>
    </VDataTable>

修改后的脚本代码：

<script>
export default {
    components: {Card},
    data () {
        return {
            expanded:[],
            headers: [
                { title: 'ID', align: 'start', key: 'id' },
                { title: 'Name', align: 'start', key: 'customer_name' },
                { title: 'Email', align: 'start', key: 'customer.email' },
                { title: 'Status', align: 'start', key: 'status' },
            ],
            // 移除全局的defaultSelected，不再需要
        }
    },
}
</script>

方式二：用键值对独立存储选中状态 #

如果不想直接修改原数据，可以用一个对象来存储每行的选中状态，初始化时将每个请求的ID作为键，对应的值设为该请求的状态ID。

修改后的脚本代码：

<script>
export default {
    components: {Card},
    data () {
        return {
            expanded:[],
            headers: [
                { title: 'ID', align: 'start', key: 'id' },
                { title: 'Name', align: 'start', key: 'customer_name' },
                { title: 'Email', align: 'start', key: 'customer.email' },
                { title: 'Status', align: 'start', key: 'status' },
            ],
            selectedStatuses: {} // 存储每行选中状态的键值对
        }
    },
    created() {
        // 假设你在created或其他钩子中获取了requests数据
        // 初始化选中状态，这里假设requests中每个item的状态字段是status_id
        this.selectedStatuses = this.requests.reduce((obj, item) => {
            obj[item.id] = item.status_id;
            return obj;
        }, {});
    }
}
</script>

修改后的模板中下拉框部分：

<template #item.status="{ item }">
    <v-select
        item-title="status"
        item-value="id"
        v-model="selectedStatuses[item.id]"
        :items="statuses"
    />
</template>

注意事项 #

• 确保requests数组中的每个数据项都包含对应的状态ID字段（比如示例中的status_id），且该字段的值与statuses选项中的id匹配。
• 如果使用方式一，后续提交数据时可以直接从requests中获取更新后的状态值。

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