Skip to content

Latest commit

 

History

History
33 lines (26 loc) · 656 Bytes

Slot.md

File metadata and controls

33 lines (26 loc) · 656 Bytes

作用域插槽

如果要用渲染函数向子组件中传递作用域插槽, 则可以使用scopedSlots字段

scopedSlots: {
  default: props => {
    console.log(props)
    return <div>作用域插槽</div>
  }
}

在普通的vue模板中, 是通过template进行渲染, 在内部可以直接通过scope拿到当前item数据

<el-table-column label="图片">
  <template slot-scope="scope">
    <img :src="scope.row.src" />
  </template>
</el-table-column>

使用jsx改写:

<el-table-column label="图片" {...{
  scopedSlots: {
    default: scope => <img src={scope.row.src} />
  }
}}></el-table-column>