$scopedSlots的使用 与 element 表格二次封装

为了使template轻便，通过配置来渲染表格方便些，并且使它的样式更贴近于项目的UI要求，就简单的封装了一下，其中主要部分是作用域插槽的渲染，从中可以学到$scopedSlots的使用,并可用于组件编写中；

代码如下：(note: vue-cli4中支持jsx写法）

<script>
export default = {
  name: 'warpper-table',
  props: {
      data: {
          type: Array,
          default () {
              return []
          }
      },
      columns: {
          type: Array,
          default () {
              return []
          }
      }
  },
  render () {
      return (
        <el-table>
            {
                this.columns.map((column, idx) => {
                        if (column.type === 'slot') {
                            return (
                                <el-table-column label={column.title} scopedSlots={{default: props =>  this.$scopedSlots[column.slot]({...props})
                                }}></el-table-column>
                            )
                        } else {
                            return (
                                <el-table-column prop={column.prop} label={column.title}></el-table-column>
                            )
                        }
                    })
            }
        </el-table>
      )
  }
}
</script>
<style scoped>
	custom style
</style>

columns 的数据结构:

{
  title: '标题',
  prop: 'props',
  type: 'slot | undefined', // 如果是slot就是自定义表格模板
  slot: 'slotName', // 自定义模板slot
}

使用：

<warpper-table :columns="colums" :data="data">
  <template #opt="scope">
      <span @click="dosomethin(scope)">操作</span>
  </template>
</warpper-table>