element ui table封装组件，render 函数动态事件设置

接着上一篇讲的，封装element ui table, 支持自定义列的展示和按照指定顺序展示

自定义列需要在引用页面重新写一下，这样就可以定义化了，多数用于一些转换，或者操作列场景下，自行考虑即可，我们粉转成一个组件，那么不用每个table页面按照官方的这种el-table-column写法：

<el-table-column label="状态" >
  <template slot-scope="{row}">
    <span class="link-type">{{ row.status }}</span>
  </template>
</el-table-column> 

而是使用

columns: [
  {
    prop: 'id',
    label: '序号',
    align: 'center',
    width: '60px'
  },
  {
    prop: 'user_id',
    label: '用户id',
    align: 'center',
    width: '120px'
  },

。。。。。。。。。省略

那么如果我在某些情况下对columns的某列需要用多个事件处理，那么改怎么办呢？

下面先看看效果：

每个按钮都有自己的事件，并且按钮是动态的，下面看看代码：

columns: [  
       。。。。。。。省略   
        {
          prop: 'atrome',
          label: '操作',
          align: 'center',
          width: '250px',
          render: (h, params) => {
            const butts = this.showButton(params.row.shop_type)
            const button = []
            butts.forEach((item, index) => {
              let opt = ''
              opt = h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.openType(item.key)
                  }
                }
              }, item.val)
              button.push(opt)
            })
            return h('div', button)
          }
        }
 。。。。。。。省略   
]

//methods里面的showButton，openType方法
showButton: function(type) {
      if (type === 26 || type === 27) {
        const buts = [
          {
            'key': 'hw',
            'val': '自有仓'
          }
        ]
        return buts
      } else if (type === 28 || type === 29 || type === 30) {
        const buts = [
          {
            'key': 'ls',
            'val': 'PDD'
          },
          {
            'key': 'cp',
            'val': 'JD'
          },
          {
            'key': 'lj',
            'val': 'TIANMAO'
          }
        ]
        return buts
      }
 }

 openType: function(type) {
      alert(type)
 },

这样就实现了render 里面props来自定义 style，动态绑定多个事件，值得注意的是自定义style一定要驼峰命名，否则是不会生效的。