# easy-table-vue2
> 用于后台开发列表页的列表页分页集成，基于 elementUI 的二次封装
Latest version **0.0.1** (published 2022-06-21) · 0 weekly downloads
## Install
```sh
npm install easy-table-vue2
pnpm add easy-table-vue2
yarn add easy-table-vue2
bun add easy-table-vue2
```
## Health
**Score 10/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-06-21 |
| First published | 2022-06-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 714 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | yuhaihang |
## Links
- npm: https://www.npmjs.com/package/easy-table-vue2
- npm.io page: https://npm.io/package/easy-table-vue2
## Dependencies (4)
- [vue](https://npm.io/package/vue.md) ^2.6.10
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [core-js](https://npm.io/package/core-js.md) ^3.3.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.1.3
## Recent versions
- 0.0.1 (latest) — 2022-06-21
## README
# 列表组件 easyTable
用于后台开发列表页的列表页分页集成，基于 elementUI 的二次封装
## 版本更新日志
v0.1.14
1.更新设置pagesize不生效问题
v0.1.13
修复 头部全选框导致的抖动问题
v0.1.12
修复 operates 熟悉下 list 数组中 show 功能问题
v0.1.8
1. 增加了多选记忆功能以及其他属性和elementUI保持一致；
2. 处理了多选选中触发多次事件的问题（由于兼容elementUI导致的bug，已修复；
3. 增加了elementUI中Table-column Attributes；
4. 筛选表头展示内容showColumnConfig默认为不展示；
## 引入 easyTable
`特别注意: 需要自行引入vue和element-ui（element-ui可按需引入）`
在 main.js 中写入以下内容：
```bash
import easyTable from "easyTable"
Vue.use(easyTable)
```
## 全局配置
在引入 easyTable 时，可以传入一个全局配置对象。该对象目前支持 dataFormat 与 total 字段。
dataFormat 是接口返回的数据格式，要求格式为'a.b.c'，相当于后台返回的数据为 `a:{b:{c:[]}}` ,c 中是要展示的数组，可不填，默认取接口返回的 result 下的 data 字段;
total 是接口返回的数据总数，要求格式为'a.b.c'，相当于后台返回的数据为 `a:{b:{c:1024}}` ,c 中是要展示的总数，可不填，默认取接口返回数据的 result 下 total 字段。
具体操作如下：
```bash
import easyTable from "vue-easyTable"
Vue.use(easyTable,{ dataFormat:'result.data',total:'result.total' })
```
## 页面引用
```bash
```
> `options` 为表格参数设置
#### 筛选项配置（非必填）
```bash
# serviceInstanceScreen
查询
# 重新请求的方法
doRefresh () {
this.$refs.searchResultList.refresh();
},
```
#### options 配置
```bash
# 基本设置
gridOptions: {
dataSource: {
serviceInstance: api.businessTableList, //后台请求地址或者直接是数据
},
grid: {
mutiSelect: true,//多选，默认为false
operates: { // 列操作按钮
width: 200,
list: [
{
type: "danger", //和elementUI一致
show: true,
label: "删除",
method: this.doDelete //方法，带两个参数（key, row）
},
{
type: "text",
show: true,
label: "详情",
method: this.show
}
]
},
//数据列
columns: [
{
prop: "goods_id",
columnKey: "goods_id",
labelFormatter:this.labelFormatter
},
{
prop: "on_sale",
columnKey: "on_sale",
label: "状态",
sortable: true,
}
]
}
}
api文件中如下：
const api = {
businessTableList: data => http.get(API_PREFIX + "/api/table-list", data)
}
```
## Attributes
| 参数名 | 类型 | 默认值 | 解释 | 是否必传 | 备注 |
| ----------------------- | ------------ | ----------------- | ------------------------------ | -------- | ----------------------------- | ----------- |
| serviceInstanceScreen | Object | null | 筛选项配置 | 否 | |
| gridOptions | Object | {} | 表格设置 | 是 | |
| gridOptions.dataSource | Object | {} | 数据相关 | 是 | |
| gridOptions.dataSource.serviceInstance | String/Array | null | 后台请求地址或者直接是数据 | 是 | |
| gridOptions.dataSource.loadDataOnFirst | Boolean | true | 第一次要不要直接请求数据（存在获取筛选条件后请求数据的情况，设置为 false） | 否 | |
| gridOptions.grid | Object | {} | 表格设置 | 是 | |
| gridOptions.grid.mutiSelect | Boolean | false | 是否需要多选（详见下方 `特别注意`） | 是 | |
| gridOptions.grid.selectionOptions | Object | {} | 多选时的参数，如 reserveSelection、selectable（详见下方 `特别注意`） | 是 | |
| gridOptions.grid.operates | Object | {} | 列操作按钮 （具体属性见下方） | 否 | |
| gridOptions.grid.pagination | Object | {} | 覆盖原有页面设置 | 否 | 页数，可选择下拉数 |
| gridOptions.grid.pagination.pageSize | Number | 10 | 页数 | 否 | |
| gridOptions.grid.pagination.pageSizes | Array | [10, 20, 50, 100] | 可选择下拉数 | 否 | |
| gridOptions.grid.pagination.showSizes | Boolean | true | 是否展示调整每页显示条数下拉框 | 否 | |
| gridOptions.grid.columns | Array | [] | 数据展示列（具体属性见下方） | 是 | | defaultSort |
| gridOptions.grid.defaultSort | Object | {} | 默认排序展示 | 否 | 默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 |
| gridOptions.grid.defaultSort.prop | String | {} | | 否 | |
| gridOptions.grid.defaultSort.order | String | {} | 顺序 | 否 | ascending, descending |
| gridOptions.grid.pageable | Boolean | true | 是否分页 | 否 | |
| gridOptions.grid.maxHeight | Number | | 表格最大高度 | 否 | |
| gridOptions.grid.customColumnDataHeader | Boolean | false | 支持表格自定义数据（插槽 具体详情见下方 slot） | 否 | |
| gridOptions.grid.treeable | Boolean | false | 表格树（详见下方 `特别注意`） | 否 | |
| gridOptions.grid.showColumnConfig | Boolean | false | 筛选表头展示内容 | 否 | |
| gridOptions.grid.showIndex | Boolean | false | 是否展示行号 | 否 | |
| gridOptions.grid.formatter | Function | | 展示数据格式化 | 否 | 参数：row, column, cellValue--return 的可以是 html 代码 |
| gridOptions.grid.filters | Array | [] | 开启某一列的筛选 | 否 | |
| gridOptions.grid.showLoading | Boolean | [] | 是否展示 loading | 是 | |
| gridOptions.grid.loadingOptions | Object | loading | loading 的配置详情请参考 [elementUI-loading](https://element.eleme.cn/#/zh-CN/component/loading) | 否 | 如果想使用原生可以直接使其为{} |
| gridOptions.grid.xxx | - | - | 所有 ElementUI 中 table 组件能用到的属性都可以 | - | 例如：（详见下方 `特别注意`） |
#### gridOptions.grid.operates Attributes
| 参数名 | 类型 | 默认值 | 解释 | 是否必传 | 备注 |
| ------------- | ---------------- | ------- | --------------------------------------------- | -------- | ------------------------------------- |
| width | Number | auto | 操作列宽度 | 否 | |
| list | Array | [] | 操作列的按钮 | 否 | |
| list.type | String | | 按钮类型，和 elementUI 一致 | 否 | primary / success / warning / danger / info / text |
| list.isLink | Boolean | | 是不是 a 链接（如果是 true，method 必须是 return 链接的 href） | 否 | primary / success / warning / danger / info |
| list.show | Boolean/Function | | 依据某些条件展示这个按钮，可以是函数 | 否 | 带两个参数（key, row） |
| list.disabled | Boolean/Function | | 依据某些条件禁用这个按钮，可以是函数 | 否 | 带两个参数（key, row） |
| list.label | String | | 按钮名字 | 是 | |
| list.method | Function | | 点击执行的方法 | 是 | 带两个参数（key, row） |
| list.fixed | Boolean | | 是否固定（left,right） | 否 | |
| list.icon | String | | 按钮图标 | 否 | |
| list.plain | Boolean | | 是否朴素按钮 | 否 | |
| list.style | String | | 操作按钮的行内样式 | 否 | |
| list.render | String | | 按钮的一些特殊展示 | 否 | 参数（key, row） |
| direction | String | left | 操作为 popover 时,弹框的方向 | 否 | |
| icon | String | | popover 时,显示的图标 | 否 | |
| type | String | popover | 操作按钮显示成弹出框格式 | 否 | |
#### gridOptions.grid.columns Attributes
| 参数名 | 类型 | 默认值 | 解释 | 是否必传 | 备注 |
| -------------- | ---------------------------------------------------- | ------------------------------- | ------------------------------------------ | -------- | ---- |
| prop | String | | 展示后台返回的字段 | 是 | |
| columnKey | String | | key | 是 | |
| label | String | | 表头的名字 | 是 | |
| labelFormatter | Function | | 表头的名字（可执行方法） | 否 | |
| sortable | Boolean | | 是否需要排序 | 否 | |
| columnShow | Boolean | | 是否展示当前表头（筛选列表可展示出来） | 否 | |
| visible | Boolean | | 当前这一列是否可见（可以通过某些条件判断） | 否 | |
| render | Function | | 数据项的特殊展示（详见下方 `特别注意`） | 否 | |
| width | Number | auto | 列宽度 | 否 | |
| xxx-xxx | elementUI 中 Table-column 的所有 Attributes 均可使用 | 返回的数据（与 elementUI 相同） |
## Events
| 事件名 | 说明 | 参数 |
| ------------------- | ------------------------------------- | ---------------------------------- |
| current-change-list | 列表选中触发事件 | 选中的数据 |
| selection-change | 列表单选触发事件 | 选中的数据 |
| data-change | 返回的数据改变触发事件 | 返回的数据（ data，total，result） |
| xxx-xxx | elementUI 中 table 的所有事件均可使用 | 返回的数据（与 elementUI 相同） |
## Methods
| name | 说明 | |
| ----------- | ---------------------------------- | ---------------------------------------------------------------------- |
| refresh | 重新请求数据 | |
| exportCSV | 导出数据 | 参数可以是文件名 |
| getTableRef | 获取 elementUI 的 table 组件的 ref | 可通过这样的方式调用 elementUI-table 组件的方法（详见下方 `特别注意`） |
## Slot
| name | 说明 |
| ---------------- | ------------------ |
| columnDataHeader | 支持表格自定义数据 |
## 特别注意
#### 多选问题
```bash
# 增加selection-change
# 可通过在data中加入变量
selectedRows: []
# 比如用作批量删除操作
批量删除
doBatchDelete() {
let _t = this;
if (!_t.selectedRows || _t.selectedRows.length == 0) {...}
let ids = _t .selectedRows.map(function(row) {
return row.id;
});
...
}
# 方法
handleSelectionChange(val) {
this.selectedRows = val;
},
# 属性
selectionOptions:{
reserveSelection:true, //数据更新之后保留之前选中的数据（需指定 row-key）
selectable:function(row,index){
return xxx
}
}
```
#### gridOptions.grid.columns
```bash
# 参考
render: (h, params) => {
return h('el-tag', {
props: {
type: params.row.required === true ? 'success' : 'info'
} // 组件的props
}, params.row.required === true ? '是' : '否')
}
```
#### 兼容 ElementUI 的 Table Attributes
```bash
# 参考
gridOptions: {
grid: {
showHeader:false,
'show-summary':true, //或驼峰写法showSummary:true
}
}
```
#### 直接调用 ElementUI 的 table 组件的方法
```bash
# 参考
this.$refs.searchResultList.getTableRef().sort('real_price','ascending')
```
#### 表格树
```bash
# 参考属性
tree: {
treeKey: "id",
parentKey: "parentId",
levelKey: "level",
childKey: "items"
},
treeColumn: {
label: "名称",
prop: "name",
width: "150px",
minWidth: "150px",
treeKey: "id",
parentKey: "parentId",
levelKey: "level",
childKey: "items"
}
```
---
_Source: https://npm.io/package/easy-table-vue2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._