vue2为eltable添加loading
时间: 2024-03-02 08:51:12 浏览: 99
要为 `el-table` 添加 loading 效果,可以使用 `el-table` 的 `loading` 属性。该属性可以接受一个布尔值或一个对象。如果是布尔值为 `true`,则会在 `el-table` 上显示一个默认的 loading 效果。如果是一个对象,可以设置 loading 效果的样式、文字等信息。
以下是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData" :loading="tableLoading">
<!-- 表格列项 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
tableLoading: false
}
},
methods: {
fetchData() {
this.tableLoading = true
// 异步请求数据
// 请求完成后将 tableLoading 置为 false
}
}
}
</script>
```
在上面的代码中,通过 `:loading="tableLoading"` 将 `el-table` 的 loading 属性绑定到 `tableLoading` 变量上。在 `fetchData` 方法中,将 `tableLoading` 设置为 `true`,然后进行异步请求数据,在请求完成后将 `tableLoading` 置为 `false`,这样就能够在 `el-table` 上显示 loading 效果了。
阅读全文