javascript - 关于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

<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>

Answer 2

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

---

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

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

少走点弯路吧，少年。