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

Bertha 。 2024-03-26 17:50 3阅读 0赞

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

*  前言
 *  一、逻辑解析
 *  二、源代码实例
 *  总结

--------------------

## 前言 ##

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

**具体统计示例如下：**

**总体统计信息（按部门分类）：**  
![在这里插入图片描述][84581f235a6b4bc2b8fd82dfbd6a7734.png]

**点击部门名称后查看该部门详细统计信息：**  
![在这里插入图片描述][1020fad2fa694fb8a7b090c2f36c7b72.png]

本文介绍了在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>
      
      
      <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>

--------------------

## 总结 ##

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

[84581f235a6b4bc2b8fd82dfbd6a7734.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/576f789e556742219f840531cb589c64.png
[1020fad2fa694fb8a7b090c2f36c7b72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/412d48790f3a4e34a01f77653c06a0b1.png