看起来您的目标是根据表示列的数据属性的选中状态来显示表列。如果是这样，那么再次，我将使所有数据具有React性，然后使用Vue的计算属性来帮助我们决定要显示什么。
因此，假设这表示列数据的简化：

const items = ref([
    { id: 0, text: 'date', checked: true },
    { id: 1, text: 'name', checked: false },
    { id: 2, text: 'day', checked: false },
    { id: 3, text: 'reason', checked: true },
    { id: 4, text: 'comment', checked: true },
]);

然后我们可以给第二个组件Overview. vue一个名为"columns"的 prop ：

const props = defineProps(['columns']);

然后是一个名为activeColumns的计算属性，它只保存"选中"列对象：

const activeColumns = computed(() => {
  return props.columns.filter((c) => c.checked);
});

然后让我们假设要在表中显示的数据看起来像这样（同样是简化）：

const tableData = ref([
    {
        "id": 1,
        "date": "2/1/2023",
        "name": "SNAFU",
        "day": "Wednesday",
        "reason": "Whatever 1",
        "comment": "Comment 1"
    },
    {
        "id": 2,
        "date": "2/2/2023",
        "name": "FUBAR",
        "day": "Thurday",
        "reason": "Whatever 2",
        "comment": "Comment 2"
    },
    //.... more data here

然后我们可以使用computed属性activeColumns in a v-for来决定要显示哪些数据：

<tbody>
    <tr v-for="row in tableData" :key="row.id">
        <td v-for="col in activeColumns" :key="col.id">{{ row[col.text] }}</td>
    </tr>
</tbody>

你还提到，
在每个div中，我有不同的组件，所以我不能用v-for循环。
但这并不一定是真的，因为你可以把你的组件放入一个数组或对象中，并使用动态组件来允许你循环访问它们：

// components that show the related table headers
import Date from './Date.vue';
import Name from './Name.vue';
import Day from './Day.vue';
import Reason from './Reason.vue';
import Comment from './Comment.vue';

const props = defineProps(['columns']);

const activeColumns = computed(() => {
  return props.columns.filter((c) => c.checked);
});

// an object that holds all the table headers  
const columnHeaders = ref({
  'date': Date,
  'name': Name,
  'day': Day,
  'reason': Reason,
  'comment': Comment
});

显示为动态组件：

<thead>
    <tr>
        <th v-for="col in activeColumns" :key="col.id">
           <component :is="columnHeaders[col.text]"></component>
        </th>
    </tr>
</thead>

例如：

应用程序版本

<template>
    <h2>Columns To Display</h2>
    <div v-for="(item, index) in items">
        <label for="item.id">
            <input type="checkbox" v-model="item.checked" :value="item.id" :name="item.id" />
            {{ item.text }}
        </label>

    </div>

    <hr>
<Overview :columns="items"></Overview>
</template>
    
<script lang="ts" setup>

import { ref } from 'vue';
import Overview from './Overview.vue';

const items = ref([
    { id: 0, text: 'date', checked: true },
    { id: 1, text: 'name', checked: false },
    { id: 2, text: 'day', checked: false },
    { id: 3, text: 'reason', checked: true },
    { id: 4, text: 'comment', checked: true },
]);
</script>

和概述

<template>
    <h2>
        Overview
    </h2>
    <table>
        <thead>
            <tr>
                <th v-for="col in activeColumns" :key="col.id">
                   <component :is="columnHeaders[col.text]"></component>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in tableData" :key="row.id">
                <td v-for="col in activeColumns" :key="col.id">{{ row[col.text] }}</td>
            </tr>
        </tbody>
</table>
</template>
  
<script lang="ts" setup>

import { ref, computed, defineProps } from 'vue';
import Date from './Date.vue';
import Name from './Name.vue';
import Day from './Day.vue';
import Reason from './Reason.vue';
import Comment from './Comment.vue';

const props = defineProps(['columns']);

const activeColumns = computed(() => {
  return props.columns.filter((c) => c.checked);
});
  
const columnHeaders = ref({
  'date': Date,
  'name': Name,
  'day': Day,
  'reason': Reason,
  'comment': Comment
});  

const tableData = ref([
    {
        "id": 1,
        "date": "2/1/2023",
        "name": "SNAFU",
        "day": "Wednesday",
        "reason": "Lorem ipsum",
        "comment": "dolor sit amet, consectetur adipiscing elit"
    },
    {
        "id": 2,
        "date": "2/2/2023",
        "name": "FUBAR",
        "day": "Thurday",
        "reason": "Ut enim",
        "comment": "ad minim veniam, quis nostrud exercitation"
    },
    {
        "id": 3,
        "date": "2/3/2023",
        "name": "BUZBAF",
        "day": "Friday",
        "reason": "Duis aute irure",
        "comment": "dolor in reprehenderit in voluptate velit esse cillum dolore"
    },
    {
        "id": 4,
        "date": "2/4/2023",
        "name": "FOO",
        "day": "Saturday",
        "reason": "Excepteur sint occaecat",
        "comment": "cupidatat non proident, sunt in culpa qui officia"
    },
    {
        "id": 5,
        "date": "2/5/2023",
        "name": "BAR",
        "day": "Sunday",
        "reason": "Sed ut perspiciatis",
        "comment": "unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
    }
]);
</script>
  
<style scoped>
table {
    border-collapse: collapse;
    border: 1px solid #FF0000;
}

table td,
th {
    border: 1px solid #FF0000;
    padding: 2px 10px;
}
</style>

对于用作表头的组件数组：

日期

<template>
  Date
</template>

名称值

<template>
  Name
</template>

日值

<template>
  Day
</template>

原因值

<template>
  Reason
</template>

备注值

<template>
  Comment
</template>

您应该更改JSON对象。

const activeDivs = {
      date: { id: 0, text: "date", checked: true },
      name: { id: 1, text: "name", checked: false },
      day: { id: 2, text: "day", checked: false },
      time: { id: 3, text: "time", checked: false },
      created: { id: 4, text: "created", checked: false },
      reason: { id: 5, text: "reason", checked: true },
      comment: { id: 6, text: "comment", checked: true },
    };

如果你不能改变JSON结构，那么使用find方法访问单个对象。

found = activeDivs.find((element) => element.text == 'date');

或者你可以用computed把你的数组转换成你想要的对象。