自己封装的element-ui的table插件，实现render渲染，插槽等功能

前言：

再通过使用element-ui和iview这两种框架的table时的对比发现，iview比ele有个优点就是，他中间支持render渲染，但是iview的事件又是明显少于ele的，比如我们需要右键的事件，或者点击表头的事件，在iview是得不到解决的，所以在这里我对element的table进一步封装，使得他可以更好的满足我们的需要：

首先我在这里是需要引入两个组件的：（先代码，再谈谈怎么实现的）

第一个组件：iTableT.vue,这里面主要是对得到的数据进行处理，并实现功能的底层功能组件

第二：第二个组件是我的slot组件，这里是专门提出来了，来实现我们更多的需要：

第三是调动部分的代码：

//注意这里封装了一个class,可以设置每个table的class,目的用来更改他的高度，实现头部固定，上下滚动条的效果


GJcolumns:{
     {
            label: 'id',
            prop: 'id',
            align: 'center',
            width: 1,
          },
          {
            label: '线路',
            prop: 'ssxl',
            align: 'center',
            width: 126,
          },
          {
            label: '台区',
            prop: 'tqmc',
            align: 'center',
            width: 126,
          },
          {
            slot:'select',//注意这里是引用slot
            align: 'center',
            width: 126,
          },
          {
            label: '异常描述',
            prop: 'ycms',
            align: 'center',
            width: 126,
          },
          {
            label: '发生时间',
            prop: 'fssj',
            align: 'center',
            width: 170,
          },
           {
            label: '等级',
            prop: 'qxdj',
            align: 'center',
            width: 110,
            render: (h, params) => {
              let dj = params.row.qxdj;
              let style={};
              if(dj == '一般'){
                style.color = '#00fffc';
              }else if(dj == '重大'){
                style.color = '#ff5816';
              }else if(dj == '紧急'){
                style.color = '#ffc000';
              }
              return h('div', {
                style:style
              } ,params.row.qxdj)
            }
         },
       ],
}

好了，组件都发过去了，再来谈谈这一套的实现原理，优点，和不足之处吧：

优点：1、可以完美的将iview的render那种模式应用在element-ui的table 中

           2、可以使用头部slot来更换头部的内容和元素，比如写一个下拉的组件，然后放进去是可以的，写一个popover的弹框也            是可以的

           3、也有内容slot，放进去可以写入操作这类型的特殊组件

不足之处：因为，我这里是将slot单独都拿出来封装（业务需要），没办法实现slot的再次封装，在slot里面必须写死他的prop                      值，不然拿不到数据；还有，注意不要在内部设置element自带的高度，经过测试当数据量特别大，页面会卡死，

这个组件的封装就到这里：

使用步骤：

1、

2、

3、

4、

5、

好了，到这里就大功告成了，欢迎小伙伴们对这个进行再次优化，或者前来交流