vue，如何設(shè)置 th的數(shù)據(jù)checkbox為true的時候，對應(yīng)的td顯示數(shù)據(jù)，否則隱藏，如下圖和代碼

問題如下

想要的效果，

默認checkbox都是true,所有表格的每一列都顯示數(shù)據(jù)，
當其中一個checkbox是false時，該列的數(shù)據(jù)不顯示，
true則顯示

代碼

表格頭數(shù)據(jù)

    tableTitleTable: [
        {
          item: "ID",
          isChecked: true
        },
        {
          item: "講義標題",
          isChecked: true
        },
        {
          item: "所屬教材",
          isChecked: true
        },
        {
          item: "年級",
          isChecked: true
        },
        {
          item: "科目",
          isChecked: true
        },
        {
          item: "使用次數(shù)",
          isChecked: true
        },
        {
          item: "創(chuàng)建人",
          isChecked: true
        },
        {
          item: "創(chuàng)建時間",
          isChecked: true
        }
      ]

表格th

                <thead>
                    <tr>
                        <th class="lecture_check">
                            <label class="checkbox-all">
                                <input type="checkbox" />
                                <span></span>
                            </label>
                        </th>
                        <th v-for="item in tableTitleTable" :key="item.id">
                            {{item.item}}
                        </th>
                    </tr>
                </thead>

表格td

                <tr v-for="(item,index) in lectureData" :key="item.id">
                        <td class="lecture_check td-hover-dialog">
                            <label class="checkbox">
                                <input type="checkbox" />
                                <span></span>
                            </label>
                            <!-- 有向下箭頭的框框 -->
                            <div @click="controlToggle(index)" class="hover-btn">
                                <!-- <div @click="controlToggle(item)" class="hover-btn"> -->
                                <span></span>
                            </div>
                            <!-- 點擊后彈出的框框 -->
                            <ul v-show="cindex === index && controlDialog" class="hover-dialog">
                                <!-- <ul v-show="controlDialog" class="hover-dialog"> -->
                                <li @click="controlHide" class="dialog-item">禁用</li>
                                <li @click="controlHide" class="dialog-item">編輯</li>
                                <li @click="controlHide" class="dialog-item">刪除</li>
                            </ul>
                        </td>
                        <td class="lecture_id">{{item.id}}</td>
                        <td class="td-title">{{item.title}}</td>
                        <td>{{item.textbookName}}</td>
                        <td>{{item.gradeName}}</td>
                        <td>{{item.subjectName}}</td>
                        <td>{{item.useCount}}</td>
                        <td>{{item.createName}}</td>
                        <td>{{item.createTime}}</td>
                    </tr>

篩選

                      <li v-for="(item) in tableTitleTable" :class="{'actived':item.isChecked}" :key="item.id" class="body-item">
                            <label class="checkbox">
                                <input v-model="item.isChecked" type="checkbox" />
                                <!-- <input v-model="itemTexAtctived" type="checkbox" @click="changeChecked(index)"/> -->
                                <span></span>
                            </label>
                            <span class="item-text">{{item.item}}</span>
                        </li>