# MoTable

**Repository Path**: zhuzhaofeng/MoTable

## Basic Information

- **Project Name**: MoTable
- **Description**: 使用 JSX 二次封装Element UI Table,大量减少template代码,封装分页器, 全部拆分为可配置参数，持续更新
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-03-27
- **Last Updated**: 2021-11-18

## Categories & Tags

**Categories**: webui

**Tags**: None

## README

# Mo Table

## 安装所需依赖

```bash
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev
# or
cnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev
```

## 使用

> 将 MoTable目录复制到项目中
```javascript
import MoTable from 'path/MoTable';
```

```html
<MoTable :data="" :col="" {...} />
```

##  Attributes 属性

#### data
- 类型：`Array`
- 用途： 数据列表
> [注意]如果data 存在 则优先级高于下面 attrs 中的 data

- example

```html
<MoTable :data="tabelData" />
```
```javascript
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            tableData: [
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                },
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                },
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                },
                {
                    date: "2020-03-27",
                    name: "老村长1",
                    address: "四川省成都市青羊区人民中路一段16号"
                }
            ]
        };
    }
};
```

#### cols
- 类型：`Array`
- 用途：列配置
> https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
>
> [注意] Scoped Slot 通过 scopedSlots 属性指定
>
> 支持上述链接中的所有属性

- example

```html
<MoTable :cols="cols" />
```
```javascript
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            cols: [
                {  align: "center", type: "index" },
                { align: "center", type: "selection" },
                { prop: "date", label: "日期", width: "180" },
                { prop: "name", label: "姓名", width: "180" },
                { prop: "address", label: "地址" },
                {
                    label: "操作",
                    align: "center",
                    width: "140",
                    scopedSlots: {
                        default: scoped => {
                            return (
                                <el-button
                                    onClick={() =>
                                        this.handlerEditor(scoped.row)
                                    }
                                    type="primary"
                                    plain
                                    size="small"
                                    icon="el-icon-edit"
                                >
                                    Editor
                                </el-button>
                            );
                        }
                    }
                }
            ]
        };
    },
    methods: {
      handlerEditor(row) {
        console.log(row)
      }
    }
};
```

#### attrs
- 类型：`Object`
- 用途： Table Attributes
> https://element.eleme.cn/#/zh-CN/component/table#table-attributes
>
> 支持上述链接中的所有属性
>
> [注意] 如果上面data 存在 则优先级高于arrts中的data，会被上面data覆盖

- example

```html
<MoTable :attrs="tableAttrs" />
```
```javascript
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            tableAttrs: {
                stripe: true,
                border: true,
                "show-header": true,
                data: [
                    {
                        date: "2020-03-27",
                        name: "老村长",
                        address: "四川省成都市青羊区人民中路一段16号"
                    },
                    {
                        date: "2020-03-27",
                        name: "老村长",
                        address: "四川省成都市青羊区人民中路一段16号"
                    },
                    {
                        date: "2020-03-27",
                        name: "老村长",
                        address: "四川省成都市青羊区人民中路一段16号"
                    },
                    {
                        date: "2020-03-27",
                        name: "老村长",
                        address: "四川省成都市青羊区人民中路一段16号"
                    }
                ]
            }
        };
    }
};
```

#### events
- 类型：`Object`
- 用途：table events 事件
> https://element.eleme.cn/#/zh-CN/component/table#table-events
>
> 支持上述链接中的所有属性
>
> 参数同上述链接中的参数相同

- example

```html
<MoTable :events="tableEvents" />
```
```javascript
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            tableEvents: {
                "row-click": (row, column, event) => {
                    console.log(row);
                    console.log(column);
                    console.log(event);
                }
            }
        };
    }
};
```

#### paging
- 类型：`Object`
- 用途：分页器参数 不传则不显示

> https://element.eleme.cn/#/zh-CN/component/pagination#attributes
>
> 支持上面链接中的所有参数，带中划线参数转为驼峰命名page-count  => pageCount
>
> 除了上面参数之外添加新的参数：[align] 对齐方式 'left', 'center', 'right'

- example

```html
<MoTable :paging="pagingAttrs" />
```
```javascript
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            pagingAttrs: {
                currentPage: 1,
                pageSizes: [10, 20, 30, 40, 50],
                pageSize: 0,
                layout: "total, sizes, prev, pager, next, jumper",
                total: 4
            }
        };
    }
};
```

#### pagingEvents
- 类型：`Object`
- 用途：分页器事件

> ttps://element.eleme.cn/#/zh-CN/component/pagination#events
>
> 支持上面链接中的所有事件，带中划线事件名转为驼峰命名 current-change  => currentChange
>

- example

```html
<MoTable :pagingEvents="pagingEvents" />
```
```javascript
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            pagingEvents: {
                sizeChange: () => {},
                currentChange: () => {}
            }
        };
    }
};
```