Таблица Mo

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev
# или
cnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev

import MoTable from 'path/MoTable';

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

```javascript
export default {
    name: "App",
    components: {
        МоТаблица
    },
    data() {
        return {
            cols: [
                { align: "center", type: "index" },
                { align: "center", type: "выбор" },
                { 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"
                                >
                                    Редактировать
                                </el-button>
                            );
                        }
                    }
                }
            ]
        };
    },
    methods: {
      handlerEditor(строка) {
        console.log(строка);
      }
    }
};
```#### attrs
- Тип: `Объект`
- Назначение: Атрибуты таблицы
> https://element.eleme.cn/#/ru-CN/component/table#table-attributes
>
> Поддерживает все атрибуты, указанные в вышеприведенной ссылке
>
> [Примечание] Если выше указано значение `data`, то приоритет будет выше, чем у значения `data` внутри `attrs`. Вышеуказанное значение `data` будет использоваться.- Пример

```html
<MoTable :attrs="tableAttrs" />

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"
                    }
                ]
            }
        };
    }
};

<MoTable :paging="pagingAttrs" />

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
            }
        };
    }
};

<MoTable :pagingEvents="pagingEvents" />

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