elementUI el-table-column组件内部作用域插槽的应用

el-table-column组件

有的column列不适合通过具体的数据信息直接呈现，那么，该column列中不要设置prop，而需要呈现的内容可以通过el-table-column的标签“内容区域呈现即可。

示例:

<el-table-column label="操作">
    <el-button type="primary" size="mini" icon="el-icon-edit">修改el-button>
    <el-button type="danger" size="mini" icon="el-icon-delete">删除el-button>
el-table-column>

有时所要呈现的内容不能直接通过prop获取到，在el-table-column组件内部可以通过作用域插槽获得当前行被遍历出来的数据信息。

示例：

• 在column列的“内容区域”中绘制img标签:

<el-table-column label="图标">
    <img :src="stData.row.cover.images[0]" slot-scope="stData" alt="没有图标" />
el-table-column>

注意：

1. img标签的src属性比较特殊，其需要通过后端数据提供，具体是“作用域插槽”。

2. stData调用row：代表当前被遍历出来的每行信息(对象)。

3. stData.row.cover.images[0]：代表当前被遍历出来的每条记录的图片信息。

原理：

<template>
	<div>
		
		<slot row="每行的记录信息，是一个对象，里边有各个成员">slot>
	div>
template>

作用域插槽实例回顾：

子组件：

<slot a="10" b="20" row="每行的记录信息，是一个对象，里边有各个成员">slot>

父组件里面使用子组件：

<子组件>
	<div slot-scope="stData">{{stData.a}}---{{stData.b}}---{{stData.row.xxx}}div>
子组件>