git地址:项目git地址(https://github.com/hgg111/vue2AntdTablePage.git)
实现效果:
代码:
RemberTableHeader.vue组件: 记忆表头组件。将用户选择展示的表头数组存储在 localStorage 中,进入页面时读取,实现记忆表头功能。
记忆表头功能效果:
TablePage.vue:表格页面组件。页面包括树结构数据展示,树搜索,表格展示,表格筛选功能,并且实现响应式布局。
{{ title }} record.id ? record.id : record.taskId":row-selection="{ selectedRowKeys: tableSelectedRowKeys, onChange: onSelectChange, }":pagination="{ defaultPageSize: requestParams.pageSize, current: requestParams.pageNo, total: tableTotal, showTotal: (total) => `共 ${Math.ceil(total / requestParams.pageSize)} 页,共 ${total} 条数据`, }"@change="pageCurrentChange">基本操作{{ (index + 1) + (requestParams.pageNo - 1) * requestParams.pageSize }}{{ text }}
实例 tableTest.vue
下一篇:mpg123播放器的安装与使用