自定义指令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;},},
}