需求功能如下:
序号的头部,显示展开按钮, 点击展开, 列表全部显示, 分页显示, 同时展开按钮 -> 收起 按钮
点击收起, 仅展示列表的第一二条数据
<!-- 表格-->
<el-table
ref="accountTable"
class="avue-crud reminder_table"
:data="logList"
style="width: 100%"
header-row-class-name="list-header"
select-on-indeterminate
>
<!-- 无数据 插槽-->
<template slot="empty">
<empty-block></empty-block>
</template>
<!-- 索引表头重写-->
<el-table-column type="index" label="序号" width="50" :index="indexMethod">
<template slot="header" slot-scope="{row}">
<el-button type="text" @click="changeOpen"> {{isOpen?'收起':'展开'}}</el-button>
</template>
</el-table-column>
<el-table-column
v-for="item in columns"
:prop="item.prop"
:label="item.label"
:width="item.width"
:key="item.id"
align="left"
:sortable="item.sort"
show-overflow-tooltip
>
<template slot-scope="scope">
<div >
<span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else>--</span>
</div>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<el-pagination
v-show="isOpen"
class="reminder__pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:pager-count="7"
:current-page.sync="page.page"
:page-sizes="page.pageSizes"
:page-size="page.size"
:total="page.total"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
//逻辑层
data() {
return {
logList:[],
isOpen: false
}
}
//核心是设置了table内部维护的store的状态, 源码内部调用列过滤的时候, 也是重置了states.data值
methods: {
initTable() {
//初始化调用时, 可以在页面刚刷新完成则显示收起时的状态
this.$refs.accountTable.store.states.data = this.logList.filter((v, i) => i <= 1);
},
changeOpen() {
if(!this.isOpen) {
//核心代码
this.$refs.accountTable.store.states.data = this.logList;
}else {
this.initTable()
}
this.isOpen = !this.isOpen;
},
}