vue 父子组件 如何设置一行的子组件数量

Question

比如有一个父组件mForm

<form>
    <table>
        <slot></slot>
    </table>
</form>

还有一个子组件textbox

<div>
    <div>标题</div>
    <div>内容</div>
</div>

想要得到的结构和以下表格差不多

<table>//父组件
    <tr>
        <td>我是子组件1</td>
        <td>我是子组件2</td>
        //不固定一行显示多少个组件
    </tr>
</table>

当时我想的是 设置一个属性 Column 来控制一行有多少列
然后如下写

<m-form Column="4">//设置一行4个  
    <text-box>子组件1</text-box>
    <text-box>子组件2</text-box>
    //...
    <text-box>子组件N</text-box>
</m-form>

结果不明白应该怎么写才对，所以请教一下应该怎么写，或者我的思路有什么问题，还有什么更好的写法

Answer 1

可以啊 你在myForm里根据this.$slots过滤一下

Answer 2

很多框架都有等分，例如BootStrap、Element-Ui、Iview、或者自己写CSS实现一行显示几个都是很简单的事