使用scope自定义element-ui中表格中数据的表示

首先先说一下为什么需要自定义表格中数据展现的方式？

我们一般使用element-ui中的表格组件时，一般就是普通的从后端传来数据，通过一个tableDate数组将数据直接显示在表格中，如下所示：

<el-table :data="tableData" style="font-size: 18px; font-family:cursive ;">
<el-table-column prop="student" label="学生" width="250" align="center">
</el-table-column>
<el-table>

这就意味着传来的数据是什么，我们就只能通过prop显示什么，而无法进行一些其他操作(当然正常的显示数据就是表格要实现的，但某些情况下我们会有一些特殊要求需要实现)

那么如何实现自定义呢？

这个问题的本质就是我们需要把数据从刚才的prop中拿出来，然后我们想怎么显示这个数据，就任凭我们操作就行，那么怎么取出来呢？答案就是使用scope，我们只需要在我们要显示的这个数据列中添加template，如下：

<el-table-column prop="student" label="学生" width="250" align="center">
<template slot-scope="scope" >
<el-button  @click="delete(scope.row.studentid)" icon="el-icon-edit"></el-button>
</template>
</el-table-column>

这时的scope就像是tableData的一个元素，对应的就是表格中的这一行数据，我们可以通过scope.元素名 的方式拿到数据，就可以用这个数据做完成想实现的功能，例如我上面的例子，通过scope拿到studentid，然后就可以通过这个id删除这个学生。

以此类推，我们还可以实现一些逻辑操作，通过数据的不同让表格显示出不同的内容，让表格的数据显示更加动态。

补充：上面的slot-scope="scope" 也可以改成 #default="scop"