Element实现二维展开列表（嵌套表）

最新推荐文章于 2024-09-25 12:02:48 发布

一口粥粥

最新推荐文章于 2024-09-25 12:02:48 发布

阅读量2.8k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript elementui 前端框架

本文链接：https://blog.csdn.net/ECHOZCL/article/details/122743728

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于用户访问日志统计数据项内容较多，需要对数据项进行分级显示，便于直观查看；接口获取的数据项都保存在一个list内，前端对数据拆分处理实现展开显示子表效果。

效果图如下：
在这里插入图片描述

实现思路：使用el-table的type=”expand“属性，接口请求获取的list父表，子表的字段值保存在一起，method对请求获取的list进行拆分，子表字段值保存在tableData的childRowData中，在el-table绑定的list数据中增加childRowData对象保存嵌套表list，template内置插槽slot使用el-table显示子表
代码如下：

<!--  html部分 -->
 <el-table
        style="width: 100%"
        ref="table"
        :data="tableData"
        tooltip-effect="dark"
        highlight-parcelItem-row
        border
        :height="tableHeight"
        show-overflow-tooltip
        stripe
        :header-cell-style="{ background: '#dcdfe6' }"
      >
      <!--子表实现 -->
        <el-table-column type="expand">
          <template v-slot="slot">
            <el-table  :data="slot.row.childRowData" style="width: 90%" ref="table" :header-cell-style="{ background: '#dcdfe6' }" >
              <el-table-column label="" prop="tagName"></el-table-column>
              <el-table-column label="访问量" prop="pvCount"></el-table-column>
              <el-table-column label="访问人数" prop="uvCount"></el-table-column>
              <el-table-column label="新增用户数" prop="newaddCount"></el-table-column>
              <el-table-column label="会员升级数" prop="upgradeCount"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="访问日期" prop="dailyDate"></el-table-column>
        <el-table-column label="访问总量" prop="pvCount"></el-table-column>
        <el-table-column
          label="游客访问量"
          prop="pvCountTourist"
        ></el-table-column>
        <el-table-column label="总访问人数" prop="uvCount"></el-table-column>
        <el-table-column
          label="游客访问人数"
          prop="uvCountTourist"
        ></el-table-column>
        <el-table-column
          label="新增访问人数"
          prop="newaddCount"
        ></el-table-column>
        <el-table-column
          label="新增游客访问人数"
          prop="newaddCountTourist"
        ></el-table-column>
        <el-table-column
          label="会员升级总数"
          prop="upgradeCount"
        ></el-table-column>
      </el-table>

methods处理方法代码：

search() {
      statApi.listStatIndex(this.filterData, this.pageInfo, {
        success: (data) => {
          this.tableData = data.result;
          this.expandRow = [];
          this.tableData.forEach((item,index) => {
            this.expandRow = [];
            const childRowData1 = {};
            childRowData1.tagName = "V1";
            childRowData1.pvCount = item.pvCountV1;
            childRowData1.uvCount = item.uvCountV1;
            childRowData1.newaddCount = item.newaddCountV1;
            childRowData1.upgradeCount = item.countToV1;
            this.expandRow.push(childRowData1);
            const childRowData2 = {};
            childRowData2.tagName = "V2";
            childRowData2.pvCount = item.pvCountV2;
            childRowData2.uvCount = item.uvCountV2;
            childRowData2.newaddCount = item.newaddCountV2;
            childRowData2.upgradeCount = item.countToV2;
            this.expandRow.push(childRowData2);
            const childRowData3 = {};
            childRowData3.tagName = "V3";
            childRowData3.pvCount = item.pvCountV3;
            childRowData3.uvCount = item.uvCountV3;
            childRowData3.newaddCount = item.newaddCountV3;
            childRowData3.upgradeCount = item.countToV3;
            this.expandRow.push(childRowData3);
            this.tableData[index].childRowData = this.expandRow;
          });
          this.pageInfo.totalElements = data.page.totalElements;
        },
        fail: (data) => {
          this.$notify({
            title: "错误",
            message: data.msg,
            type: "error",
          });
        },
      });
    },