element-table-mixin v0.1.9

element-table-mixin

基于ElementUI 封装的TableMixin

特性

• 请求列表数据
• 带筛选项的列表数据请求
• 支持自定义返回体取值
• 支持自定义基于Axios封装的请求函数

版本变更记录

安装

yarn add element-table-mixin or npm i element-table-mixin

使用

main.js

import axios from 'axios'
import {TableMixinConfig} from 'element-table-mixin'

// 其他配置详见文档
TableMixinConfig.REQUEST = axios

使用内置组建：

这种方式不是特别灵活，还请大家提PR完善

<template>
  <div>
    ...
    <table-container
        :url='tableDataUrl'
        style="flex:1"
        :columns="tableColumns"
        :table-ops="tableOps"
        :auto-load="true"
        :filters="filterForm"
        ref="table">
          <template slot="column">
            <el-table-cloumn></el-table-cloumn>
          </template>
    </table-container>
    ...
  </div>
</template>

### 效果图
![alt 效果图](http://blog.fengtianhe.cn/images/element-table-mixin.png)

##### 自定义table方式
```javascript
import {TableMixin} from 'element-table-mixin'

export default {
    ...
    mixins: [TableMixin],
    data() {
        return {
            baseUrl: UserService.URL_USER_LIST,
            filterForm: {},
            tableData: {}
        }
    },
    created() {
        this.setTableFilter()
    }
    ...
}

使用分页组件

<template>
  <table-pagination
      :base-url="baseUrl"
      :datasource.sync="tableData"
  />
</template>

<script>
import {TablePagination} from 'element-table-mixin'
export default {
  components: {TablePagination},
  data() {
    return {
      baseUrl: UserService.URL_USER_LIST,
      filterForm: {},
      tableData: {}
    }
  },
}
</script>

参数

props

ColumnObject

{
    "label": "创建时间", 
    "prop": "createdAt", 
    "align": "center", 
    "width": "130px", 
    "formatter": tableFormatDate,
}

event

methods

slot

TableMixinConfig

默认配置的返回值

如果后端的返回值和默认不一致，请调整配置项

{
  ...,
  "data": {
    "lists": [],
    "size": 15,
    "pageNum": 1,
    "total": 50
  }
}

交流联系方式：

• QQ：545704061
• 微信：fth545704061