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

  • Z时代
  • 2024-02-11
  • 分类：IT

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

回答：

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

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

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

少走点弯路吧，少年。

回答：

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

以上是 关于element-ui的表格组件，vue插槽问题? 的全部内容， 来源链接： utcz.com/p/935020.html

回到顶部