• 使用ElementPlus实现内嵌表格和内嵌分页

    前言

    有时遇到这样的需求，就是在表格里面嵌入一个表格，以及要求带有分页，这样在ElementPlus中很好实现。以下使用Vue2语法实现一个简单例子，毕竟Vue3兼容Vue2语法，若想要Vue3版本例子，简单改改就OK了。

    一、示例代码

    （1）/src/views/Example/InlineTable/index.vue

    1. <template>
    2.   <div class="index" v-loading="elementLoading" element-loading-text="数据正在加载中...">
    3.  
    4.     
    5.     <div class="outer-table-container">
    6.       <el-table
    7.         border
    8.         size="small"
    9.         row-key="id"
    10.         ref="outerTableRef"
    11.         height="100%"
    12.         highlight-current-row
    13.         :data="outerData.list"
    14.         :expand-row-keys="outerData.expandedKeys"
    15.         @expand-change="handleOuterDataExpandChange"
    16.       >
    17.  
    18.         <el-table-column fixed prop="id" label="游戏服务器ID" width="200" align="center">
    19.           <template #default="scope">
    20.             <p>{{ scope.row.id }}p>
    21.           template>
    22.         el-table-column>
    23.  
    24.         <el-table-column fixed prop="id" label="玩家列表" type="expand" width="200" align="center">
    25.           <template #default="scope">
    26.             <div class="outer-table-container-td__playerList" v-loading="scope.row.loading">
    27.               
    28.               <div class="inner-table-container">
    29.                 <el-table
    30.                   border
    31.                   size="small"
    32.                   row-key="id"
    33.                   height="100%"
    34.                   highlight-current-row
    35.                   :data="scope.row.list"
    36.                 >
    37.             
    38.                   <el-table-column fixed prop="id" label="玩家ID" width="200" align="center">
    39.                     <template #default="scope">
    40.                       <p>{{ scope.row.id }}p>
    41.                     template>
    42.                   el-table-column>
    43.                   
    44.                   <el-table-column prop="power" label="玩家战力" width="auto" align="center" show-overflow-tooltip>
    45.                     <template #default="scope">
    46.                       <p style="text-align: left; text-indent: 10px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.power }}p>
    47.                     template>
    48.                   el-table-column>
    49.  
    50.                   <el-table-column fixed="right" label="操作" align="center" width="150">
    51.                     <template #default="scope">
    52.                       <div class="inner-table-container-td__operation">
    53.                         <el-row>
    54.                           <el-col :span="24">
    55.                             
    56.                             <el-tooltip effect="dark" content="查看详情" placement="top" :enterable="false" :hide-after="0">
    57.                               <el-button size="small" type="" style="border: unset" plain circle @click="
    58.                                 () => {
    59.                                   log('查看详情 =>', scope.row)
    60.                                 }
    61.                               ">
    62.                                 <el-icon :size="16"><View />el-icon>
    63.                               el-button>
    64.                             el-tooltip>
    65.                             
    66.                           el-col>
    67.                         el-row>
    68.                       div>
    69.                     template>
    70.                   el-table-column>
    71.                 el-table>
    72.               div>
    73.               
    74.  
    75.               
    76.               <div class="inner-pagger-container">
    77.                 <el-pagination
    78.                   v-if="scope.row.total > 0"
    79.                   small
    80.                   background
    81.                   v-model:current-page="scope.row.pageNumber"
    82.                   v-model:page-size="scope.row.pageSize"
    83.                   :total="scope.row.total"
    84.                   :page-sizes="[10, 20, 50, 100]"
    85.                   layout="total, sizes, prev, pager, next, jumper"
    86.                   @size-change="handleInnerTableSizeChange(scope.row)"
    87.                   @current-change="handleInnerTableCurrentChange(scope.row)"
    88.                 />
    89.               div>
    90.               
    91.             div>
    92.           template>
    93.         el-table-column>
    94.  
    95.         <el-table-column prop="host" label="游戏服务器名称" width="auto" min-width="400" align="center" show-overflow-tooltip>
    96.           <template #default="scope">
    97.             <p class="outer-table-container-td__name">{{ scope.row.host }}p>
    98.           template>
    99.         el-table-column>
    100.  
    101.         <el-table-column label="创建时间" width="400" align="center">
    102.           <template #default="scope">
    103.             <div>{{ scope.row.createTime ? scope.row.createTime : '-' }}div>
    104.           template>
    105.         el-table-column>
    106.       el-table>
    107.     div>
    108.     
    109.  
    110.     
    111.     <div class="outer-pagger-container">
    112.       <el-pagination
    113.         small
    114.         background
    115.         :current-page="outerData.pageNumber"
    116.         :page-size="outerData.pageSize"
    117.         :page-sizes="[20, 30, 50, 100]"
    118.         :total="outerData.total"
    119.         layout="total, sizes, prev, pager, next, jumper"
    120.         @size-change="handleOuterTableSizeChange"
    121.         @current-change="handleOuterTableCurrentChange"
    122.       >
    123.       el-pagination>
    124.     div>
    125.     
    126.  
    127.   div>
    128. template>
    129.  
    130. <script>
    131. export default {
    132.   data: () => ({
    133.  
    134.     // 加载标志
    135.     elementLoading: true,
    136.  
    137.     // 外层数据
    138.     outerData: {
    139.       list: [], // 列表
    140.       selectedList: [], // 已选列表
    141.       expandedKeys: [], // 已展开键集合
    142.       expandedList: [], // 已展开列表
    143.       total: 521, // 总数
    144.       pageNumber: 1, // 当前页
    145.       pageSize: 20, // 页码大小
    146.     },
    147.  
    148.     // 打印日志
    149.     log: console.log
    150.   }),
    151.   created() {
    152.     this.init()
    153.   },
    154.   mounted() {
    155.   },
    156.   methods: {
    157.     // ---- ---- ---- ---- ^ 事件调用方法 ---- ---- ---- ----
    158.  
    159.     /**
    160.      * 初始化外层表格
    161.      */
    162.     init() {
    163.       const list = []
    164.       for (let i = 0; i < this.outerData.pageSize; i++) {
    165.         const number = parseInt(Math.random() * 10000) + i
    166.         const row = {
    167.           id: number,
    168.           host: `游戏服务器 - ${number}`,
    169.           createTime: new Date()
    170.         }
    171.         list.push(row)
    172.       }
    173.       this.outerData.list = list
    174.       this.outerData.total = this.outerData.total
    175.       this.elementLoading = false
    176.     },
    177.  
    178.     /**
    179.      * 外层表格 - 页码改变方法
    180.      */
    181.     handleOuterTableSizeChange(val) {
    182.       this.elementLoading = true
    183.       this.outerData.pageNumber = 1
    184.       this.outerData.pageSize = val
    185.       const frontRecords = this.outerData.pageSize * (this.outerData.pageNumber - 1)
    186.       const remainRecords = this.outerData.total - frontRecords
    187.  
    188.       let list = []
    189.       if (remainRecords >= this.outerData.pageSize) {  
    190.         for (let i = 0; i < this.outerData.pageSize; i++) {
    191.           const number = parseInt(Math.random() * 10000) + i
    192.           const row = {
    193.             id: number,
    194.             host: `游戏服务器 - ${number}`,
    195.             createTime: new Date()
    196.           }
    197.           list.push(row)
    198.         }
    199.       } else {
    200.         for (let i = 0; i < remainRecords; i++) {
    201.           const number = parseInt(Math.random() * 10000) + i
    202.           const row = {
    203.             id: number,
    204.             host: `游戏服务器 - ${number}`,
    205.             createTime: new Date()
    206.           }
    207.           list.push(row)
    208.         }
    209.       }
    210.  
    211.       setTimeout(() => {
    212.         this.outerData.list = list
    213.         this.outerData.total = this.outerData.total
    214.         this.elementLoading = false
    215.       }, 200)
    216.     },
    217.  
    218.     /**
    219.      * 外层表格 - 当前页改变方法
    220.      */
    221.     handleOuterTableCurrentChange(val) {
    222.       this.elementLoading = true
    223.       this.outerData.pageNumber = val
    224.       const frontRecords = this.outerData.pageSize * (this.outerData.pageNumber - 1)
    225.       const remainRecords = this.outerData.total - frontRecords
    226.       
    227.       let list = []
    228.       if (remainRecords >= this.outerData.pageSize) {
    229.         for (let i = 0; i < this.outerData.pageSize; i++) {
    230.           const number = parseInt(Math.random() * 10000) + i
    231.           const row = {
    232.             id: number,
    233.             host: `游戏服务器 - ${number}`,
    234.             createTime: new Date()
    235.           }
    236.           list.push(row)
    237.         }
    238.       } else {
    239.         for (let i = 0; i < remainRecords; i++) {
    240.           const number = parseInt(Math.random() * 10000) + i
    241.           const row = {
    242.             id: number,
    243.             host: `游戏服务器 - ${number}`,
    244.             createTime: new Date()
    245.           }
    246.           list.push(row)
    247.         }
    248.       }
    249.  
    250.       setTimeout(() => {
    251.         this.outerData.list = list
    252.         this.outerData.total = this.outerData.total
    253.         this.elementLoading = false
    254.       }, 200)
    255.     },
    256.  
    257.     /**
    258.      * 外层表格 - 展开/收起某一行事件句柄方法
    259.      */
    260.     async handleOuterDataExpandChange(row, expandedRows) {
    261.       this.outerData.expandedList = expandedRows
    262.       const index = this.outerData.expandedList.findIndex((item) => item.id === row.id)
    263.       if (index != -1) {
    264.         // 展开
    265.         this.getPlayerList(row)
    266.       } else {
    267.         // 收起
    268.         row.loading = true
    269.       }
    270.     },
    271.  
    272.     /**
    273.      * 根据游戏服务器获取玩家列表
    274.      */
    275.     async getPlayerList(row) {
    276.       for (let vo of this.outerData.list) {
    277.         // 匹配游戏服务器
    278.         if (vo.id == row.id) {
    279.           vo.loading = false
    280.           vo.list = [] // 列表
    281.           vo.total = 25 // 总数
    282.           vo.pageNumber = 1 // 当前页
    283.           vo.pageSize = 10 // 页码大小
    284.           const list = []
    285.           for (let i = 0; i < vo.pageSize; i++) {
    286.             const number = parseInt(Math.random() * 100000000) + i
    287.             const row = {
    288.               id: number,
    289.               power: Math.pow(number, 5),
    290.             }
    291.             list.push(row)
    292.           }
    293.           vo.list = list
    294.         }
    295.       }
    296.     },
    297.  
    298.     /**
    299.      * 内嵌表格 - 页码改变方法
    300.      */
    301.     handleInnerTableSizeChange(row) {
    302.       row.loading = true
    303.       row.pageNumber = 1
    304.       const frontRecords = row.pageSize * (row.pageNumber - 1)
    305.       const remainRecords = row.total - frontRecords
    306.       
    307.       let list = []
    308.       if (remainRecords >= row.pageSize) {
    309.         for (let i = 0; i < row.pageSize; i++) {
    310.           const number = parseInt(Math.random() * 100000000) + i
    311.           const row = {
    312.             id: number,
    313.             power: Math.pow(number, 5),
    314.           }
    315.           list.push(row)
    316.         }
    317.       } else {
    318.         for (let i = 0; i < remainRecords; i++) {
    319.           const number = parseInt(Math.random() * 100000000) + i
    320.           const row = {
    321.             id: number,
    322.             power: Math.pow(number, 5),
    323.           }
    324.           list.push(row)
    325.         }
    326.       }
    327.  
    328.       setTimeout(() => {
    329.         row.list = list
    330.         row.total = row.total
    331.         row.loading = false
    332.       }, 200)
    333.     },
    334.  
    335.     /**
    336.      * 内嵌表格 - 当前页改变方法
    337.      */
    338.     handleInnerTableCurrentChange(row) {
    339.       row.loading = true
    340.       const frontRecords = row.pageSize * (row.pageNumber - 1)
    341.       const remainRecords = row.total - frontRecords
    342.       
    343.       let list = []
    344.       if (remainRecords >= row.pageSize) {
    345.         for (let i = 0; i < row.pageSize; i++) {
    346.           const number = parseInt(Math.random() * 100000000) + i
    347.           const row = {
    348.             id: number,
    349.             power: Math.pow(number, 5),
    350.           }
    351.           list.push(row)
    352.         }
    353.       } else {
    354.         for (let i = 0; i < remainRecords; i++) {
    355.           const number = parseInt(Math.random() * 100000000) + i
    356.           const row = {
    357.             id: number,
    358.             power: Math.pow(number, 5),
    359.           }
    360.           list.push(row)
    361.         }
    362.       }
    363.  
    364.       setTimeout(() => {
    365.         row.list = list
    366.         row.total = row.total
    367.         row.loading = false
    368.       }, 200)
    369.     },
    370.   }
    371. }
    372. script>
    373.  
    374. <style lang="less" scoped>
    375.   .index {
    376.     display: flex;
    377.     flex-direction: column;
    378.     width: 100%;
    379.     height: 100%;
    380.     overflow: hidden;
    381.  
    382.     // ---- ---- ---- ---- ^ 外层表格 样式 ---- ---- ---- ----
    383.     :deep(.outer-table-container) {
    384.       flex: 1;
    385.       position: relative;
    386.       overflow: hidden;
    387.  
    388.       .el-table {
    389.  
    390.         th {
    391.  
    392.           .cell {
    393.             color: #000;
    394.             font-weight: normal;
    395.             font-size: 13px;
    396.           }
    397.         }
    398.  
    399.         td {
    400.           padding: 2.5px 0;
    401.  
    402.           .cell {
    403.             // color: #000;
    404.             font-size: 13px;
    405.             padding: 0;
    406.           }
    407.         }
    408.  
    409.         
    410.         .outer-table-container-td__playerList {
    411.           height: auto;
    412.           overflow: auto;
    413.           padding: 4px 7px;
    414.  
    415.           /* ^ 内嵌表格 */
    416.           .inner-table-container {
    417.             position: relative;
    418.             overflow: hidden;
    419.  
    420.             .el-table {
    421.  
    422.               th {
    423.  
    424.                 .cell {
    425.                   color: #000;
    426.                   font-weight: normal;
    427.                   font-size: 13px;
    428.                 }
    429.               }
    430.  
    431.               td {
    432.                 padding: 2.5px 0;
    433.  
    434.                 .cell {
    435.                   // color: #000;
    436.                   font-size: 13px;
    437.                   padding: 0;
    438.                 }
    439.               }
    440.  
    441.               .el-table__cell {
    442.                 // background-color: #f8f8f8;
    443.               }
    444.             }
    445.  
    446.             /* 操作 */
    447.             .inner-table-container-td__operation {
    448.  
    449.               .el-button {
    450.                 position: relative;
    451.                 margin: 0px 1px;
    452.               }
    453.             }
    454.             /* / 操作 */
    455.           }
    456.           /* / 内嵌表格 */
    457.  
    458.           /* ^ 内嵌分页 */
    459.           .inner-pagger-container {
    460.             position: relative;
    461.             width: 100%;
    462.             height: 26px;
    463.             margin-top: 7px;
    464.  
    465.             .el-pagination {
    466.               position: absolute;
    467.               top: 0;
    468.               // left: 0;
    469.               right: 0;
    470.               bottom: 0;
    471.               margin: 0 auto;
    472.               width: fit-content;
    473.  
    474.               .btn-prev, .btn-next, .el-pager li {
    475.                 border: 1px solid #dcdfe6;
    476.               }
    477.  
    478.               .el-pager li.is-active {
    479.                 border-color: #5e7ce0;
    480.               }
    481.             }
    482.           }
    483.           /* / 内嵌分页 */
    484.         }
    485.  
    486.         /* 操作 */
    487.         .operation {
    488.  
    489.           .el-button {
    490.             position: relative;
    491.             margin: 0px 1px;
    492.           }
    493.         }
    494.         /* / 操作 */
    495.       }
    496.     }
    497.     // ---- ---- ---- ---- / 外层表格 样式 ---- ---- ---- ----
    498.  
    499.     // ---- ---- ---- ---- ^ 外层分页 样式 ---- ---- ---- ----
    500.     :deep(.outer-pagger-container) {
    501.       padding: 7px 0;
    502.       width: 100%;
    503.       height: 26px;
    504.       position: relative;
    505.  
    506.       .el-pagination {
    507.         position: absolute;
    508.         top: 0;
    509.         left: 0;
    510.         right: 0;
    511.         bottom: 0;
    512.         margin: 0 auto;
    513.         width: fit-content;
    514.  
    515.         .btn-prev, .btn-next, .el-pager li {
    516.           border: 1px solid #dcdfe6;
    517.         }
    518.  
    519.         .el-pager li.is-active {
    520.           border-color: #5e7ce0;
    521.         }
    522.       }
    523.     }
    524.     // ---- ---- ---- ---- / 外层分页 样式 ---- ---- ---- ----
    525.   }
    526. style>

    二、运行效果

  • 相关阅读:
    c++可变参数模板
    【实用小工具】一键分离音频中的纯人声～
    yolov5之魔化修改
    【mindspore】【训练】训练过程内存占用大
    动态规划求数组中相邻两数的最小差值( 即相差的绝对值 ) java 实现
    拷贝加密U盘文件
    什么是glTF?glTF详解
    Google发布Genie硬杠Sora：通过大量无监督视频训练最终生成可交互虚拟世界
    Asp.Net 6.0 集成 AutoMapper 初入
    黄金票据和白银票据
  • 原文地址：https://blog.csdn.net/Cai181191/article/details/132884385