。

以下使用Vue2语法实现一个简单例子#xff0c;毕竟Vue3兼容Vue2语法#xff0c;若想要Vue3版本例子#xff0c;简单改改就OK了。

一…前言

有时遇到这样的需求就是在表格里面嵌入一个表格以及要求带有分页这样在ElementPlus中很好实现。

以下使用Vue2语法实现一个简单例子毕竟Vue3兼容Vue2语法若想要Vue3版本例子简单改改就OK了。

一、示例代码

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

templatediv

element-loading-text数据正在加载中...!--

外层表格

classouter-table-containerel-tablebordersizesmallrow-keyidrefouterTableRefheight100%highlight-current-row:dataouterData.list:expand-row-keysouterData.expandedKeysexpand-changehandleOuterDataExpandChangeel-table-column

fixed

}}/p/template/el-table-columnel-table-column

fixed

classouter-table-container-td__playerList

内嵌表格

classinner-table-containerel-tablebordersizesmallrow-keyidheight100%highlight-current-row:datascope.row.listel-table-column

fixed

}}/p/template/el-table-columnel-table-column

proppower

}}/p/template/el-table-columnel-table-column

fixedright

classinner-table-container-td__operationel-rowel-col

:span24!--

//el-icon/el-button/el-tooltip!--

查看详情

--/el-col/el-row/div/template/el-table-column/el-table/div!--

内嵌表格

classinner-pagger-containerel-paginationv-ifscope.row.total

0smallbackgroundv-model:current-pagescope.row.pageNumberv-model:page-sizescope.row.pageSize:totalscope.row.total:page-sizes[10,

20,

jumpersize-changehandleInnerTableSizeChange(scope.row)current-changehandleInnerTableCurrentChange(scope.row)//div/div/template/el-table-columnel-table-column

prophost

classouter-table-container-td__name{{

scope.row.host

}}/p/template/el-table-columnel-table-column

label创建时间

}}/div/template/el-table-column/el-table/div!--

外层表格

classouter-pagger-containerel-paginationsmallbackground:current-pageouterData.pageNumber:page-sizeouterData.pageSize:page-sizes[20,

30,

100]:totalouterData.totallayouttotal,

sizes,

jumpersize-changehandleOuterTableSizeChangecurrent-changehandleOuterTableCurrentChange/el-pagination/div!--

外层分页

Date()}list.push(row)}this.outerData.list

this.outerData.totalthis.elementLoading

false},/***

页码改变方法*/handleOuterTableSizeChange(val)

{this.elementLoading

Date()}list.push(row)}}setTimeout(()

{this.outerData.list

this.outerData.totalthis.elementLoading

false},

当前页改变方法*/handleOuterTableCurrentChange(val)

{this.elementLoading

Date()}list.push(row)}}setTimeout(()

{this.outerData.list

this.outerData.totalthis.elementLoading

false},

handleOuterDataExpandChange(row,

expandedRows)

this.outerData.expandedList.findIndex((item)

item.id

页码改变方法*/handleInnerTableSizeChange(row)

{row.loading

5),}list.push(row)}}setTimeout(()

{row.list

当前页改变方法*/handleInnerTableCurrentChange(row)

{row.loading

5),}list.push(row)}}setTimeout(()

{row.list

----:deep(.outer-table-container)

{flex:

0;}}.outer-table-container-td__playerList

{height:

*/.inner-table-container-td__operation

{.el-button

----:deep(.outer-pagger-container)

{padding: