英文网站制作公司哪家好,网站制作 用户登录系统,网站功能提升权限,杭州上城区抖音seo渠道前言
有时遇到这样的需求#xff0c;就是在表格里面嵌入一个表格#xff0c;以及要求带有分页#xff0c;这样在ElementPlus中很好实现。以下使用Vue2语法实现一个简单例子#xff0c;毕竟Vue3兼容Vue2语法#xff0c;若想要Vue3版本例子#xff0c;简单改改就OK了。
一…前言
有时遇到这样的需求就是在表格里面嵌入一个表格以及要求带有分页这样在ElementPlus中很好实现。以下使用Vue2语法实现一个简单例子毕竟Vue3兼容Vue2语法若想要Vue3版本例子简单改改就OK了。
一、示例代码
1/src/views/Example/InlineTable/index.vue
templatediv classindex v-loadingelementLoading element-loading-text数据正在加载中...!-- 外层表格 --div classouter-table-containerel-tablebordersizesmallrow-keyidrefouterTableRefheight100%highlight-current-row:dataouterData.list:expand-row-keysouterData.expandedKeysexpand-changehandleOuterDataExpandChangeel-table-column fixed propid label游戏服务器ID width200 aligncentertemplate #defaultscopep{{ scope.row.id }}/p/template/el-table-columnel-table-column fixed propid label玩家列表 typeexpand width200 aligncentertemplate #defaultscopediv classouter-table-container-td__playerList v-loadingscope.row.loading!-- ^ 内嵌表格 --div classinner-table-containerel-tablebordersizesmallrow-keyidheight100%highlight-current-row:datascope.row.listel-table-column fixed propid label玩家ID width200 aligncentertemplate #defaultscopep{{ scope.row.id }}/p/template/el-table-columnel-table-column proppower label玩家战力 widthauto aligncenter show-overflow-tooltiptemplate #defaultscopep styletext-align: left; text-indent: 10px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;{{ scope.row.power }}/p/template/el-table-columnel-table-column fixedright label操作 aligncenter width150template #defaultscopediv classinner-table-container-td__operationel-rowel-col :span24!-- ^ 查看详情 --el-tooltip effectdark content查看详情 placementtop :enterablefalse :hide-after0el-button sizesmall type styleborder: unset plain circle click() {log(查看详情 , scope.row)}el-icon :size16View //el-icon/el-button/el-tooltip!-- / 查看详情 --/el-col/el-row/div/template/el-table-column/el-table/div!-- / 内嵌表格 --!-- ^ 内嵌分页 --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, 50, 100]layouttotal, sizes, prev, pager, next, jumpersize-changehandleInnerTableSizeChange(scope.row)current-changehandleInnerTableCurrentChange(scope.row)//div/div/template/el-table-columnel-table-column prophost label游戏服务器名称 widthauto min-width400 aligncenter show-overflow-tooltiptemplate #defaultscopep classouter-table-container-td__name{{ scope.row.host }}/p/template/el-table-columnel-table-column label创建时间 width400 aligncentertemplate #defaultscopediv{{ scope.row.createTime ? scope.row.createTime : - }}/div/template/el-table-column/el-table/div!-- / 外层表格 --!-- 外层分页 --div classouter-pagger-containerel-paginationsmallbackground:current-pageouterData.pageNumber:page-sizeouterData.pageSize:page-sizes[20, 30, 50, 100]:totalouterData.totallayouttotal, sizes, prev, pager, next, jumpersize-changehandleOuterTableSizeChangecurrent-changehandleOuterTableCurrentChange/el-pagination/div!-- / 外层分页 --/div
/templatescript
export default {data: () ({// 加载标志elementLoading: true,// 外层数据outerData: {list: [], // 列表selectedList: [], // 已选列表expandedKeys: [], // 已展开键集合expandedList: [], // 已展开列表total: 521, // 总数pageNumber: 1, // 当前页pageSize: 20, // 页码大小},// 打印日志log: console.log}),created() {this.init()},mounted() {},methods: {// ---- ---- ---- ---- ^ 事件调用方法 ---- ---- ---- ----/*** 初始化外层表格*/init() {const list []for (let i 0; i this.outerData.pageSize; i) {const number parseInt(Math.random() * 10000) iconst row {id: number,host: 游戏服务器 - ${number},createTime: new Date()}list.push(row)}this.outerData.list listthis.outerData.total this.outerData.totalthis.elementLoading false},/*** 外层表格 - 页码改变方法*/handleOuterTableSizeChange(val) {this.elementLoading truethis.outerData.pageNumber 1this.outerData.pageSize valconst frontRecords this.outerData.pageSize * (this.outerData.pageNumber - 1)const remainRecords this.outerData.total - frontRecordslet list []if (remainRecords this.outerData.pageSize) { for (let i 0; i this.outerData.pageSize; i) {const number parseInt(Math.random() * 10000) iconst row {id: number,host: 游戏服务器 - ${number},createTime: new Date()}list.push(row)}} else {for (let i 0; i remainRecords; i) {const number parseInt(Math.random() * 10000) iconst row {id: number,host: 游戏服务器 - ${number},createTime: new Date()}list.push(row)}}setTimeout(() {this.outerData.list listthis.outerData.total this.outerData.totalthis.elementLoading false}, 200)},/*** 外层表格 - 当前页改变方法*/handleOuterTableCurrentChange(val) {this.elementLoading truethis.outerData.pageNumber valconst frontRecords this.outerData.pageSize * (this.outerData.pageNumber - 1)const remainRecords this.outerData.total - frontRecordslet list []if (remainRecords this.outerData.pageSize) {for (let i 0; i this.outerData.pageSize; i) {const number parseInt(Math.random() * 10000) iconst row {id: number,host: 游戏服务器 - ${number},createTime: new Date()}list.push(row)}} else {for (let i 0; i remainRecords; i) {const number parseInt(Math.random() * 10000) iconst row {id: number,host: 游戏服务器 - ${number},createTime: new Date()}list.push(row)}}setTimeout(() {this.outerData.list listthis.outerData.total this.outerData.totalthis.elementLoading false}, 200)},/*** 外层表格 - 展开/收起某一行事件句柄方法*/async handleOuterDataExpandChange(row, expandedRows) {this.outerData.expandedList expandedRowsconst index this.outerData.expandedList.findIndex((item) item.id row.id)if (index ! -1) {// 展开this.getPlayerList(row)} else {// 收起row.loading true}},/*** 根据游戏服务器获取玩家列表*/async getPlayerList(row) {for (let vo of this.outerData.list) {// 匹配游戏服务器if (vo.id row.id) {vo.loading falsevo.list [] // 列表vo.total 25 // 总数vo.pageNumber 1 // 当前页vo.pageSize 10 // 页码大小const list []for (let i 0; i vo.pageSize; i) {const number parseInt(Math.random() * 100000000) iconst row {id: number,power: Math.pow(number, 5),}list.push(row)}vo.list list}}},/*** 内嵌表格 - 页码改变方法*/handleInnerTableSizeChange(row) {row.loading truerow.pageNumber 1const frontRecords row.pageSize * (row.pageNumber - 1)const remainRecords row.total - frontRecordslet list []if (remainRecords row.pageSize) {for (let i 0; i row.pageSize; i) {const number parseInt(Math.random() * 100000000) iconst row {id: number,power: Math.pow(number, 5),}list.push(row)}} else {for (let i 0; i remainRecords; i) {const number parseInt(Math.random() * 100000000) iconst row {id: number,power: Math.pow(number, 5),}list.push(row)}}setTimeout(() {row.list listrow.total row.totalrow.loading false}, 200)},/*** 内嵌表格 - 当前页改变方法*/handleInnerTableCurrentChange(row) {row.loading trueconst frontRecords row.pageSize * (row.pageNumber - 1)const remainRecords row.total - frontRecordslet list []if (remainRecords row.pageSize) {for (let i 0; i row.pageSize; i) {const number parseInt(Math.random() * 100000000) iconst row {id: number,power: Math.pow(number, 5),}list.push(row)}} else {for (let i 0; i remainRecords; i) {const number parseInt(Math.random() * 100000000) iconst row {id: number,power: Math.pow(number, 5),}list.push(row)}}setTimeout(() {row.list listrow.total row.totalrow.loading false}, 200)},}
}
/scriptstyle langless scoped.index {display: flex;flex-direction: column;width: 100%;height: 100%;overflow: hidden;// ---- ---- ---- ---- ^ 外层表格 样式 ---- ---- ---- ----:deep(.outer-table-container) {flex: 1;position: relative;overflow: hidden;.el-table {th {.cell {color: #000;font-weight: normal;font-size: 13px;}}td {padding: 2.5px 0;.cell {// color: #000;font-size: 13px;padding: 0;}}.outer-table-container-td__playerList {height: auto;overflow: auto;padding: 4px 7px;/* ^ 内嵌表格 */.inner-table-container {position: relative;overflow: hidden;.el-table {th {.cell {color: #000;font-weight: normal;font-size: 13px;}}td {padding: 2.5px 0;.cell {// color: #000;font-size: 13px;padding: 0;}}.el-table__cell {// background-color: #f8f8f8;}}/* 操作 */.inner-table-container-td__operation {.el-button {position: relative;margin: 0px 1px;}}/* / 操作 */}/* / 内嵌表格 *//* ^ 内嵌分页 */.inner-pagger-container {position: relative;width: 100%;height: 26px;margin-top: 7px;.el-pagination {position: absolute;top: 0;// left: 0;right: 0;bottom: 0;margin: 0 auto;width: fit-content;.btn-prev, .btn-next, .el-pager li {border: 1px solid #dcdfe6;}.el-pager li.is-active {border-color: #5e7ce0;}}}/* / 内嵌分页 */}/* 操作 */.operation {.el-button {position: relative;margin: 0px 1px;}}/* / 操作 */}}// ---- ---- ---- ---- / 外层表格 样式 ---- ---- ---- ----// ---- ---- ---- ---- ^ 外层分页 样式 ---- ---- ---- ----:deep(.outer-pagger-container) {padding: 7px 0;width: 100%;height: 26px;position: relative;.el-pagination {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 0 auto;width: fit-content;.btn-prev, .btn-next, .el-pager li {border: 1px solid #dcdfe6;}.el-pager li.is-active {border-color: #5e7ce0;}}}// ---- ---- ---- ---- / 外层分页 样式 ---- ---- ---- ----}
/style二、运行效果
