element UI表格组件（集成axios请求与分页）二次封装

hhh-ui

这是一个基于elementUI二次封装的组件，可以快速实现你想要的表格功能 github地址!，如果对你有帮助，不要忘记给个星星啊，哈哈哈。持续更新中，这个组件我更新了一个新版本,功能更全，文档也更清楚。

安装 hhh-ui

cnpm install hhh-ui -S

全局注册（在main.js引用）：

import HhhUi from 'hhh-ui'
Vue.use(HhhUi)

页面引用

<hhh-table 
    :flush="fresh"
    :inTableData="tableDataConfig"
    @rowClick="tableClickConfig"
    :inAjax="tableAjaxConfig"></hhh-table>

props：

flush：监听表格数据的变化，当这个值改变的时候会触发表格更新
    eg：fresh = new Date();
inSerachFilte:搜索条件，配合flush一起使用，当搜索条件改变之后new一个新的时间给flush，表格数据就自动刷新了。
eg：inSerachFilte={
        searchNmae：'张三'
    }
rowClick：表格操作栏的点击事件
    eg：//tabel点击事件过滤可actionBtns配置的type过滤出table中点击的相应操作按钮
        tableClickConfig(obj) {
            if (obj.type === 'edit') {
                this.addAndEdit('edit',obj.rowData);
            }else if(obj.type === 'del') {
                this.deleteData(obj.rowData);
            }
        },
inTableData：表格配置
tableDataConfig: {
        //表头及字段配置
        tHead: [
            {
                name: 'ID',
                field: "id",
                //width: 88
            },
            {
                name: '页面',
                field: "useitem",
                type:"function",//当type=function时可以做一些类型处理
                callback:function(data){
                    return data.useitemName
                },
            },
            {
                name: '详情',
                field: "guideTitle",
                hideTit:true,
                textRowSize:5,
                type:"function",
                callback:function(data,row){
                    let text = ""
                    row.guideItem.forEach((e,i)=>{
                        text += (i+1)+","+e.itemName+":<br />"+(e.itemContent===null?'':e.itemContent)+"<br />";
                    })
                    return "<div style='text-align: left' title='"+text.replace(/<br \/>/g,'\n')+"'>"+text+"</div>"
                },
                width:520
            },
            {
                name: '更新日期',
                field: "gmtModify",
                type: "function",
                callback: function (v) {
                    return GlobalUtil.dateFormat(v,"YY-M-D H:m:s").split(" ").join("<br/>");
                },
            },
        ],
        //自动渲染
        tData: [],
        //自动渲染
        total: 0,
        //配置操作按钮actionSelectBtns为下拉按钮，actionBtns为平铺按钮
        actionBtWidth: "220px",
        actionBtns: [
            {
                type: 'edit',
                label: "<span class='btn'>编辑</span>",
            },
            {
                type: 'del',
                label: "<span class='btn'>删除</span>",
            },
        ],
        //配置是否显示多选框
        isMultiple: false,
        //配置是否显示排序
        isRank: false
    },
inAjax：表格接口请求配置
   eg：tableAjaxConfig: {
            url: 'xXXXXXXXXXXXXXXXXXXXX',
            method: "post",
            data: {
                pageNum: 1,
                pageSize: 10
            },
        },

这个基本上拷过去就能用啦，效果图如下：

过几天会更新表格2.0版，等不及的github联系我

如果这篇文章对你有帮助，点个赞吧，哈哈哈