嘿，这事儿不难！要给你的v-data-table每行的available列加上下拉选择器，还能自动保存用户的选择，我直接给你改好代码，再给你拆解关键步骤：

修改后的完整代码 #

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <tr @click="props.expanded = !props.expanded">
        <td class="text-xs-right">{{ props.item.name}}</td>
        <td class="text-xs-right">{{ props.item.calories}}</td>
        <td class="text-xs-right">{{ props.item.fat}}</td>
        <td class="text-xs-right">{{ props.item.carbs}}</td>
        <td class="text-xs-right">{{ props.item.protein}}</td>
        <!-- 替换原显示文本为v-select组件 -->
        <td class="text-xs-right">
          <v-select
            v-model="props.item.available"
            :items="['In stock', 'unavailable']"
            dense
            hide-details
            class="text-xs-right"
          ></v-select>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      // 补充完整表头（确保包含available列的表头）
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat', value: 'fat' },
        { text: 'Carbs', value: 'carbs' },
        { text: 'Protein', value: 'protein' },
        { text: 'Availability', value: 'available' }
      ],
      desserts: [
        { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, available: '' },
        { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, available: '' },
        { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, available: '' }
      ]
    }
  },
  // 可选：监听数据变化，做持久化或后端提交
  watch: {
    desserts: {
      deep: true, // 深度监听对象数组的变化
      handler(updatedDesserts) {
        // 这里可以写保存逻辑，比如存到本地存储
        localStorage.setItem('dessertsData', JSON.stringify(updatedDesserts));
        // 或者调用API提交到后端
        // this.$axios.post('/save-desserts', updatedDesserts);
        console.log('用户选择已更新:', updatedDesserts);
      }
    }
  }
}
</script>

关键说明 #

• 双向绑定保存选择：用v-model="props.item.available"把下拉选择器和desserts数组里对应项的available字段绑定，用户选完后数据会自动更新到数组里，不用额外写赋值逻辑。
• 适配表格布局：加了dense让选择器更紧凑，hide-details去掉默认的下划线提示，让它更贴合表格的样式，你可以根据需求调整这些属性。
• 表头要对应：确保headers数组里有available对应的表头项，不然表格可能不会正确渲染这一列。
• 持久化可选：如果需要刷新页面后不丢失用户的选择，就在watch里监听desserts的变化，把数据存到localStorage或者提交到后端就行。

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man