开源软件名称：

MoTable

开源软件地址：

https://gitee.com/zhuzhaofeng/MoTable

开源软件介绍：

Mo Table

安装所需依赖

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev# orcnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev

使用

将 MoTable目录复制到项目中

import MoTable from 'path/MoTable';

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

Attributes 属性

data

类型：Array
用途：数据列表

[注意]如果data 存在则优先级高于下面 attrs 中的 data

example

<MoTable :data="tabelData" />

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

<MoTable :cols="cols" />

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

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

events

类型：Object
用途：table events 事件

https://element.eleme.cn/#/zh-CN/component/table#table-events
支持上述链接中的所有属性
参数同上述链接中的参数相同

example

<MoTable :events="tableEvents" />

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

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

pagingEvents

类型：Object
用途：分页器事件

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

example

<MoTable :pagingEvents="pagingEvents" />

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