Mo Table

安装所需依赖

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目录复制到项目中

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: () => {}
            }
        };
    }
};

zhuzhaofeng / MoTable

Mo Table

安装所需依赖

使用

Attributes 属性

data

cols

attrs

events

paging

pagingEvents

简介

发行版

贡献者

近期动态

zhuzhaofeng / MoTable .gitee-modal { width: 500px !important; }

Mo Table

安装所需依赖

使用

Attributes 属性

data

cols

attrs

events

paging

pagingEvents

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

zhuzhaofeng / MoTable