基于element-table封装，把分页组件一起封装。有以下优点
- 使用本地缓存支持自定义需要显示的列以及调整列显示顺序 。
- 和原来的element-table用法一模一样。经测试能在写中后台业务时极大提升开发速度。
- 节省每次书写大量标签代码以及每个需要使用表格时都需要重写分页逻辑。同时还自带静态数据的分页展示功能，直接避免数据过多渲染卡顿的问题
const tableData = [{ val: 1 }];//数据源
const columns = [{ label: "第一列", prop: "val" }];//定义有多少列以及每列显示什么
const pagination = {
pageIndex: 1,
pageSize: 15,
total: 0,
pageSizes: [15, 30, 50],
layout: "sizes, prev, pager, next,total", //具体含义同elementUi官方分页组件
};
const loadData=()={}//一个更新数据tableData的方法（往往就是发起请求时处理返回数据的那个接口），方便分页发生变化时更新数据yarn add @qcsfe/table-list
import tableList from '@qcsfe/table-list'
<tableList
:data="tableData"
:columns="columns"
:pagination="pagination"
@loadData="loadData"
/><tableList
index
:data="tableData"
:columns="columns"
:pagination="pagination"
@loadData="loadData"
/>其中 checkedData 就是每次勾选的数据 可通过传入 selectable（具体可查看 element 官方文档关于该参数的含义）来控制某一行是否能勾选
<tableList
selection
:data="tableData"
:columns="columns"
:checkedData.sync='checkedData'
:pagination="pagination"
@loadData="loadData"
/>const columns = [{ label: "第一列", slot: "operate" }];
<tableList
:data="tableData"
:columns="columns"
:pagination="pagination"
@loadData="loadData"
>
<template v-slot:operate="{ row }">
{{row}}自定义列
</template>
</tableList>想根据data中的某个变量动态控制某一列是否展示，只要在columns配置中放入一个hidden字段即可。该字段一般传入一个箭头函数（方便定位this）
const columns = [
{ label: "第一列会展示", prop: "val1" },
{ label: "第二列不会展示", prop: "val2",hidden:()=>this.hide } //这样就能根据某个变量控制某一列是否展示
]const columns = [{ label: "第一列", label: "val",slotHeader:'header' }];
<tableList
:data="tableData"
:columns="columns"
:pagination="pagination"
@loadData="loadData"
>
<template v-slot:header="{ row }">
{{row}}自定义表头
</template>
</tableList>Attributes (除以下常用属性外同时所有 element 官方的 Table Attributes 都支持)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 必须，表格数据源 | Array | —— | |
| columns | 必须，定义了表格显示哪些列。详情可查看 columnsAttributes | Array | - | —— |
| pagination | 必须，表格分页配置，具体可看 paginationAttributes | Object | - | - |
| loadData | 必须，更新表格数据源的函数，当切换分页组件或者排序这些需要查询参数时就需要重新通知父组件去查询数据，这个事件起到这个作用 | Function | - | — |
| index | 第一列是否显示行索引 | boolean | -- | false |
| selection | 第一列是否显示选择框以允许勾选 | boolean | -- | false |
| checkedData | .sync 形式传递，当 selection 为真是所勾选的数据 | Array | - | - |
| selectable | 某一列是否可勾选的判断函数 Function(row, index) | Function | - | - |
| _uuEditKey | 是否显示右上角的编辑按钮,当传了唯一值的时候就会显示 | string | -- | '' |
| _isRefresh | 是否显示右上角刷新按钮 | boolean | -- | false |
| needPagination | 是否需要开启分页功能，如果传入false则将数据全量展示 | boolean | -- | true |
| localPaginate | 是否开启本地分页，开启后会将数据根据pagination配置自动进行分页展示 | boolean | -- | false |
| selectCountLimit | 如果开启了表格勾选功能，那么该选项能控制能勾选的数目 | number | -- | 100000 |
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| reload | 调用后会重置pagination的pageIndex,并抛出$emit('loadData')事件，外部可监听进行数据重新加载 | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| prop | 决定该显示哪个字段,该字段和 slot 必须要填写一个 | String | - | - |
| label | 表头显示 | String | - | - |
| formatter | 同 element 官方的 formatter，用来格式化单元格 | Function(row, column, cellValue, index) | - | - |
| align | 控制内容的显示位置 | String | left/center/right | center |
| width | 对应列的宽度 | String | - | —— |
| min-width | 对应列的最小宽度 | String | - | —— |
| slot | 当某一列需要自定义时使用该字段插入插槽，该字段和 prop 必须填写要填写一个 | String | - | - |
| slotHeader | 当某一列表头需要自定时使用该字段 | String | - | - |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | - |
| show-overflow-tooltip | 当内容过长被隐藏时显示省略号，注意当传了 slot 时不会生效 | Boolean | - | false |
| sortable | 同 element 官方 Table-column Attributes 属性 | - | - | - |
| sort-method | 同 element 官方 Table-column Attributes 属性 | - | - | - |
| sort-by | 同 element 官方 Table-column Attributes 属性 | - | - | - |
| sort-orders | 同 element 官方 Table-column Attributes 属性 | - | - | - |
| hidden | 用来控制某一列能不能展示，通常用来实现根据data中的某个变量控制某列是否展示 | boolean 或者 function | - | false |
示例
{
pageIndex: 1,
pageSize: 15,
total: 1000,
pageSizes: [15, 30, 50],
layout: "total, sizes, prev, pager, next",
}
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| pageIndex | 当前页码 | Number | - | 1 |
| pageSize | 每页显示的数量 | Number | - | 15 |
| total | 总数 | Number | - | 0 |
| pageSizes | 控制每页数目的下拉选项 | Array | - | [15, 30, 50] |
| layout | 组件布局，子组件名用逗号分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot | "total, sizes, prev, pager, next" |