element-table-mixin

基于ElementUI 封装的TableMixin

特性

• [x] 请求列表数据
• [x] 带筛选项的列表数据请求
• [x] 支持自定义返回体取值
• [x] 支持自定义基于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>

<script>
import {TableContainer} from 'element-table-mixin';

export default {
  ...,
  components: {TableContainer},
  data () {
    return {
      tableDataUrl: AppApplicationService.URL_APP_APPLICATION_LIST,
      filterForm: {
        appId: '',
        appName: '',
        creator: ''
      },
      tableColumns: [
        {label: '应用ID', prop: 'appId'},
        {label: '应用名称', prop: 'appName'},
        {label: '创建人', prop: 'creatorName'},
        {label: '创建时间', prop: 'createdAt', formatter: this.tableFormatDate}
      ],
      tableOps: [
        {command: 'EDIT', name: '编辑', handle: this.showEditDialog},
        {command: 'DISABLE', name: '停用', handle: this.showEditDialog, hide: this.hideBtn}
      ],
      ...
    };
  },
  ...,
  methods:{
    showEditDialog(scope){
      
    },
    tableFormatDate(row, column, cellValue){
      
    },
    hideBtn(scope){
      
    }
  }
};
</script>

效果图

自定义table方式

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

| prop | require | 描述 | type | 说明 | | ---- | ---- | ---- | ---- | ---- | | columns | true | 表格的列 | Array | ColumnObject 见下面例子 | | tableOps | false | 行数据操作项 | Array | OpObject = {command: '', name: '', handle: (scope) => {}} | | url | true | 列表请求地址 | String | | elTableStripe | false | 表格是否使用斑马线 | Boolean | 全局可使用TableMixinConfig配置 | elTableBorder | false | 表格是否使用边框 | Boolean | 全局可使用TableMixinConfig配置 | elTableSize | false | 表格的尺寸 | String | 'mini, small, medium' 全局可使用TableMixinConfig配置 | elTableSize | false | 是否自动加载请求 | Boolean | 默认 true

ColumnObject

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

event

| 事件名 | 说明 | | ---- | ---- |

methods

| 方法 | 说明 | | ---- | ---- | | resetFilter() | 重置筛选项并查询 | | setFilter() | 设置筛选项并查询 | | setTableFilter() | 从Url的Query中获取filters中对应的值进行赋值查询

slot

| name | 说明 | | --- | --- | | column | 自定义列 |

TableMixinConfig

| name | 说明 | | --- | --- | | REQUEST | 默认请求使用 axios, | | PAGE_SIZE_DEFAULT | 每页默认数量 15, | | PAGE_NUM_DEFAULT | 默认页码 1, | | RESPONSE_LIST_FIELD | 列表数据对应字段 data.lists, | | RESPONSE_PAGESIZE_FIELD | 每页数量对应的字段 data.size, | | RESPONSE_PAGENUM_FIELD | 页码对应的字段 data.pageNum, | | RESPONSE_TOTAL_FIELD | 总条数对应的字段 data.total, | | EL_TABLE_STRIPE | 全局设置表格样式：斑马线 | | EL_TABLE_BORDER | 全局设置表格样式：边框 | | EL_TABLE_SIZE | 全局设置表格样式：尺寸 |

默认配置的返回值

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

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

交流联系方式：

• QQ：545704061
• 微信：fth545704061