关于element-ui的表格组件，vue插槽问题?

Question

<el-table :data="dataList">
    <el-table-column label="编号">
        <template slot-scope="scope">{{scope.row.Id}}</template>
    </el-table-column>
    <el-table-column label="标题">
        <template slot-scope="scope">{{scope.row.Title}}</template>
    </el-table-column>
</el-table>

上面是element组件的的基本用法

我想根据上面的用法自己写一个表格组件，也包含table组件和table-column组件两个组件，
请问我怎么在table组件的默认插槽里，把row传给插槽中的el-table-column组件

table组件部分：

<div class="tbody">
    <div class="tr" v-for="(row, ii) in data" :key="ii">
        
        //直接取默认插槽，但这里怎么把row传给默认插槽中的每一个el-table-column组件
        <slot name="default"></slot>
        
    </div>
</div>

table-column组件部分：

<div class="td">
    <slot name="default" :row="row"></slot>
</div>

Answer 1

可以参考社区的这个问答，可以实现你的需求 👉 javascript - vue中如何实现跨组件传递slot（插槽）

---

但是过来人的经验之谈，如非必要请不要自己封装出来通用的 table 组件。
期望通过 props 传入的形式来减少 table-template 书写的目标。但其实并没有减少多少工作量。

你现在的情况多半就是因为封装好了一个简单的 table 组件，发现新需求又有其他的客制化需求，然而你封装的通用 table 组件没办法满足这个克制化需求了。

少走点弯路吧，少年。

Answer 2

<el-table>
        <el-table-column v-for="(item,index) in options">
          <template #default="scope">

            <slot :name="item.slotName" :scope="scope"></slot>
          </template>

        </el-table-column>
</el-table>