# 带分页器的表格使用文档

## 组件参数

|  属性名   | 说明  | 类型 |  可选值 |  默认 |
|  ----  | ----  | ----  | ----  | ----  |
|  v-model  | 表格数据，用于改变表格数据和读取，分页的情况下不建议通过该属性改变表格数据，而是使用onLoad回调  | Array  | -  | - |
|  fields  | 定义字段及相关属性，详细参考下表  | Array  | -  | - |
|  tableConfig  | 表格样式等配置项，详细参考下表，若要全局修改则写在src/plugins/EasyComponent/globalConfig.js  | Object  | -  | - |
|  buttons  |  定义表格行尾的按钮，详细参考下表  | Array  | -  | - |
|  selected  |  当开启多选框的时候选中的行，支持sync修饰符  | Array  | -  | - |
|  emitLoadOnCreate  |  是否在组件创建时立即调用onLoad方法  | boolean  | -  | false |
|  onLoad  |  组件创建、切换页数等时候触发的加载数据的方法,返回表单数据数组和总条数  | Function(pageParam,EasyTableInstance)=>{tableData,total}  | -  | - |

## 组件参数-fields

fields是一个对象数组，用于定义每一行的属性。除了通用字段外。

|  属性名   | 说明  | 类型 |  可选值 |  默认 |
|  ----  | ----  | ----  | ---- | ----  |
| type  | 表格项类型 | string | slot | - |
| prop  | 数据对应的键名 | string | - | - |
| label  | 名称 | string | - | - |
| formatterMap  | 将对应的值作为value转换到label，tableProps传入formatter时失效 | Array<{ value: any, label: string }> | - | - |
| showInTable  | 是否显示在表格上 | boolean | - | false |
| tableSort  | 排序索引 | number | - | 0 |
| tableProps  | 传递到对应的el-table-column上 | Object | - | - |
| slotName  | 插槽名称 | string | - | - |
| autoColWidth  | 按比例分配宽度的比例值，必须全部showInTable为真值的field都设置该属性，且indexAutoColWidth、selectionAutoColWidth、handlerAutoColWidth都有在值才有效| string | - | - |



## 组件参数-tableConfig

该属性是一个对象，用于配置表格的样式和功能等

|  属性名   | 说明  | 类型 |  可选值 |  默认 |
|  ----  | ----  | ----  | ---- | ----  |
| showIndex  | 是否显示序号 | boolean | - | - |
| indexMethod  | 自定义序号生成方法 | Function(index)=> number | - | - |
| indexWidth  | 序号宽度 | string | - | - |
| selection  | 是否显示多选框 | boolean | - | false |
| selectionWidth  | 多选框宽度 | string | - | - |
| handlerWidth  | 按钮列宽度 | string | - | - |
| rowKey  | 数据项主键 | string | - | - |
| showPagination  | 是否显示分页器 | boolean | - | - |
| tableProps  | 直接传递到el-table的属性 | Object | - | - |
| publicTableProps  | 传递每一个el-table-column上的属性 | Object | - | - |
| tableSelectionProps  | 直接传递到多选框column的属性 | Object | - | - |
| tableIndexProps  | 直接传递到序号column的属性 | Object | - | - |
| tableHandlerProps  | 直接传递到按钮column的属性 | Object | - | - |
| tableListeners  | 直接传递到el-table的监听器 | Object | - | - |

## 组件参数-buttons

该属性是数组，用于定义表格行尾的按钮

|  属性名   | 说明  | 类型 |  可选值 |  默认 |
|  ----  | ----  | ----  | ----  | ----  |
| label  | 按钮文本 | string | - | - |
| show  | 是否显示该按钮 | boolean | - | - |
| type  | 同el-button的type | string | primary / success / warning / danger / info / text | - |
| size  | 同el-button的size | string | medium / small / mini | - |
| disabled  | 是否禁用 | boolean | - | - |
| position  | 按钮位置，可选表头或行内 | string | header / row | - |
| handler  | 点击时触发的回调 | Function(scope, tableScope, button) | - | - |

