Vuejs+Vuetify组件v-select与v-checkbox联动实现求助

我正在开发基于Vue.js和Vuetify的应用，现有两个组件：MyTableFirst.vue和FirstCall.vue，需求是：勾选MyTableFirst.vue中的复选框时，显示该行对应的v-select组件。

现有代码 #

MyTableFirst.vue #

<template>
    <v-data-table class="blue-header" :headers="headers" :items="items" density="compact" hover="true"
        no-data-text="Pas de données disponibles" :fixed-header="true" :items-per-page="-1" :height="250"
        item-value="seq" select-strategy="single" show-select hide-default-footer v-model:selected="selectedItems">


        <template v-slot:[`item.select_sortant`]="{ item }">
            <!-- <div v-if="isSelected(item)"> -->
            <v-select :items="listActions" v-model="item.action" item-title="action"
                item-value="seq">
            </v-select>
            <!-- </div> --> 
        </template>

        <template v-slot:[`item.calldate_sortant`]="{ item }">
            {{ formatDateTime(item.raw.calldate_sortant) }}
        </template>


    </v-data-table>
</template>

FirstCall.vue #

<MyTableFirst :headers="headers" :items="list" v-model="selected">
</MyTableFirst>

<script>
const selected = ref([]);
        watch(
            selected,
            (newVal) => {
                console.log('Selected items:', newVal);
            },
            { deep: true }
        );
        const save = async () => {
            console.log(selected.value)

        };
</script>

解决方案 #

要实现勾选行时才显示对应v-select，只需在子组件中添加选中判断逻辑，控制组件的显示：

1. 修改MyTableFirst.vue #

<template>
  <v-data-table 
    class="blue-header" 
    :headers="headers" 
    :items="items" 
    density="compact" 
    hover="true"
    no-data-text="Pas de données disponibles" 
    :fixed-header="true" 
    :items-per-page="-1" 
    :height="250"
    item-value="seq" 
    select-strategy="single" 
    show-select 
    hide-default-footer 
    v-model:selected="selectedItems"
  >
    <template v-slot:[`item.select_sortant`]="{ item }">
      <!-- 仅当前行被选中时显示v-select -->
      <v-select 
        v-if="isItemSelected(item)"
        :items="listActions" 
        v-model="item.action" 
        item-title="action"
        item-value="seq"
      ></v-select>
    </template>

    <template v-slot:[`item.calldate_sortant`]="{ item }">
      {{ formatDateTime(item.raw.calldate_sortant) }}
    </template>
  </v-data-table>
</template>

<script setup>
import { ref, computed } from 'vue';

// 接收父组件传递的参数
const props = defineProps({
  headers: Array,
  items: Array,
  modelValue: {
    type: Array,
    default: () => []
  }
});

// 用于更新父组件的选中状态
const emit = defineEmits(['update:modelValue']);

// 双向绑定选中项，同步父组件的v-model
const selectedItems = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  }
});

// 判断当前行是否被选中
const isItemSelected = (item) => {
  return selectedItems.value.some(selected => selected.seq === item.seq);
};

// 假设你已定义以下内容（根据实际业务调整）
const listActions = ref([/* 你的下拉选项数据 */]);
const formatDateTime = (date) => {
  return new Date(date).toLocaleString(); // 示例格式化逻辑
};
</script>

2. 确认FirstCall.vue的配置 #

父组件代码无需大幅修改，只需确保list和headers已正确初始化：

<template>
  <MyTableFirst 
    :headers="headers" 
    :items="list" 
    v-model="selected"
  ></MyTableFirst>
</template>

<script setup>
import { ref, watch } from 'vue';
import MyTableFirst from './MyTableFirst.vue';

const selected = ref([]);
// 替换为你的实际表格数据和表头配置
const list = ref([/* 表格数据 */]);
const headers = ref([/* 表头配置 */]);

watch(
  selected,
  (newVal) => {
    console.log('选中项:', newVal);
  },
  { deep: true }
);

const save = async () => {
  console.log(selected.value);
};
</script>

核心逻辑说明 #

• 通过v-data-table的v-model:selected获取选中行数据，同步父组件的v-model
• 用isItemSelected方法，通过唯一标识seq判断当前行是否在选中列表中
• 结合v-if指令，仅在该行被选中时渲染v-select组件

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