el-table实现局部loading效果,不包含表格头部
时间: 2023-05-22 21:03:14 浏览: 98
可以通过在el-table-column中使用slot-scope和loading属性来实现局部loading效果。具体做法如下:
1. 在el-table-column中增加slot-scope属性,并使用render函数返回自定义的loading效果,例如:
<el-table-column label="列名" prop="propName" width="150">
<template slot-scope="{ row }">
<div v-if="row.loading" class="el-table__loading">
<i class="el-icon-loading"></i>
</div>
<div v-else>{{ row.propName }}</div>
</template>
</el-table-column>
2. 对于需要局部loading的行,定义一个loading属性,并在需要的时候将其设为true,例如:
data() {
return {
tableData: [
{
id: 1,
propName: '数据1'
},
{
id: 2,
propName: '数据2',
loading: true // 需要局部loading的行
},
{
id: 3,
propName: '数据3'
}
]
}
}
3. 在需要局部loading的行的数据请求完成后,将其loading属性设为false,例如:
this.tableData[1].loading = false;
这样,在数据请求过程中,指定行的loading效果会显示出来,数据请求完成后,loading效果会消失。
注意:以上代码是基于element-ui的el-table实现的,如果你使用的是其它框架或自己写的表格组件,则具体实现方式可能有所差异。