Vue2基于Element-ui中的el-table组件进行二次封装（减少代码提高复用,扩展API）

提示：请先看第二步中的组件说明，和组件封装中其他扩展的api，的注释都在html中对应的代码结构都有主要依靠JSON数据动态执行和回调

特点：通过JSON数据动态渲染列表标题和数据列表,JSON数据驱动事件监听和回调以及数据过滤，和满足更多自定义需求组合

效果图：

下面这种模式可以点击图片，可以是一张图片，也可以数组中多个图片，点击图片可以预览切换

1.页面调用(记得进行引入组件后在调用)

        :operation="operation" :total="total" headerAlign='center' @handleNumberChange="handleNumberChange"
        @sortChange="sortChange" @select="select" :headButton="true" @handleCurrentPage="handleCurrentPage">
        


import tableList from '@/components/tableList'
components:{
　　tableList,
},
data(){
    return{
        tableData: [],//数据源
        tableLabel:[
            {
            prop: 'nickName',
            label: '用户昵称',
            align: 'center',
          },
           {
            prop: 'friendCount',
            label: '好友数量',
            align: 'center',
          },
        ],
        operation:{
            width: '220',
            Button:[
             {
                  label: '查看',
                  size: "mini",
                  authority: false,
                  callback(k) {
                        console.log(k)
                  }
                }
            ]
        },
        total:10,
        
    }
} ,
methods:{
    handleNumberChange(val){},// 每一页展示多少条切换
    handleCurrentPage(val){},//切换分页
    sortChange(column){},// 排序
    select(valArr){},//列表复选框
}                           

2.封装组件核心代码

我是马丁的车夫，欢迎转发收藏！