s-row 便捷式栅格布局

<script>
// 使用方式：直接包裹
// <s-row> target.element  </s-row>
// 注意：动态表单项 v-if 控制的需要自行补充判断，否则也会渲染空的a-col占位导致错误
// 因为笔者用的是循环渲染，直接对数组filter所以不需要做这种判断

export default {
  name: 'SRow',

  props: {
    gutter: {
      type: Number,
      default: 20
    },
    span: {
      type: Number,
      default: 12
    }
  },

  render () {
    const defaultSlot = this.$slots.default || []
    const item = defaultSlot.map(item => {
      // 支持单个标签独立设置 span
      // item span === 0 则根据 row 的 span 进行设置
      const span = item.data && item.data.attrs && item.data.attrs.span
        ? item.data.attrs.span : this.span
      const col = <a-col span={span}>{item}</a-col>
      return col
    })

    return (
      <a-row gutter={this.gutter}>
        {item}
      </a-row>
    )
  }
}
</script>