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