el-table实现局部loading效果(不包含表头)
时间: 2023-05-22 11:03:10 浏览: 1557
可以使用 el-table 组件的 slot-scope 来实现局部 loading 效果。具体实现方式如下:
1. 在 el-table 上添加 :loading 属性,值为一个布尔值,控制是否显示 loading 效果。
2. 在 el-table-column 上添加 slot-scope 属性,值为一个名为 "loading" 的插槽,用于渲染单元格内部的内容。
3. 在 "loading" 插槽内部,使用 el-spin 组件来实现 loading 效果。
示例代码如下:
```
<el-table :data="tableData" :loading="loading">
<el-table-column prop="name" label="姓名" :loading="loading">
<template slot-scope="{ row }">
<div v-if="!loading">{{ row.name }}</div>
<div v-else>
<el-spin size="small" style="margin-right: 5px;"></el-spin>
{{ row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
当 loading 为 true 时,el-table 和 el-table-column 会显示 loading 效果,而 "loading" 插槽内的 el-spin 组件会替换掉单元格内部的内容,实现局部 loading 效果。
阅读全文