tab切换

最新推荐文章于 2024-08-02 11:00:31 发布

weixin_47375831

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量58

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_47375831/article/details/112675690

版权

该博客内容展示了如何使用HTML和Vue组件实现用户界面切换，通过点击不同的按钮显示不同的表格数据。`selectTable`方法用于根据用户选择在`tableData`和`tableTwoData`之间切换显示。博客重点讨论了前端界面元素的交互逻辑和数据绑定。

摘要由CSDN通过智能技术生成

          <div class="table-tab">
            <div
              class="select-one"
              :class="selectNum == 1 ? 'select' : 'hover-color'"
              @click="selectTable('1')"
            >阿阿阿</div>
            
            <div
              class="select-two"
              :class="selectNum == 2 ? 'select' : 'hover-color'"
              @click="selectTable('2')"
            >桑桑桑</div>
          </div>

<el-table :data="tableData" v-show="selectNum === 1"></el-table>
<TableTwo :tableTwoData="tableTwoData" v-show="selectNum === 2"></TableTwo>  //组件

export default {
    name: `strategy-analyse`,
    components: {
      TableTwo
    },
    data(){
        return{
            tableData: [],
            tableTwoData:[],
            selectNum:1,
        }
    },

   methods:{
        //   阿   桑
        selectTable(i){
            if( i === '1'){
                this.selectNum = 1;
            }else{
                this.selectNum = 2;
            }
        }
    }
}