slot是插槽,slot-scope=“scope“语义更加明确,相当于一行的数据,在实际开发中会碰到如下的场景,
页面上的头衔列是变化的,而我们就可以通过后端返回的具体值来判断这里应该显示什么样的内容,具体代码如下
<template>
<div class="login-container">
讲师列表
<el-table
:data="list"
style="width: 100%"
border
fit
highlight-current-row
element-loading-text="数据加载中"
>
<el-table-column prop="date" label="序号" width="70" align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="名称" width="80"> </el-table-column>
<el-table-column label="头衔" width="80">
<template slot-scope="scope">
{{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
</template>
</el-table-column>
<el-table-column prop="intro" label="资历" />
<el-table-column prop="gmtCreate" label="添加时间" width="160" />
<el-table-column prop="sort" label="排序" width="60" />
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/edu/teacher/edit/' + scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"
>修改</el-button
>
</router-link>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeDataById(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
后端返回消息如下
level等级为1就是,为1就是高级讲师,否则就是首席讲师
此外这里每行还有编辑,删除等功能,事件处理函数中的参数,scope.$index就是该行的下标,*scope.row*就是该行的数据所有消息对象,有了这两个参数我们就可以实现编辑(分配,转派,完工),删除功能,所以这个 slot-scope="scope"是非常重要的