slot插槽及Element-ui 中＜template slot-scope=“scope“＞

一 源码展示

{{scope.row.state|stateTrans}}

slot-scope=“scope” //取到当前单元格
scope.$index //拿到当前行的index
scope.row //拿到当前行的数据对象
scope.row.date //是对象里面的data属性的值

二 slot插槽

插槽有三种：默认插槽、具名插槽、作用域插槽。

2.1 vue的slot默认插槽、具名插槽

export default {name: 'children'}
// 使用children组件 代替slot的内容
代替slot的内容

假如一个组件里面需要多个插槽。我们怎么来区分多个slot，而且不同slot的显示位置也是有差异的.对于这样的情况， 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
注意:一个不带 name 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，在元素上通过使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，将插槽内容放到指定位指:
多个插槽，每个需要<template 包裹

<!-- 具名插槽可缩写形式 -->
Here might be a page title

注意:v-slot 只能添加在一个 上 (只有一种例外情况)，这一点和已经废弃的 slot特性不同。
例外情况: 当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

2.2作用域插槽

作用域插槽就是实现在子组件自行决定自己要显示什么内容

项目中，插槽的内容中有需要访问到子组件里面的内容，类似子组件里的slot可以绑定一些当前作用域，从而传出来，使用组件时，插槽的内容就可以拿到slot传出来的数据,父级的插槽内容可用。
子组件：

This is an 子组件
// //动态绑定obj数据export default {data () {return {obj: {name: 'children'

父组件：

This is an Parent page
one插槽{{slotProps.obj.name}}
//slotProps.obj.name子组件data中的数据import Children from './Children.vue'export default {components: {Children},data () {return {}}}

子组件有多个作用域插槽时（上边这种简单的写法，因为可能会出现作用域不明确的问题）：
子组件：

This is an Children page
export default {data () {return {obj1: {name: 'one slot'},obj2: {name: 'two slot'

父组件：
slotProps是当前插槽bind绑定的所有数据

This is an Parent page
 ***// slotProps是当前插槽bind绑定的所有数据***
{{slotProps.obj1.name}}
{{twoSlotProps.obj2.name}}
import Children from './Children.vue'export default {components: {Children},data () {return {

2.3 动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
父组件：

This is an Parent page
{{slotProps.obj.name}}
import Children from './Children.vue'export default {components: {Children},data () {return {dynamicSlotName: 'one'

三 element-ui中的slot-scope

3.1 t基础的用法

代码参考 一
基础的用法里面，在el-table中，:data=”tableData”是数据集，结构如下：

那么对于每一个el-table-column，我们只需要使用prop=“date”，就可以将该列的数据绑定为该数组所有的对象中的“date”属性，我们可以理解为对于tableData，这里始终取的是tableData[$index].date。
table按照tableData这个数组的长度来生成多少行，按照有多少个el-table-column来生成多少列。

3.2 高级的用法

  {{ parseTime(scope.row.startDatetime, '{y}-{m}-{d}') }}{{scope.row.state|stateTrans}}{{ parseTime(scope.row.endDatetime, '{y}-{m}-{d}') }}

template（模版） 在这里属于一个固定用法：
我们主要说一下这个scope是个什么东西，按照element上的提示：
通过Scoped slot可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
我们可以理解为：tableData是给到table的记录集，scope是table内部基于tableData数据生成出来的数据集合（相似且有区别于整个数据）
scope.row.date，我们就可以读取到每一行中的date。