在
Element Plus
中，
表格（
el-
table）组件没有
element-loading-spinner 组件，但是可以通过使用
Element Plus 提供的 Loading 组件来实现加载动画效果。
具体实现步骤如下：
1. 在需要使用
表格的页面
中，引入
Element Plus：
```html
<link r
el="stylesheet" href="https://unpkg.com/
element-plus/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/
element-plus@next"></script>
```
2. 在需要显示
表格和加载动画的位置，添加 Loading 组件和
el-
table 组件：
```html
<
el-loading :visible="loading">
<
el-
table :data="
tableData">
<!--
表格列定义 -->
</
el-
table>
</
el-loading>
```
其
中，`:visible="loading"` 绑定了 loading 变量，用于控制加载动画是否显示。`:data="
tableData"` 绑定了
tableData 变量，用于显示
表格数据。
3. 在 Vue 实例
中，定义 loading 和
tableData 变量，以及获取数据的方法：
```js
const app = Vue.createApp({
data() {
return {
loading: false, // 是否显示加载动画
tableData: [], //
表格数据
};
},
methods: {
getData() {
this.loading = true; // 显示加载动画
// 异步获取数据
setTimeout(() => {
this.
tableData = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
];
this.loading = false; // 隐藏加载动画
}, 1000);
},
},
});
```
在 getData 方法
中，先将 loading 设置为 true，显示加载动画，然后异步获取数据，获取完成后将数据赋值给
tableData，最后将 loading 设置为 false，隐藏加载动画。
4. 在页面加载完成后，调用 getData 方法获取数据：
```js
app.mount('#app');
app.getData();
```
完整代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Element Plus
表格加载动画示例</title>
<link r
el="stylesheet" href="https://unpkg.com/
element-plus/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/
element-plus@next"></script>
</head>
<body>
<div id="app">
<
el-loading :visible="loading">
<
el-
table :data="
tableData">
<
el-
table-column prop="name" lab
el="姓名"></
el-
table-column>
<
el-
table-column prop="age" lab
el="年龄"></
el-
table-column>
</
el-
table>
</
el-loading>
</div>
<script>
const app = Vue.createApp({
data() {
return {
loading: false, // 是否显示加载动画
tableData: [], //
表格数据
};
},
methods: {
getData() {
this.loading = true; // 显示加载动画
// 异步获取数据
setTimeout(() => {
this.
tableData = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
];
this.loading = false; // 隐藏加载动画
}, 1000);
},
},
});
app.mount('#app');
app.getData();
</script>
</body>
</html>
```
4220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