## 组件参数-onLoad
用于加载表格的数据，当分页器的页码，大小变化时调用，也或是表格创建时调用
```javascript
export default {
  methods: {
    onLoad(pageParam, EasyTableInstance){
      // 页码，页大小
      const { current, size } = pageParam
      // get data and total
      const tableData = []
      const total = 100
      // 既可以直接返回对象，也可以返回Promise，所以可以通过接口获取数据后返回
      return api({
        current,
        size
      }).then((res)=>{
        return {
          tableData: res.data,
          total: res.total
        }
      })
    }
  }
}
```

## 公共方法Methods

|  名称   | 说明  | 入参 |  返回值 |
|  ----  | ----  | ----  | ----  | 
|  reset  | 重置页码为1，页大小为10，并调用onLoad方法  | -  |  - | 


## 进阶-闭包
大部分情况下，上面这些属性都可以通过闭包的方式根据组件状态进行响应式设置(部分不生效的是因为暂时没有需要用到的场景，用到再往组件里加)，闭包的第一个参数必定为scope，这个对象分别可以解构出tableData、tableConfig、tableInstance、meta，部分属性的闭包会追加传入额外的参数，请参考下面的文档或源代码

```javascript
// 普通静态配置
const fields = [
  {
    prop: 'name',
    label: '数量',
    showInTable: true,
    tableSort: 0,
    tableProps: {
      'min-width': '200px'
    }
  }
]
```
```javascript
// 使用闭包
const fields = [
  {
    prop: 'name',
    label: '数量',
    showInTable: ()=>{
      // 此处this指向外面的组件，通过这个闭包可以使外部的showName控制是否显示该列
      return this.showName
    },
    tableSort: 0,
    tableProps: {
      'min-width': '200px'
    }
  }
]
```

### 闭包中不支持异步操作  
需要异步操作时请用闭包返回一个当前组件的值，然后异步去改变这个值
```javascript
export default {
  data(){
    return {
      asyncShow: false,
      fields: [
        {
          prop: 'name',
          label: '数量',
          showInTable: ()=>{
            return this.asyncShow
          }
        }
      ]
    }
  },
  created(){
    setTimeout(()=>{
      this.asyncShow = true
    }, 5000)
  }
}

```

## 进阶-使用插槽
可以通过定义具名插槽插入到fields数组定义的相应的位置

```html
<easy-table :fields="fields">
  <div 
    slot="testSlot"
    slot-scope="scope" 
  >
    scope包含原本el-table插槽的所有属性以及额外的field属性
    {{ scope.row[scope.field.prop] }}
    通过使用scope.field.prop在row读取对应的值，可以使该插槽在不同prop中通用
  </div>
</easy-table>
```

```javascript
const fields = [
  {
    type: 'slot',
    label: '测试插槽',
    showInTable: true,
    slotName: 'testSlot', // 对应插槽的slot字段
    prop: 'test'
  }
]
```


## 组件完整使用例子

```javascript
export const template = {
  data() {
    return {
      tableConfig: {
        showIndex: true,
        indexMethod: (index) => {
          return index
        },
        indexWidth: '50',
        selection: true,
        selectionWidth: '55',
        rowKey: 'id',
        showPagination: true,
        tableProps: {
          border: true
        },
        tableSelectionProps: {
          reserveSelection: false
        },
        tableIndexProps: {}
      },
      fields: [
        {
          prop: 'name',
          label: '数量',
          showInTable: true,
          tableSort: 0,
          tableProps: {
            'min-width': '200px'
          }
        }
      ],
      buttons: [
        {
          label: '删除',
          type: 'danger',
          loading: false,
          show: true,
          disabled: false,
          position: 'header', // header | row
          handler: (scope, tableScope, button) => {
            console.log(scope, tableScope, button)
            button.loading = true
            button.label = '正在删除'
            setTimeout(() => {
              button.loading = false
              button.label = '删除'
            }, 5000)
          }
        }
      ]
    }
  }
}
```
