先看下需求，在页面的顶部加入一样table，当我们点击table时底部的页面切换，中间的内容根据切换的tab来切换，tablei里还有小table，当点吉小table时，小table也跟着切换，先来看下实际的结果图
先说一下我的逻辑吧，我将顶部的table写成一个组件，将父组件渲染table的数据通过props将数据传递过来，在用watch监听props数据，当切换父组件时，顶部table实时更新，代码如下：
通过将父组件的数据拿到后，在页面上渲染出来，然后写2套css，一套是选中的状态还有一套是没有选中的状态，在html代码里，给class加上三木运算，根据某个参数来觉得当前选中的内容，
到现在是实现了，当点击父组件的内容是，顶部table实时更新，然后要实现的就是我们点击顶部的table，父组件的内容更新了，这里我们需要做的就是，获取到当前点击的是什么内容，然后通过emit函数，将我们选中的内容传递出去，让父组件根据我们传递的数据实时渲染。大概逻辑就是，我们顶部table里分一级table和二级table，这些都是通过for循环渲染出来的，for循环的key不就是最好的数据吗？代码如下
然后，因为我们的二级table是写在一级table里的，所以我们在一级table的点击事件里把emit写上，当我们点击一级table时，将当前选中的数据传递出去；
到这里后，还有一个小bug，就是，比如我们切换第一个table，第一个table的二级table选中了某一项后，然后切换到第二个table时会导致里面的二级table没有重置，因为我选中哪一个table都是通过下标来确定的，下标没有重置就会导致没有数据，比如我第一个table有3个二级table，而第二个table则只有2个，当我们在第一个table时将二级table选中第三个的话，就会导致我们切换到第二个table时第二个table的二级table没有选中数据，因为没有下标是2的数据，这时候我们就要监听一级table的下标，当下标变化时，将二级table的下标重置为0，也就是重新选中第一个table。
这里解释下，为什么在emit那里要用到settimeout，这是因为，像父组件传值比我们赋值要快，这样就是导致像父组件传的值都是旧值，，简单说，wacth比emit执行的慢，只能让emit等待下了，等watch将数据更新后在提交了。
总代码如下：
<template><divclass="table-container"><tablecellspacing="0"cellpadding="0"><tr><td :class="outerindex == key ? 'box' : 'onbox'" :style="key == 0 ? 'border-radius: 4px 0px 0px 4px;' : key == length - 1 ? 'border-radius: 0px 4px 4px 0px;' : ''"v-for="(item, key) in tabledata" :key="key"@click="table(key)"><span>{{ item.name }}</span><div><buttonv-for="(itemb, key) in item.tab" :key="key" :class="withinindex == key ? 'button' : 'onbutton'"@click="innertable(key)">{{ itemb.tabName }}</button></div></td></tr></table></div></template><scriptlang="ts">import { reactive, ref, watch, onMounted, computed } from"vue"exportdefault ({ name: 'tab', props: { tablearr: Object }, setup(props: any, contest: any) { // 思考 ref 响应式和 reactive 响应式的区别； 修改对象属性值，是否会刷新数据lettabledata=reactive(props.tablearr) console.log(props.tablearr, 12) letouterindex=ref(0) //外层大table每次默认选择第一个letwithinindex: any=ref(0) //里层小tab每次进入时默认选择第一个constlength=ref(0) onMounted(() => { length.value=props.tablearr.length }) watch(props, () => { //监听父组件传过来的props数据，当父组件切换小table时，子组件实时更新tabledata=props.tablearr }) watch(outerindex, () => { //当切换最外层的的table时，必须将里层的table重置到第一位withinindex.value=0 }) consttable= (key: any) => { //点击大table对小tab进行切换outerindex.value=keysetTimeout(()=>{contest.emit("item", [outerindex.value, withinindex.value])},50)//当点击table时，将当前选择的是哪个table告诉父组件，暂定格式是 [外层table的下标，里层table的下标] } constinnertable= (key: any) => { withinindex.value=key } return { tabledata, outerindex, table, withinindex, length, innertable } } }) </script><stylelang="stylus"scoped>.table-container{ td{ height:68px; width:173px; } span{ font-weight: 550; font-size:16px; } button{ width:45px; height:30px; border: none; margin-left:2px; } /*选中的状态 */ .box{ border: 1pxsolid#26D6B9;background: #F8FFFE;table{ border: 0; } span{ font-family: "思源黑体 Regular"; color: #3E3E3E; } .button,.onbutton{ border-bottom: 2pxsolid#26D6B9;background:rgba(0,0,0,0); color:#0AC8A9; } .onbutton{ border-bottom: 2pxsolid#E4E7ED;color:#707070; } } /*未选中的状态 */ .onbox{ border: 1pxsolid#DCDFE5;span{ color: #707070; } button{ border-bottom: 2pxsolid#E4E7ED;background:rgba(0,0,0,0); color:#707070; } } } </style>
父组件传递来的数据：
tabs: [{buttonName: '新增排放源', tab: [ { tabName: '材料', name: 1, sendType: 10 }, { tabName: '能耗', name: 2, sendType: 11 },}, {buttonName: '新增排放源', tab: [ { tabName: '材料', name: 1, sendType: 10 }, { tabName: '能耗', name: 2, sendType: 11 },}]
BAIBAI
