element checkbox显示问题

Question

期待的结果:
选中一个张文常,下面tabs中展示张文常的信息
选中张丽,下面tabs中展示张丽的信息
可以是多选的
如果不选中,对应的tabs隐藏

我的思路:
checkbox中的name是根据后台的数据循环出来的,返回的数据中有一个personId
当选中checkbox时,v-model绑定的checkList里会出现相对应的personId

            <el-checkbox-group v-model="checkList">
            <el-checkbox
            v-for="(item,index) in familyName" :key="index" v-if="index!=0"
            :label="item.personId"
            @change="handleCheckedCitiesChange"
            >{{item.name}}</el-checkbox>
             </el-checkbox-group>

<el-tabs type="card" class="employee-family" v-show="familyShow" v-for="(item, index) in checkList" :key="item.name">

      <el-tab-pane label="计划一"
        v-for="(item, index) in familyTab"
        :label="item.planName"
        :key="item.name"
        :name="item.PlanName"
      >

我想根据checkList中的personId去查找familyName中的personId是否存在
如果存在就让tabs出现,否则tabs隐藏

Answer 1

其实嘛，你的checkList可以就存personId，然后定义一个computed属性，根据checkList把需要的数据过滤出来，然后使用tab来迭代一下就好了

Answer 2

请问你解决了吗 我刚好遇到这个问题