muzi-ele-table

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

使用说明

可根自己的需求对源码进行修改 （有不正确的地方欢迎指出）

(具体使用可参考例子)

1、在需要使用的组件中引用

  import muzieletable from 'muzieletable'

2、在相应组件中使用

<muzieletable :eTable="this" :tableConfig="tableConfig" :initTableBySelf = "initTable" （当autoInit为true的时候 使用）

3、配置table的config

  tableConfig: { 
                isShowHeader: true,//值为true 表示显示  否则不显示 （可以不填写 默认不显示）
                title: '测试表格',//表格标题
                url: 'http://localhost:8080/static/testJsonData.json',//请求地址
                showHeaderHandle: true, //是否显示表头操作按钮 true为显示  false为不显示（可不填 默认不显示）
                tableTheme: '',//primary success warning info danger 不传值或者为空字符串为默认值
                headerOption: [
                    {
                        isShow: true,//是否显示
                        name: '增加',//当前操作按钮的title
                        icon: 'el-icon-plus', //elementUI的icon
                        fun: 'onAddEvent'//自定义事件名称
                    }
                ],
                selectMore: true,//是否显示表格最前面的复选框 true表示显示 false表示不显示
                select: [], // 数据多选，选中的行信息会显示在这里
                isIndexShow: true,//是否显示序号
                autoInit:true,//是否自动初始化表格  true表示需要在本页面增加init-table 事件来请求数据
                //false表示只需要填写上述URL即可自动获取
                column: [ //表格的列数据
                    {
                        label: '第一列1', prop: "column1", width: "auto", isHide: true
                        //label 表示表头名称    prop表示对应的 参数名  width 表示列宽   isHide表示是否显示
                    },
                    {
                        label: '第二列2', prop: "column2", width: "auto", isHide: true
                    },
                    {
                        label: '第三列3 状态(根据不同状态编号显示文字)',
                        prop: "status",
                        width: "auto",
                        isHide: true,
                        formatter: { //显示不同状态文字的html（用来格式化内容）
                            1: '<span class="status-sub">状态1</span>',
                            2: '<span class="status-sub">状态2</span>',
                            3: '<span class="status-sub">状态3</span>',
                            4: '<span class="status-sub">状态4</span>'
                        }
                    }
                ],
                pageSize: 5,//每页显示条数
                currentPage:1,//当前页码
                totalPage:7,//总条数
                searchParams:{//其他搜索条件

                },
                layout:'total, sizes, prev, pager, next, jumper',//同elementUI中pagination的layout值
                pageSizesChoose:[5,10,15,20,30],//每页显示个数选择器的选项设置 同elementUI的page-sizes的值
                data: [
                    {
                        "column1": "test1第一行第一列",
                        "column2": "adfasdfsa",
                        "status": 1
                    },
                    {
                        "column1": "asdf",
                        "column2": 2,
                        "status": 2
                    },
                    {
                        "column1": "test1第一行第一列",
                        "column2": "adfsdfasf",
                        "status": 1
                    },
                    {
                        "column1": "adfdsfasfafs",
                        "column2": "sdfasdf",
                        "status": 3
                    },
                    {
                        "column1": "test1第一行第一列",
                        "column2": "adsf",
                        "status": 4
                    }
                ], //表格对应的数据,//表格每一行的数据
                paginationPosition: 'right',//翻页位置  left right center   默认center
                showTableOption:true,//是否显示操作列
                cellOptionWidth:'300px',//右侧操作栏的宽度
                tableRightTxt: '操作',//右侧操作栏表头名称
                cellOption:[//操作按钮
                    {
                        name: '按钮1',
                        icon: 'el-icon-view', //按钮icon （elementUI 的icon）
                        fun: 'onCellOptionIconEvent',//按钮点击事件
                        isShowCellHandle: true,//按钮是否显示
                        isShowIon:true,//显示文字或者icon    true表示显示icon  false表示显示文字
                        showStatus: [1, 2, 3, 4]//当前按钮在哪些指定状态是显示的
                    },
                    {
                        name: '按钮2',
                        icon: '', //如果不填则表示显示文字
                        fun: 'onCellOptionIconEvent',//按钮点击事件
                        isShowCellHandle: true,//按钮是否显示
                        showStatus: [1, 2]//当前按钮在哪些指定状态是显示的
                    }
                ],
                hideSinglePage:true,
                //只有一页的时候  翻页按钮是否显示  true表示显示  false表示不显示  默认值为true不显示
                //缺少该参数默认为true
            }