理解element-ui中的slot-scope的理解

理解element-ui中的slot-scope的理解

这个是一个固定用法，需要对比理解：

• 普通表格的方法
• 使用slot-scope的方法
• 对比说明

• 普通表格方法

我们先说一说这个基础的用法里面，在el-table中，:data="tableData"是数据集，结构如下：

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

table按照tableData这个数组的长度来生成多少行，按照有多少个el-table-column来生成多少列。

• 使用slot-scope方法

使用说明：

template（模版） 在这里属于一个固定用法： 

我们主要说一下这个scope是个什么东西，按照element上的提示：

通过Scoped slot可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

我们可以理解为：tableData是给到table的记录集，scope是table内部基于tableData生成出来的，我们可以用Excel描绘一下

我们传进去的tableData，在table内部生成了类似于Excel的scope，因此，通过scope.row.date，我们就可以读取到每一行中的date。

scope又并非是整个table，我们只是能通过scope.row获得当前的行数据，

• 对比说明

其实，通过上述对比，可以发现，这样的做法就提升了绑定的效果，简化了对于绑定的理解。这样不用说tableData和el-table都要绑定的问题。比如prop属性就可以不用写了。