自定义指令v-loading,只需要绑定Boolean即可
v-loading=“loading”
<el-table :data="list" border style="width: 100%" v-loading="loading">
<el-table-column align="center" label="序号" width="50">
</el-table-column>
<el-table-column align="center" prop="name" label="角色" width="200">
</el-table-column>
<el-table-column align="center" prop="state" label="启用" width="200">
<template v-slot="{ row }">
<span style="margin-left: 10px">
{{
row.state === 1 ? "已启用" : row.state === 0 ? "未启用" : "无"
}}
</span>
</template>
</el-table-column>
<el-table-column align="center" prop="description" label="描述">
</el-table-column>
<el-table-column align="center" label="操作">
<template>
<el-button size="mini" type="text">分配权限</el-button>
<el-button size="mini" type="text">编辑</el-button>
<el-button size="mini" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
loading: false,默认为false
export default {
data() {
return {
loading: false, //默认加载为false
}
},
methods: {
async getRoleList() {
//刚进来开启loading加载
this.loading = true;
const { rows, total } = await getRoleList(this.pageParams);
this.list = rows;
this.pageParams.total = total;
//等待接口获取到数据,关闭加载
this.loading = false;
},
},
}