java全栈前端项目中所遇到的问题

ant vue里表格(a-table)的二次封装

2021-03-24  本文已影响0人  雯几

此代码二次封装主要是解决slot插槽的问题

<script>
export default {
  props: {
    columns: Array,
    dataSource: Array
  },
  render () {
    const on = {
      ...this.$listeners
    }
    const props = {
      ...this.$attrs,
      ...this.$props,
      ...{
        dataSource: this.dataSource,
        columns: this.columns
      }
    }
    const slots = Object.keys(this.$slots).map(slot => {
      return (
        <template slot={slot}>{this.$slots[slot]}</template>
      )
    })
    const table = (
      <a-table bordered props={props} scopedSlots={this.$scopedSlots} on={on}>
        {slots}
      </a-table>
    )
    return (
      <div class="w-table">{table}</div>
    )
  },
};
</script>
<style lang="scss">
</style>
上一篇 下一篇

猜你喜欢

热点阅读