当前位置：首页 > article >正文

vue3 + element-plus + el-table 实现三层嵌套表格（含分页）

article 2025/1/16 1:38:35

概述

项目需求表格嵌套表格，一共三层表格，第二层基于第一层数据显示（流加载），第三层基于第二层数据（分页加载）。一下实现效果ui图！日常需求小记录！佛系记录！
在这里插入图片描述
首先我这里使用的是 element-plus 的表格去实现的（含有扩展行 expand配置项），这个图没什么难得，就是逻辑交互可能稍微复杂一点！

先看第一层代码：

// row-key="" 绑定唯一性id值      
// expand-row-keys 这个配置展开得行     
// @expand-change扩展行变化 可在官网查看
// 控制第二层得展开 和获取
<el-table
        :data="state.deptListData"
        stripe
        border
        class="flex1"
        height="100%"
        row-key="deptId"
        :header-cell-style="{ 'text-align': 'center' }"
        v-loading="state.deptLoading"
        :expand-row-keys="policeState.deptExpands"
        @expand-change="deptExpandsChange"
      >

		<el-table-column type="expand">
          <!--第二层嵌套 民警-->
          <template #default="{ row }">
          	<!--流加载配置   loadPoliceList 滚动条拉到底部触发 请求第二页数据-->
          	<!--通过 police-box css设置固定高度，因为要用流加载   ofa：overflow: auto;  dn-scroll：隐藏滚动条-->
            <div
              class="police-box ofa dn-scroll"
              v-infinite-scroll="loadPoliceList"
              :infinite-scroll-distance="15"
              :infinite-scroll-delay="300"
              :infinite-scroll-immediate="false"
            >
			<!--这里跟第一层是一样得 控制第三层得展开和获取-->
              <el-table
                v-if="policeState.policeChildren.length"
                :data="policeState.policeChildren"
                :show-header="false"
                class="police-table"
                row-key="investigatorBadgeNum"
                :expand-row-keys="suspectState.policeExpands"
                @expand-change="policeExpandsChange"
              >
                <el-table-column type="expand">
                  <!--第三层嵌套 嫌疑人-->
                  <template #default="{ row }">
                    <el-table
                      :data="suspectState.suspectChildren"
                      :cell-style="{ 'text-align': 'center' }"
                      :header-cell-style="{ 'text-align': 'center' }"
                    >
                      <!--第三层的列   这里并没有设置暂无数据，因为在全局表格中已经通过css 设置过了，你这里如果没设置，可以加上-->
                    </el-table>

					<!--封装的分页 没有数据就不显示分页-->
                    <Pagination
                      v-show="suspectState.suspectChildren.length"
                      :pageSizes="[10, 20, 30]"
                      :pageData="suspectState.suspectPageData"
                      @filter="getSuspectList"
                    ></Pagination>
                  </template>
                </el-table-column>

                <!--第二层其余列数据-->
              </el-table>
              <div v-else class="h100 w100 flex flex-center">暂无数据</div>
            </div>
          </template>
        </el-table-column>


	<!--这里就是第一层其他列内容-->
</el-table>

// 流加载触发函数
const loadPoliceList = () => {
  if (policeState.policeChildren.length >= policeState.policePageData.total)
    return
  policeState.policePageData.pageNum += 1
  // 这里请求第二层数据
}


// 点击第一层 展开 收缩事件   第三层也照例就ok了
const deptExpandsChange = async (row: any, expandedRows: any) => {
// 重置查询条件  因为每个第二层都是公用的同一个分页
  policeState.policeChildren = []
  policeState.policePageData = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  }
  // 需关闭其他扩展行 保持一个扩展行的使用  子扩展行也要收缩
  suspectState.policeExpands = []
  policeState.deptExpands = []
  if (expandedRows.length) {
    if (row) {
      policeState.deptExpands.push(row.deptId)
      policeState.deptExpandCode = row.deptCode // 第二层所需参数
      // 这里去请求 第二层数据
      ...
    }
  }
}

// 第三层
const policeExpandsChange = async (row: any, expandedRows: any) => {
  // 不管折叠 还是展开，必须重置当前分页 及 数据列表
  suspectState.suspectChildren = []
  suspectState.suspectPageData = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  }
  suspectState.policeExpands = []
  // 展开
  if (expandedRows.length) {
    if (row) {
      suspectState.policeExpands.push(row.investigatorBadgeNum)
      suspectState.policeDeptId = row.deptId // 入参
      suspectState.policeEnterAreaIds = row.enterAreaIds // 入参
      // 这里去请求 嫌疑人数据
    }
  }
}