美文网首页java全栈前端项目中所遇到的问题
ant vue里表格(a-table)的二次封装

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

作者: 雯几 | 来源:发表于2021-03-24 15:21 被阅读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>

相关文章

网友评论

    本文标题:ant vue里表格(a-table)的二次封装

    本文链接:https://www.haomeiwen.com/subject/hjxrhltx.html