Vue前端：开发数据统计模块，给特定标签绑定链接，点击链接实现显示内容更新（分级显示）

---

前言

很多开发者在开发系统数据统计模块的时候，经常会遇到一个需求：先显示总体信息，再显示详细信息。
比如，查看整个公司的业务情况，往往是先按照部门统计，点击部门名称后可以查看该部门的详细信息。

具体统计示例如下：

总体统计信息（按部门分类）：

点击部门名称后查看该部门详细统计信息：

本文介绍了在Vue中，如何实现这种数据统计的呈现方式。

总体逻辑为：用v-if，在不同页面分类下实现不同的显示效果。
强调：页面显示内容的更新不涉及页面的跳转，仅仅是表格展示内容的更新。

---

一、逻辑解析

Vue中的v-if非常强大，我们可以利用v-if，在不同的页面条件下显示不同的内容。
为了实现切换，需要定义pageLevel变量，这个变量用来表明当前处在哪个分类模块下。
比如pageLevel=0表示查看总体统计信息，在向后台发送请求的时候，如果请求成功响应，就应该让pageLevel=0，通过v-if绑定，这时页面显示的内容就可以更新为总体统计信息；
pageLevel=1表示详细统计信息，v-if绑定后显示详细统计信息。

因此，我们需要在Vue界面中定义所有可能需要展示的，随时切换。

二、源代码实例

<table class="z-table" >
  <thead>
  
    <tr role="row" v-if="pageLevel==0">
      <th style="width: 30px;">序号</th>
      <th style="width: 100px;">部门名称</th>
      <th style="width: 180px">人员数量</th>
      <th style="width: 200px;">部门成交总金额</th>
      <th style="width: 100px;">部门成交总单数</th>
    </tr>

    <tr role="row" v-if="pageLevel==1">
      <th style="width: 30px;">序号</th>
      <th style="width: 200px;">部门名称</th>
      <th style="width: 100px">人员名称</th>
      <th style="width: 120px;">成交总金额</th>
      <th style="width: 200px;">成交总笔数</th>
    </tr>
  </thead>
  
  <!-- sjtj_totalLists表示统计总体信息，sjtj_detailLists表示统计详细信息-->
  <tbody v-if="pageLevel==0" >
    <template v-for="(item, index) in sjtj_totalLists" >
      <tr>
        <td>{{index + 1}}</td>
         <!-- 给部门名称绑定链接，实现点击部门名称即可跳转-->
        <td ><a @click="searchDetailInfo(item)">{{item.bmmc}}</a></td>
        <td>{{item.rysl}}</td>
        <td>{{item.bmcjzje}}</td>
        <td>{{item.bmcjzds}}</td>
      </tr>
    </template>
  </tbody>

  <tbody v-if="pageLevel==1" >
    <template v-for="(item, index) in sjtj_detailLists" >
      <tr >
        <td>{{index + 1}}</td>
        <td >{{item.bmmc}}</td>
        <td style="width:300px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">
          {{item.rymc}}
        </td>
        <td>{{item.cjzje}}</td>
        <td>{{item.cjzbs}}</td>
      </tr>
    </template>
  </tbody>
  
</table>

---

总结

本文介绍了一种在同一页面下，实现显示内容更新的方法，提供了详细的源代码和解释说明。
整理不易，希望对大家有用！